DevToolPal
EN

CSS Box Shadow Generator

Design CSS box shadows visually: stack several layers, set offset, blur, spread, color and inset, see a live preview, start from presets and copy the CSS.

Runs locally, never uploaded

Shadow layers

No shadow. Add a layer or pick a preset.

Preview

Box color
Background

CSS

Presets
Box shadow CSS
 
 
 
 
 
What it does


The box shadow generator lets you design CSS shadows by eye and copy the finished box-shadow declaration. Stack as many layers as you need, set each layer’s offset, blur, spread, color and opacity, switch it to an inner shadow, and the preview updates instantly. You can also paste an existing box-shadow value to edit it visually. Everything runs in your browser.


How to use


    

  1. Start from a preset or keep the sample shadow.
    2. 

  2. Pick a layer with the Layer buttons, or + Add layer to stack another one on top.
    3. 

  3. Drag Horizontal offset, Vertical offset, Blur and Spread, choose a Color and lower the Opacity for a softer look. Turn on Inset for an inner shadow.
    4. 

  4. Adjust the Box color, Background and Corner radius of the preview to match your page. These only affect the preview.
    5. 

  5. Copy the code from the CSS card.
    6. 



The Box shadow CSS box at the bottom is editable: paste a shadow from your stylesheet or design tool and the controls pick it up. Lengths in rem or em are converted to px at 16px.


Example


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Tips for natural shadows


    

  • Use low opacity. Shadows of 5–25% black look realistic; solid dark shadows look heavy.
    • 

  • Negative spread keeps a large blur from spilling out at the sides, which is the trick behind most “card” shadows.
    • 

  • Tint the shadow. A shadow with a little of the background or brand hue looks richer than pure grey.
    • 

  • Light from one side. Keep the vertical offset positive on every layer so all shadows agree on where the light comes from.
    • 

  • Performance. Large blurs on many elements can slow scrolling on low-end phones; animate opacity or transform instead of the shadow itself.
    • 

 
  
 
FAQ
 
 
  › What do the four numbers in box-shadow mean?  
In order: horizontal offset, vertical offset, blur radius and spread radius. Positive offsets move the shadow right and down. Blur softens the edge and cannot be negative. Spread grows the shadow (positive) or shrinks it (negative) before the blur is applied.
 
  › Why use several shadow layers?  
Real shadows are soft near the object and fade far away. Stacking two or more layers, for example a small sharp one and a large soft one, looks far more natural than a single dark blur. That is how most design systems build their elevation levels.
 
  › What does inset do?  
inset draws the shadow inside the box instead of outside, as if the element were pressed in. It is used for input fields, pressed buttons and inner glows. You can mix inset and outer layers in one box-shadow.
 
  › Does box-shadow follow border-radius?  
Yes. The shadow takes the shape of the element, including rounded corners, so the preview uses the corner radius you set. It does not follow transparent parts of an image; for that use the CSS filter drop-shadow().