CSS gradient generator
Choose the type of gradient, its direction and the colors. Set each color stop with a color picker and slider, and add more with “+ Color stop”. The generator writes the gradient in concise, valid CSS and adds a solid fallback background-color so text stays readable even without the gradient.
How it is calculated
Three kinds of gradients
| Function | Gradient | Default (omitted) |
|---|---|---|
linear-gradient() | along a straight line at the chosen angle | 180deg = top to bottom |
radial-gradient() | from the center outward | ellipse, centered, to the farthest corner |
conic-gradient() | around the center, like a pie chart | from 0deg (top), clockwise |
For a linear gradient, the angle sets the direction: 0deg points up, 90deg to the right, 180deg down. “Repeat” produces repeating-linear-gradient() and friends: the pattern between the first and last stop repeats – perfect for stripes.
Color stops and missing positions
Positions are optional. When they are missing, the W3C specification (CSS Images, “Coloring the Gradient Line”) applies: the first stop sits at 0%, the last at 100%, and stops without a position in between are spread evenly. If a position is smaller than an earlier one, it is raised to match – that is how hard edges are made. Two positions in a row (red 0% 50%) create a solid band. The table shows the position the browser actually uses for each stop.
Why a fallback color?
Gradients are images. If the image is not drawn – in forced-colors mode, say, or because of a typo in the value – only background-color remains. The generator uses the area-weighted average of the colors for it.
Example linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): each color covers half the line. Red (59 + 147) ÷ 2 = 103, green (130 + 51) ÷ 2 = 90.5 ≈ 91, blue (246 + 234) ÷ 2 = 240 – fallback #675BF0. Check the contrast of your text against this color and against the lightest and darkest parts of the gradient.
Frequently asked questions
How do I create a gradient in CSS?
Use background-image: linear-gradient(90deg, #3B82F6, #9333EA); – or the background shorthand. Put a background-color before it as a fallback. The generator gives you both lines ready to copy.
How do I get hard edges instead of smooth transitions?
Give two stops the same position, e.g. red 50%, blue 50%, or give one color two positions: red 0% 50%, blue 50% 100%. Turn on “Repeat” to make stripes.
Does conic-gradient work in every browser?
In all current browsers, yes (Chrome and Edge since version 69, Firefox since 83, Safari since 12.1). For very old browsers, the fallback color keeps the area from going blank.
Can I use transparent colors?
Yes. Enter a stop as rgba() or an 8-digit HEX value, e.g. rgba(0, 0, 0, 0.5). The preview shows transparency over a checkerboard. The fallback color is always solid.
Sources and legal basis
- css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
- css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
- css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
- css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
- MDN Web Docs – linear-gradient()
- MDN Web Docs – radial-gradient()
- MDN Web Docs – conic-gradient()
As of:
Related tools
- CSS box shadow generatorBuild CSS box shadows with sliders: multiple layers, offset, blur, spread, color with alpha, inset and presets – live preview and one-click copy of the CSS.
- CSS border radius generatorRound corners with sliders: all corners linked or each on its own, px or %, elliptical 8-value syntax – shortest CSS shorthand, live preview and copy button.
- Color palette generatorBuild matching colors from one base color: complementary, analogous, triadic, square, split-complementary or monochrome – with HEX, RGB and HSL values.
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Aspect Ratio CalculatorCalculate the aspect ratio from width and height (1920 × 1080 = 16:9), find the missing side, decimal value, nearest standard ratio and CSS aspect-ratio.
- Base64 Encode and DecodeEncode and decode Base64 and Base64url with proper UTF-8, plus URL encode/decode (percent-encoding). Clear error messages, runs locally in your browser.