CSS Box-Shadow & Gradient Generator
Shape shadows and gradients with sliders, watch the preview, copy the CSS.
- Free
- No sign-up
- Runs in your browser
Updated
Presets
box-shadow: 5px 5px 15px 0px #00000040;What is it?
A CSS generator lets you design a visual effect with controls and copy the code it produces. This one builds box-shadow with as many layers as you need, each with offset, blur, spread, opacity and inset, plus linear, radial or conic gradients with two or more color stops. It previews live, outputs HEX or RGBA, and runs in your browser.
How to use
- Choose the Box Shadow or Gradient tab.
- Start from a preset, or adjust the sliders and color pickers yourself.
- For shadows, add layers with + and select a layer to edit it; for gradients, set the type, angle and color stops.
- Pick HEX or RGBA under Color Format.
- Press Copy to put the CSS on your clipboard, or Reset to start over.
Frequently asked questions
Is anything I make sent to a server?
No. The preview and CSS are generated in your browser, and the tool makes no network requests. Copy uses your browser's clipboard directly.
How do I add multiple box shadows in CSS?
Separate each shadow with a comma in one box-shadow declaration. In this tool, press + next to Shadow Layers and the output combines every layer into one rule.
Which box-shadow layer appears on top?
The first shadow in the list is painted on top and later ones sit underneath. Layer 1 in this tool is written first, so it ends up on top.
What does inset do in box-shadow?
inset draws the shadow inside the element's border instead of outside, which suits pressed buttons and inner glows. The Inner Light preset is an example.
Can I get HSL color output?
Not yet. The Color Format toggle offers HEX and RGBA only. In HEX mode a shadow with opacity below 100% is written as 8-digit hex, such as #00000040.
How do I move the center of a radial gradient?
The tool outputs radial-gradient(circle, ...), which is centered. After copying, add a position such as radial-gradient(circle at top left, ...) to move it.
What is the difference between linear, radial and conic gradients?
Linear blends colors along a straight line at an angle, radial spreads them outward from a center point, and conic sweeps them around a center like a color wheel.