WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

CSS gradient generator

Design gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.

Processed 100% in your browser

Type
Shape
Color stops
Drag the handles; click the bar to add one.
Inspiration
Ctrl + Enter runCtrl + C copy result
How to use
  1. 1Choose the gradient type and adjust the angle or the center.
  2. 2Drag the stops along the bar; click the bar to add a new one.
  3. 3Select a stop to change its color or exact position.
  4. 4Copy the CSS or share a link to your gradient.
Use cases
  •  Backgrounds for hero sections, cards and buttons.
  •  Color overlays on top of images.
  •  Pie charts and color wheels with conic-gradient.
  •  Try brand color combinations before moving them to Figma or code.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
Linear runs in a straight line at an angle; radial expands from a center as a circle or ellipse; conic sweeps around a point like clock hands and is ideal for pie charts.
What does OKLCH interpolation add?
When colors are mixed in sRGB, the middle of some gradients (for example blue to yellow) turns greyish. Interpolating in OKLCH keeps the transition vivid. The CSS includes an sRGB fallback line for older browsers.
Do I need prefixes like -webkit-?
No. linear-gradient, radial-gradient and conic-gradient work without prefixes in every current browser. A solid fallback color is included too.
Can I share or save a gradient?
Yes. The settings live in the URL: copy the link with “Share” and anyone who opens it sees exactly the same gradient.
Related tools
CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.CSS Grid generatorSet columns, rows and gaps with sliders and see the result live. Copy the CSS and HTML ready to paste into your project.Glassmorphism generator (frosted glass)Design frosted-glass cards and panels and see the result instantly on different backgrounds. The generated CSS includes the -webkit- prefix Safari still needs.Image color palette extractorUpload a photo, logo or illustration and discover its main colors. Choose how many colors you want, copy each HEX with a click or the whole palette as CSS variables.