How to use the CSS Gradient Generator
- Pick a preset or start from the default gradient.
- Choose Linear, Radial or Conic and set the angle, shape or position.
- Edit the colour stops: click the bar to add one, drag handles to move them, type exact colours and positions in the list.
- Optionally pick an OKLab/OKLCH interpolation for smoother blends, then click Copy CSS.
What is a CSS gradient?
A CSS gradient is an image generated by the browser that transitions between two or more colours. Because it’s an <image>, you use it in background, background-image, border-image or mask-image — not in background-color. Gradients need no HTTP request, scale to any size without blurring and can be animated or layered.
Linear, radial and conic gradients
| Type | Example | Typical use |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Hero backgrounds, buttons, image overlays |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Spotlights, glows, vignettes |
| Conic | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Colour wheels, pie charts, loaders |
In a linear gradient 0deg points up and 90deg points right (the same as to right). Conic angles start at the top and run clockwise.
Colour stops and hard edges
Each stop is a colour plus an optional position. When two stops share the same position the transition becomes a hard edge — that’s how you build stripes or the Pie chart preset: #4f46e5 0% 40%, #22c55e 40% 75%. To fade content into the page, end with a transparent version of the same colour (e.g. #00000000), which avoids a muddy grey band.
Smoother gradients with OKLab and OKLCH
By default browsers interpolate in sRGB, so blue → yellow passes through a dull grey. CSS Color 4 lets you choose the colour space: linear-gradient(90deg in oklab, blue, yellow) stays bright and even, and in oklch travels around the hue wheel. The generator outputs a plain sRGB declaration first and the interpolated version second, so browsers that don’t understand the syntax simply ignore the last line.
Using gradients in Webflow
Webflow’s Style panel has built-in linear and radial gradient editors under Backgrounds — copy the angle and stop colours from this tool into it. For anything the panel doesn’t expose, such as conic gradients or in oklch interpolation, paste the CSS into a <style> block in an Embed element or the page’s custom code and target your class. Need matching shadows? Try the Box Shadow Generator, or check text on top of your gradient with the Contrast Checker.
Tools that pair well with the CSS Gradient Generator
- Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- SVG to CSS Converter — Paste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolourable mask-image CSS.
- OG Image Generator — Create a polished link-preview image for Facebook, LinkedIn, X, Slack and WhatsApp in seconds — pick a template, type your title, add a logo, then download the PNG and matching meta tags.
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
Frequently asked questions
How do I make a gradient transparent?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Fading to the same colour at zero alpha avoids the grey band you can get with the transparent keyword in older browsers.Why is my gradient muddy or grey in the middle?
Can I apply a gradient to text?
background-clip: text; -webkit-background-clip: text; color: transparent;. Keep a solid color fallback for readability, and check contrast against the page.Why does the CSS include a solid background colour first?
How do I animate a CSS gradient?
background-position on an oversized gradient, or registering custom properties with @property and animating the stop colours or angle.