CSS Gradient Generator
What linear-gradient() does
A CSS gradient is an image drawn by the browser, not a file, so it scales to any size with no download. CSSGen.dev's gradient generator covers linear, radial and conic gradients, repeating variants, and modern colour-space interpolation that avoids the muddy grey band plain sRGB blending produces.
Syntax
background: linear-gradient(<angle>, <color> <stop>, <color> <stop>);| Part | What it controls |
|---|---|
| angle | Direction of the blend. 0deg runs bottom to top, 90deg left to right, 135deg is the common diagonal. Keywords like to right work too. |
| color stops | Each colour with an optional position. Positions can be percentages or lengths; omit them and the browser spaces the colours evenly. |
| radial-gradient() | Blends outward from a point. Takes a shape (circle or ellipse), a size, and an at <position> to move the centre. |
| conic-gradient() | Sweeps around a centre point like a colour wheel or pie chart, rather than outward. |
| repeating-* | Repeats the stop list end to end, which is how stripes and ray patterns are made. |
| in oklch | Optional interpolation hint. Blends through a perceptual colour space, keeping mid-tones bright instead of passing through grey. |
Notes from practice
Interpolate in oklch for vivid blends
Two saturated colours blended in sRGB often pass through a dull band in the middle. linear-gradient(in oklch, …) keeps the midpoint as bright as the ends. It is newly available across browsers, and the fallback toggle writes an sRGB version first.
Gradients are images, so they stack
background accepts a comma-separated list of layers. A soft radial highlight over a linear base reads as lighting, and costs nothing extra in requests.
Use hard stops for stripes
Give two stops the same position and the blend becomes a hard edge: linear-gradient(90deg, #000 0 50%, #fff 50% 100%). That is the whole trick behind CSS stripes and checkerboards.
CSS Gradient Generator FAQ
How do I create a CSS gradient background?
Set the background property to a gradient function, for example background: linear-gradient(135deg, #2b5fe8, #18c5b0). No image file is needed — the browser paints it, so it scales to any element size without going blurry.
What is the difference between linear, radial and conic gradients?
A linear gradient blends along a straight line at a given angle. A radial gradient blends outward from a centre point in a circle or ellipse. A conic gradient sweeps around a centre point like a pie chart, which is what makes colour wheels and progress rings possible in pure CSS.
Why does my CSS gradient look grey or muddy in the middle?
Because the default interpolation happens in sRGB, where the path between two saturated colours passes near grey. Adding an interpolation hint fixes it: linear-gradient(in oklch, #2b5fe8, #ffd24d) keeps the midpoint bright. Write a plain sRGB gradient first as a fallback for older browsers.
How do I make a gradient with sharp lines instead of a blend?
Give two consecutive colour stops the same position, so there is no distance for the browser to blend across. repeating-linear-gradient with hard stops produces stripes, and this generator's pattern presets are built that way.
Can I animate a CSS gradient?
Not directly — gradients are images and are not interpolated by default. The usual approach is to register a custom property with @property and animate that instead, which the Animated Gradient generator does for a rotating conic angle.
Related generators
- Animated Gradient (@property) — Register a custom angle with @property so the browser can animate a conic gradient, for spinning borders and fills.
- CSS Patterns — Tile dots, grids, stripes, checkers and zigzags from gradients alone, with no image files.
- Modern Color Functions — oklch(), color-mix(), relative colour syntax and light-dark(), with an sRGB hex fallback where it applies.
- Gradient Text — Fill letters with a gradient using background-clip: text, with an optional shimmer animation.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.