Yes. Switch the type to radial and choose circle or ellipse, with up to six color stops — the live preview and CSS update instantly.
Free Design Tool — 100% In-Browser
CSS Gradient & Box-Shadow Generator
Visually build beautiful linear and radial gradients with unlimited color stops, then craft layered box-shadows with pixel-perfect control. Live preview, copy-ready CSS, zero uploads — the fastest way from idea to stylesheet.
- ✔ Linear & radial gradients
- ✔ Unlimited color stops
- ✔ Layered box-shadows
- ✔ Copy-ready CSS
- ✔ Nothing uploaded
- ✔ Free Forever
Design Gradients & Shadows Visually, Copy Perfect CSS
Gradients and shadows are the backbone of modern UI — but writing them blind means a dozen round-trips between your editor and the browser. This generator gives you a live canvas: drag stops, tweak angles, stack shadow layers, and watch the preview update instantly. When it looks right, copy the exact CSS — no guesswork, no vendor-prefix archaeology.
Everything runs locally in your browser, so your design drafts and brand colors are never uploaded anywhere.
How It Works
1. Pick a Type
Linear gradient with any angle, or radial with circle/ellipse shapes.
2. Set Your Colors
Add up to 6 color stops with precise percentage positions.
3. Preview Live
See the gradient full-size, plus the box-shadow on a real card element.
4. Copy the CSS
Copy-paste the exact declaration — with hover-variant for shadows too.
Layer up to three shadows — typical card designs use one soft ambient layer plus
one sharper contact layer. The output includes a ready-made
:hover
elevation variant.
Use a darker tone of your brand for realistic depth.
Card Preview
Need the Perfect Colors to Match?
Pick colors visually and convert between HEX, RGB, HSL and CMYK with our Color Picker & Converter — then bring them back here.
Open Color Picker →
CSS Reference
Gradient & Shadow Syntax Explained
| Syntax | What it does |
|---|---|
| linear-gradient(135deg, A, B) | A gradient flowing at 135° — top-left to bottom-right. 0deg points up, 90deg points right; the value rotates clockwise. |
| radial-gradient(circle, A, B) | A gradient radiating from the center outward. Use circle for icons and buttons, ellipse (default) for banners and hero sections. |
| color-stop % | Where each color reaches full saturation. Closer percentages make a harder edge; overlapping stops create sharp stripes. |
| box-shadow: X Y B S C | X/Y offsets move the shadow; blur softens the edge; spread grows or shrinks it; use negative spread with positive blur for realistic, tight ambient shadows. |
| inset | Draws the shadow inside the element instead of outside — the trick behind inset buttons, inputs, and "pressed" states. |
| multiple layers | Comma-separated shadows stack; earlier layers draw on top. Pros combine a small tight shadow for contact plus a large soft one for ambient depth. |
Do I still need -webkit- prefixes?
No. Unprefixed linear-gradient, radial-gradient and box-shadow are supported by every browser released since 2013, including all modern Chrome, Firefox, Safari and Edge. The CSS this tool outputs is clean, standards-only CSS.
Why does my shadow look different on a dark background?
Shadows only work by contrast. On dark backgrounds, use shadows with a higher-opacity darker color, or flip to a "glow" — a shadow with your accent color, positive spread, and large blur. Try Layer 1 with your brand color and 40px blur.
FAQsCSS Gradient & Box-Shadow Generator
Does this tool support radial gradients?
Can I create multiple stacked box-shadows?
Yes — up to three layers, each with its own offsets, blur, spread, color and inset setting. Stacking a tight shadow with a soft ambient one creates realistic depth.
Do the generated styles work in emails?
Gradients have patchy support in email clients — use the inline output with a solid background-color fallback. Box-shadows are generally stripped and should be avoided in email.