UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free CSS gradient generator does
Gradients turn flat colour into depth: a hero banner that glows, a button that feels pressed, a chart that fades out. Writing the CSS by hand means guessing angles and percentages, so this free online CSS gradient generator gives you a live preview and writes the code for you. It supports linear, radial and conic gradients and their repeating versions, up to ten colour stops with individual opacity and position, and sixteen ready-made presets.
Unlike simple generators, it can blend colours in OKLab, OKLCH, Lab, HSL or linear sRGB, which avoids the muddy middle that plain sRGB gradients often have, and it always writes a standard fallback for older browsers. You can preview the gradient as a box, card, circle, button or gradient text, then copy CSS, Tailwind classes or SVG, or download a PNG of any size.
How to create a CSS gradient step by step
- Pick a type. Linear is the most common. Radial suits spotlights and glows. Conic suits pie charts and colour wheels.
- Choose colours. Click a swatch, type a HEX code or start from a preset.
- Shape the gradient. Set the angle, or the centre and shape for radial and conic.
- Fine tune stops. Drag positions with the number boxes, add stops, reverse the order or distribute them evenly.
- Choose a blending space. Try OKLab if the middle of the gradient looks dull.
- Copy the code. Use the CSS, Tailwind or SVG tab, or download a PNG.
If you want inspiration, press Random gradient, or build a set of harmonious colours first with the Color Palette Generator and paste the HEX codes in.
Linear, radial and conic gradients explained
| Type | CSS function | How it works | Typical uses |
|---|---|---|---|
| Linear | linear-gradient() | Colours change along a straight line at an angle | Backgrounds, buttons, headers |
| Radial | radial-gradient() | Colours spread from a centre as a circle or ellipse | Glows, spotlights, vignettes, orbs |
| Conic | conic-gradient() | Colours sweep around a centre point | Pie charts, colour wheels, loaders |
| Repeating | repeating-*-gradient() | The stop pattern repeats to fill the shape | Stripes, checks, patterns |
Angles in CSS start at the top and turn clockwise, so 0 degrees points up and 90 degrees points right. For radial gradients the size option decides where the final colour lands: farthest-corner is the default and fills the box, while closest-side stops at the nearest edge.
Colour blending spaces: why gradients can look dull
When a browser blends two colours it must decide how to calculate the colours in between. By default it mixes the red, green and blue values directly in sRGB. That is simple, but blending opposite colours, such as blue and yellow, passes through a grey zone. Modern CSS lets you choose the colour space with the in keyword: linear-gradient(90deg in oklab, blue, yellow).
- OKLab mixes according to perceived lightness and keeps midpoints neat and even.
- OKLCH travels around the hue wheel, so blue to yellow passes through green rather than grey, giving vivid results.
- Lab is an older perceptual space with similar benefits.
- HSL blends hue, saturation and lightness and is easy to reason about.
- Linear sRGB mixes light physically, which can look brighter.
For hue-based spaces, the hue path option picks the direction around the wheel. The CSS output always includes a standard line first and the modern one after it, so unsupported browsers fall back safely.
Reading and using the generated CSS
A typical result looks like this:
.gradient { background: #0369a1; background: linear-gradient(90deg, #0369a1 0%, #38bdf8 100%); }
The first line is a solid fallback colour. The second is the gradient, with each stop written as a colour and a position. A stop with opacity is written in rgba(). Apply the class to any element, or use the same value with background-image if you layer it over a photo. To lay a gradient on top of an image, list both: background: linear-gradient(rgba(0,0,0,.4), transparent), url(photo.jpg);. The first value sits on top.
Use background-size and background-position to control tiling and offset, and set min-height so the element is tall enough to show the gradient.
Design tips for gradients that look professional
- Keep hues close. Neighbouring hues, such as blue to purple, look smoother than opposites.
- Vary lightness a little. A gentle lightness change gives depth.
- Use two or three stops. More colours need more care.
- Mind the angle. Diagonal gradients at 135 degrees feel dynamic, vertical ones feel natural like sky.
- Avoid text on busy areas. Put text on the calm part of the gradient.
- Test dark mode. A gradient that glows on white can overwhelm on black.
- Add a subtle overlay. A low opacity dark layer improves contrast behind white text.
Soft gradients also pair well with frosted panels, so try the Glassmorphism CSS Generator over your finished background.
Accessibility and text contrast on gradients
Contrast is measured between a text colour and the background directly behind it. On a gradient, the background changes across the text, so you must check the worst point. WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text. Sample the lightest and darkest colours under the text with the Color Contrast Checker. If the range fails, shift the gradient, move the text, or add a solid or semi-transparent panel behind it. Remember too that moving or animated backgrounds can distract, so respect the reduced-motion setting if you animate.
Exporting: CSS, Tailwind, SVG and PNG
| Output | Best for | Notes |
|---|---|---|
| CSS | Websites and apps | Includes fallback and modern colour space line |
| Tailwind | Tailwind projects | Arbitrary value class, plus from, via and to classes for simple cases |
| SVG | Vector graphics, logos | Linear and radial only, sRGB blending |
| PNG | Slides, social posts, wallpapers | Any size up to 4000 pixels, all gradient types |
The print button creates a one-page sheet with a preview, the settings and the CSS, which suits handoff to a developer or client.
Performance, browser support and limits
CSS gradients are drawn by the browser, so they have no download cost and scale to any screen size without blur, which makes them lighter than gradient images. Linear and radial gradients work everywhere, conic gradients work in all current browsers, and colour-space interpolation works in current Chrome, Edge, Safari and Firefox. Very large gradients with tiny colour changes can show banding. Always test on real devices, and treat PNG and SVG exports as sRGB approximations of the CSS.
Frequently asked questions
What is a CSS gradient generator?
It is a tool that builds the CSS code for a colour gradient from settings you choose, such as the type, angle, colours and positions, and shows a live preview so you can copy the finished code.
How do I make a gradient background in CSS?
Choose two or more colours, set the angle or centre, then copy the CSS. Paste it into a rule such as .hero { background: linear-gradient(90deg, #0369a1 0%, #38bdf8 100%); }.
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line, a radial gradient spreads outward from a centre point, and a conic gradient sweeps around a centre point like the hands of a clock.
How do I change the direction of a linear gradient?
Use the angle slider or the arrow buttons. 0 degrees points up, 90 degrees points right, 180 degrees points down and 270 degrees points left.
How many colours can I add?
Up to ten colour stops. You can set the position of each stop, so colours can bunch together or spread out.
How do I create a hard edge or stripes?
Give two neighbouring stops the same position, for example red at 50 percent and blue at 50 percent. The Candy stripes preset uses repeating linear gradients with hard stops.
Can I make a gradient with transparency?
Yes. Set the opacity percentage on any stop. The code uses rgba() for those stops, which is useful for fading images or overlays.
What does the colour blending space do?
It controls how colours are mixed between stops. The default sRGB can look grey or dull in the middle. OKLab and OKLCH mix in a way that matches human vision and often look smoother and brighter.
Will OKLab and OKLCH gradients work in every browser?
They work in current versions of Chrome, Edge, Safari and Firefox. The generated CSS includes a standard fallback line so older browsers still show a gradient.
What is the hue path option?
For HSL, HWB, LCH and OKLCH blending, the hue path decides which way round the colour wheel the blend travels: shorter, longer, increasing or decreasing.
How do I use the gradient in Tailwind CSS?
Open the Tailwind tab. It gives an arbitrary value class such as bg-[linear-gradient(...)] and, for simple two or three colour gradients, the from, via and to utility classes.
Can I export a gradient as an image or SVG?
Yes. Download a PNG at any size up to 4000 pixels or copy an SVG for linear and radial gradients. SVG has no conic gradient, so use CSS or PNG for those.
How do I make gradient text?
Choose Preview as Gradient text to see the effect. In CSS, set the gradient as background-image and add background-clip: text with a transparent text colour.
How can I keep text readable on a gradient?
Check contrast against the lightest and darkest part of the gradient under the text, and add a semi-transparent overlay or a text shadow if needed.
Why does my gradient show banding?
Banding appears when a gradient covers a large area with small colour differences. Using more colour difference, adding a very subtle noise image or using OKLab blending can reduce it.
Can I animate a gradient?
The preview animation rotates the angle to show the effect. In your own CSS you can animate background-position or use the @property rule to animate an angle variable.
Is this gradient generator free?
Yes. It is a free online tool with no sign-up and no watermark, and everything runs in your browser.
Sources and further reading
- MDN Web Docs, Using CSS gradients.
- W3C, CSS Images Module Level 4, gradient functions and interpolation.
- W3C, CSS Color Module Level 4, colour interpolation.
- Björn Ottosson, A perceptual color space for image processing.
- Tailwind CSS documentation, Background image and gradient color stops.
- W3C, WCAG 2.2, contrast requirements.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.