CSS Gradient Generator
Build linear or radial CSS gradients with a live preview and copy-ready code.
Quick answer: CSS Gradient Generator: build linear or radial CSS gradients with a live preview and copy-ready code. Runs entirely in your browser, free, no signup.
Last updated
Good to know
The mechanics that trip people up are direction and stop placement. In CSS a linear gradient angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg down. Radial gradients instead radiate from a center point outward, which makes them ideal for spotlights, soft vignettes and button glows where linear direction would look wrong.
Watch for the gray dead zone. Interpolating between two saturated but complementary hues — say blue to orange — routes the midpoint through a muddy gray in the default sRGB space. Nudging the stops or picking colors closer on the wheel keeps the blend lively; browsers that support in oklch interpolation produce noticeably cleaner transitions for far-apart hues.
For a smooth backdrop, keep contrast low and the angle shallow so banding stays invisible on wide screens; for a punchy accent, push the stops apart and raise the angle. Gradients are also purely decorative to assistive tech, so never rely on one to convey meaning — any text on top still has to clear the WCAG contrast threshold against the darkest part of the blend.
Pair this with a palette workflow: derive harmonious endpoints in the Color Palette Generator, then drop them in here to turn a two-color scheme into a background.
Frequently asked questions
- Is the gradient generator free?
- Yes — free with no signup.
- Linear or radial?
- Both — switch between linear and radial gradients with the type selector.
- Can I add more than two color stops?
- The current version supports two stops; the resulting CSS is easy to extend by hand if you need more.
- Does the output work everywhere?
- Yes — the syntax is plain CSS supported by every browser shipped since 2014.
- Are my colors uploaded?
- No — the preview and CSS generation run entirely in your browser.