CSS Gradient Generator

About Gradient Generator

Linear, radial and conic CSS gradients with two or three stops and the exact declaration ready to copy — including a solid background-color first, which is what anything that cannot paint the gradient falls back to. The preview shows the result at full width, which is where banding and muddy midpoints actually reveal themselves.

The controls follow the type, because the three gradients are steered by different things. Linear takes a direction — the eight keywords, or an angle of your own. Radial takes a shape, a size keyword deciding where the last colour lands, and a centre chosen from the nine box positions or given as lengths. Conic takes the angle it starts from and the point it spins around. Any of them can be made repeating, and stop positions can be given per colour.

The optional middle stop is what separates a good gradient from a grey one. Interpolating directly between two distant hues passes through desaturated territory; placing a deliberate stop in between keeps the transition vivid.

Where it helps

• Three gradient types with a live full-width preview.
• Produces standard CSS with no vendor prefixes needed.
• A middle stop avoids the desaturated midpoint of a two-colour blend.
• Angle and radial position are adjustable rather than fixed.

Limits

• Gradients are interpolated in sRGB, so some hue pairs pass through a dull middle regardless of the stops.
• Wide, subtle gradients band visibly on 8-bit displays; noise or a dithered overlay is the usual remedy.
• Text over a gradient has varying contrast, which the Contrast Checker cannot score in one pass.
• Conic gradients are well supported now but still worth testing on older browsers you must serve.

Frequently asked questions

Why does my gradient look muddy in the middle?

sRGB interpolation passes through a desaturated region between distant hues. Add a middle stop, or pick hues that are closer together.

What causes the visible bands?

Limited colour depth over a large area. A subtle noise overlay, or a slightly steeper gradient, hides it.

Which angle does CSS use?

0deg points upward and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom.

Can I animate a gradient?

Not the stops directly in most browsers. Animate background-position on an oversized gradient, or transition between layered backgrounds.

Related tools

• Palette Generator — Harmonious colour schemes from a base colour
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• CSS Formatter — Format stylesheets with consistent indentation
• Image Colour Picker — Pick a colour out of a picture and read it back
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it