CSS Gradient Generator
Pick two colors and an angle to build a linear or radial CSS gradient with a live preview, then copy the ready-to-use background declaration.
What a CSS gradient is
A CSS gradient is an image the browser draws itself, smoothly blending between colours. Because it is an image rather than a colour, it goes in background or background-image, not background-color. It scales to any element size with no file to download, and all current browsers support the unprefixed syntax defined in CSS Images Module Level 3 (MDN: linear-gradient()). This generator builds a two-colour linear or radial gradient and writes the declaration for you.
How to use the generator
- Choose Linear or Radial under Type.
- For a linear gradient, drag the Angle slider (0–360°). The slider is hidden for radial gradients, which have no angle.
- Pick Color 1 (the start) and Color 2 (the end). The preview and the CSS box update as you go.
- Click Copy CSS and paste the line into your stylesheet.
With the default settings the output is background: linear-gradient(90deg, #4f46e5, #06b6d4);. Switching to radial gives background: radial-gradient(circle, #4f46e5, #06b6d4);.
How the angle works
The angle sets the direction the gradient travels towards, measured clockwise from “up”. Color 1 sits at the start and Color 2 at the end. We rendered red-to-blue gradients in Chromium and sampled the pixels to confirm the directions below.
| Angle | Direction | Keyword equivalent |
|---|---|---|
0deg | Bottom to top | to top |
90deg | Left to right | to right |
180deg | Top to bottom (the default when no angle is given) | to bottom |
270deg | Right to left | to left |
Diagonals are the exception. 135deg is always a 135° line, whereas to bottom right picks the angle at which the midpoint colour runs exactly from the top-right to the bottom-left corner, so its angle changes with the shape of the box. On a square box the two are identical.
Gradient syntax
linear-gradient([<angle> | to <side-or-corner>,] <color-stop>, <color-stop>[, …])
radial-gradient([<shape> <size> at <position>,] <color-stop>, <color-stop>[, …])A colour stop is a colour with an optional position, such as #a855f7 50%. For radial gradients the shape is circle or ellipse (the default, which stretches to the box), the size defaults to farthest-corner, and the position to the centre. The generator uses circle with those defaults.
Linear or radial?
Linear gradients suit page and hero backgrounds, buttons, and fades that lead the eye in one direction or darken one edge of a photo. Radial gradients suit spotlights, soft glows behind an icon, and vignettes that darken the edges of a panel. A circle keeps the same falloff in every direction; an ellipse follows the proportions of the box, which usually looks more natural on wide banners.
Going further by hand
The generator covers the common two-colour case. Each of these was checked with CSS.supports() in Chromium:
- More stops:
linear-gradient(90deg, #4f46e5, #a855f7 50%, #ec4899) - Hard edges and stripes:
linear-gradient(90deg, red 50%, blue 50%), orrepeating-linear-gradient(45deg, #e5e7eb 0 10px, #fff 10px 20px) - Off-centre glows:
radial-gradient(ellipse at top left, #4f46e5, transparent 70%) - Colour wheels and pie charts:
conic-gradient(red, yellow, lime, aqua, blue, magenta, red) - Image overlays:
background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), url(hero.jpg);darkens the top of a photo so white text stays readable. - Perceptual blending:
linear-gradient(in oklch 90deg, #0000ff, #ffff00), from CSS Color 4, in browsers that support colour interpolation methods.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| Nothing appears | The gradient was put in background-color, or the element has no height. | Use background or background-image, and give the element content or a height. |
| A grey band in the middle | Complementary colours mixed in sRGB pass through grey. Blue to yellow measured rgb(128, 128, 128) at the midpoint. | Add a middle stop, or use in oklch; the same pair then measured rgb(0, 207, 189). |
| A page gradient repeats in stripes | On body, the gradient is sized to a short root element and tiles down the window. | Add html { min-height: 100%; }, or set background-repeat: no-repeat with a background colour. |
| Visible banding | Two similar colours stretched over a large area run out of distinct 8-bit steps. | Increase the colour difference, shorten the distance, or overlay a subtle noise texture. |
| Wrong direction | Angles point towards the end colour and run clockwise from the top. | Add or subtract 180°, or swap the two colours. |
Frequently asked questions
Do I need -webkit- prefixes?
No. Unprefixed linear and radial gradients have worked in every major browser for years. Old prefixed versions also used a different angle convention, so copying them from outdated snippets can flip the direction.
How do I add a fallback colour?
Declare a solid colour first, then the gradient: background: #4f46e5; followed by the generated line. Clients that do not understand gradients, such as some email programs, keep the solid colour.
Can I animate a gradient?
Browsers generally do not transition smoothly from one gradient to another. Animate background-position on an oversized gradient instead, or register colour custom properties with @property and animate those in supporting browsers.
How do I make gradient text?
Apply the gradient as the background, then add background-clip: text and color: transparent. Many sites still include -webkit-background-clip: text as well for older browsers.
Can the generator use more than two colours?
No. Copy the result and add further stops by hand, as in the examples above.
Is anything I do here sent to a server?
No. The preview and CSS are produced by JavaScript in your browser.