CSS Gradient Generator
Make linear, radial and conic CSS gradients with any color stops, repeating mode and OKLCH interpolation. Live preview, 29 presets and copy-ready CSS.
CSS gradients are images the browser draws itself, so they stay sharp at any size and cost no download. This generator writes linear, radial and conic gradients from your color stops, supports repeating stripes and the newer CSS Color 4 interpolation (in oklch, in oklab) that avoids muddy gray middles, and shows a live preview rendered by your own browser from the exact CSS you copy.
How to use this tool
- Pick a preset, or keep "Custom" and type one stop per line: a color and an optional position.
- Choose linear, radial or conic, then the angle or center.
- Optionally tick "Repeating" for stripes, or pick an interpolation space.
- Copy the CSS block and paste it into your stylesheet; the preview shows exactly what it draws.
Formula
linear-gradient(<angle> [in <space>], <color> <pos>, …) · radial-gradient(<shape> at <position>, …) · conic-gradient(from <angle> at <position>, …)
Angles follow CSS: 0deg points up, 90deg right. A stop with two positions (red 10px 20px) makes a hard band. Without positions the browser spaces stops evenly.
Example
The default stops #ff7e5f 0% and #feb47b 100% at 90° give background-image: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); — coral on the left fading to peach on the right — with background-color: #ff7e5f; as the fallback line.
Frequently asked questions
Why does my blue-to-yellow gradient look gray in the middle?
Default sRGB interpolation passes through desaturated mixes. Choose "in oklab" or "in oklch" — current Chrome, Edge, Safari and Firefox support it, and the generator keeps a plain line for older browsers.
How do I make stripes?
Give each stop two positions so colors change abruptly, and tick Repeating: repeating-linear-gradient(45deg, #f1f5f9 0 10px, #e2e8f0 10px 20px).
Can I use a gradient as a text fill or border?
Yes: for text, set the gradient as background-image, then background-clip: text (add -webkit-background-clip: text for older Safari) and color: transparent; for borders, use border-image with the same gradient.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-gradient-generator/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Gradient Generator. https://kakao.mobile/tools/css-gradient-generator/
“CSS Gradient Generator.” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-gradient-generator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms