CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview.
Create and stack multiple CSS box-shadows with live sliders for offset, blur, spread, colour and opacity — including inset shadows. Preview your shadow on a card in light or dark, then copy ready-to-paste CSS. Perfect for cards, buttons and elevation. Runs fully in your browser — nothing is uploaded.
How to use CSS Box Shadow Generator
Start from a preset
Open this free online CSS box-shadow generator and click a curated preset like card, elevated or glow to begin from a polished shadow you can refine.
Adjust the sliders
Drag the offset-x, offset-y, blur and spread sliders for the selected layer to sculpt the drop shadow exactly how you want it in the live preview.
Pick colour and opacity
Choose a shadow colour with the picker and set its opacity so the box-shadow blends naturally with your design on light or dark backgrounds.
Stack shadow layers
Click Add layer or duplicate one to combine multiple comma-separated shadows, building realistic depth and elevation in a single box-shadow rule.
Toggle inset
Flip on the inset keyword for any layer to draw the shadow inside the box, giving it a pressed-in or recessed look instead of an outer drop shadow.
Copy the CSS
Use Copy CSS to grab the full rule or just the value, then paste the ready-made box-shadow into your stylesheet or a Tailwind arbitrary utility.
Frequently asked questions
How do I use the box-shadow generator?
Move the Offset X / Y, Blur, Spread and Opacity sliders for the selected layer and pick a colour — the preview updates live. When it looks right, copy the generated CSS (the full rule, or just the value) and paste it into your stylesheet.
What does each box-shadow value mean?
box-shadow takes: offset-x (horizontal distance, positive = right), offset-y (vertical distance, positive = down), blur-radius (higher = softer, more spread-out), spread-radius (grows or shrinks the whole shadow), and a colour. The order in CSS is: offset-x offset-y blur spread color.
What is an inset shadow?
Adding the inset keyword draws the shadow inside the element instead of outside it, which makes the box look pressed in or recessed. Toggle the Inset checkbox on the selected layer to switch between an outer drop shadow and an inner one.
How do I layer multiple shadows?
Click 'Add layer' (or duplicate an existing one) to stack shadows. Each layer becomes a comma-separated value in the same box-shadow declaration, so you can combine, say, a tight ambient shadow with a softer, larger one for realistic elevation.
Can I use this with Tailwind CSS?
Yes. Copy the value and drop it into an arbitrary shadow utility, e.g. shadow-[0px_10px_15px_-3px_rgba(0,_0,_0,_0.25)] — replace every space with an underscore. Or paste the full rule into a component class or your CSS layer.
Is anything uploaded?
No. The generator runs entirely in your browser with plain string and number maths. Nothing you create is sent to or stored on a server.
Related tools — Design · CSS generators
- CSS Border Radius Generator — Round corners and craft organic blob shapes in CSS.
- Glassmorphism & Neumorphism Generator — Generate frosted-glass and soft-UI CSS effects.
- CSS clamp() / Fluid Typography Generator — Build responsive clamp() sizes that scale without media queries.
- CSS Flexbox / Grid Playground Generator — Visually build Flexbox & CSS Grid layouts and copy the code.
- Mesh Gradient Generator — Create trendy multi-colour mesh backgrounds as pure CSS.
- Cubic-Bezier Easing Generator — Shape CSS easing curves by dragging handles, with a live preview.
- Blob & Wave SVG Generator — Generate organic blob shapes & hero-section waves as SVG.