CSS Gradient Generator
Create linear, radial and conic CSS gradients with a live preview, color stops, angle control and presets. Free online CSS gradient generator — copy the code.
What next?
Found it useful? Share CSS Gradient Generator
Free, no sign-up, works in the browser — send it to a friend or add it to your site.
Related tools
- Color PickerPick a color and convert HEX to RGB, HSL, HSV and CMYK online free. Free online color picker with image eyedropper, tints, shades and WCAG contrast check.
- Color Blindness SimulatorSee images as color blind people do — simulate deuteranopia, protanopia, tritanopia and achromatopsia online free, with adjustable severity.
- Random Color GeneratorGenerate random colors with this free online random color generator — pastel, vivid, dark, warm or cool, with HEX, RGB and HSL codes to lock and copy.
- Binary TranslatorTranslate text to binary and binary to text with this free online binary translator, and convert numbers between binary, decimal, hex and octal.
- Diff CheckerCompare two texts online free and highlight every difference by line, word or character. Free online diff checker with ignore case and whitespace options.
- QR Code GeneratorCreate QR codes online free for URLs, text, WiFi, email, phone and SMS. Free online QR code generator — no signup, never expires, PNG or SVG download.
Part of these toolkits
How to use CSS Gradient Generator
- 1Pick Linear, Radial or Conic and set the angle or shape
- 2Choose colors with the picker or type hex codes, drag each stop's position, add up to 8 colors, or start from a preset or Random
- 3Press Copy CSS to paste the background rule (with a solid fallback) into your stylesheet
Frequently asked questions
How do I make a gradient background in CSS?▾
Use the background property with a gradient function, e.g. background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. The angle sets the direction and each color can have a stop position.
What is the difference between linear, radial and conic gradients?▾
Linear gradients blend along a straight line at an angle, radial gradients spread outward from a center point, and conic gradients sweep colors around the center like a color wheel or pie chart.
What does the angle in linear-gradient mean?▾
0deg points up (bottom to top), 90deg goes left to right, 180deg top to bottom and 135deg runs diagonally from the top-left to the bottom-right.
Do CSS gradients work in all browsers?▾
Linear and radial gradients work in every modern browser without prefixes. Conic gradients are supported in all current browsers since 2020. The generated code adds a solid color first as a fallback.
Can I use a gradient on text?▾
Yes: set the gradient as background, then add background-clip: text; -webkit-background-clip: text; and color: transparent; to the text element.
Embed CSS Gradient Generator on your website▾
Paste this snippet into your page. The embedded tool runs in your visitor's browser and shows a small “Powered by clkr.work” link.