A soft drop shadow with a subtle colored glow
Layer 1: 0px 4px 12px rgba(0,0,0,0.25) · Layer 2: 0px 0px 24px rgba(99,102,241,0.3)
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25), 0px 0px 24px 0px rgba(99,102,241,0.3);
CSS Gradient & Shadow Generator
Build a linear or radial gradient, or a multi-layer box-shadow, with a live preview and copyable CSS.
90°
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Was this tool useful?
About this tool
Gradient and box-shadow syntax is easy to get almost right and tedious to fine-tune by editing numbers and re-checking a browser — this puts a live preview next to every control, so the CSS is right before it's copied anywhere.
How to use it
- Gradient tab: pick linear or radial, adjust the angle (for linear) and add, remove or reposition color stops.
- Shadow tab: adjust each layer's offset, blur, spread and color, and stack multiple layers for a richer shadow.
- Copy the generated CSS from either tab.
Examples
Common problems
- A radial gradient doesn't look centered the way it does elsewhere.
- This generates a simple circular radial gradient from the element's center — CSS radial-gradient supports far more shape and position options (ellipse, an offset center, explicit sizing) than this tool's UI exposes; for those, hand-edit the generated CSS.