Lite Tools

Box Shadow Generator

Tune a two layer box shadow with a live preview and copyable CSS

Presets

Click to apply, keep fine tuning afterwards. Parameters persist on this device.

Layer one
Type
Layer two
Type
Live preview
CSS code

  






  
How to use

  
    
    
  1. Start from a preset close to your goal, then fine tune field by field.
    2. 
    
  2. Adjust layer one's offset, blur, spread, color and opacity. The preview card updates live.
    3. 
    
  3. Keep layer two enabled for depth. Both layers stay independent, and unticking returns to one.
    4. 
    
  4. Tick inset to build recessed panels and pressed effects.
    5. 
    
  5. Copy the standard box shadow declaration and paste it into any element style.
    6. 
  






  
Usage and syntax

  

    Is the generated code standard CSS?
    
Yes. The output is a plain box shadow declaration you can drop into any element or class. Modern browsers all support it without prefixes.

  

  

    What does the spread radius do?
    
Spread resizes the whole shadow before the blur applies. Positive values grow it and negative values shrink it. Big blur plus spread makes glows, while negative spread hugs the edges.

  

  

    When should I use inset shadows?
    
Inputs, pressed states and recessed panels suit inset. It flips the shadow inside the element, heavier at the top for a natural look, while outer shadows express floating.

  

  

    How do two layers stack?
    
The first declared layer paints on top. Use layer one for the tight detail shadow and layer two for the wide ambient one, joined by a comma and active at the same time.

  






  
Common questions

  

    The preview works but nothing shows on my page?
    
The usual causes are a parent with overflow hidden clipping the shadow, and no space left around the element. Add padding or remove the clip and it appears.

  

  

    Does the shadow color have to be black?
    
No. A deep gray with a hint of the page tone at lower opacity reads closer to real light. Large pure black shadows look dirty, so start near twenty percent opacity.

  

  

    Are my parameters saved?
    
Yes. Every change writes to this browser and the next visit restores them. Nothing is uploaded, and clearing site data removes them.

  

  

    Does a shadow affect layout?
    
No. Box shadows paint outside the element and take no layout space, so neighbors never reflow. Very large blurs still cost render time on weak devices.

  




          
Screenshots
Box Shadow Generator · Interface
Interface
Box Shadow Generator · Example result
Example result

          

    
How to use
  1. Start from a preset
    Six presets cover cards, overlays, glows and inset panels. Pick the closest one and fine tune from there, which saves trial and error.
  2. Tune the first layer
    Offset sets direction, blur sets softness, spread grows or shrinks the shadow, and color with opacity sets the weight.
  3. Stack the second layer
    A second layer pairs a soft ambient pass with a tight contact shadow. Both layers stay independent, and unticking returns to one.
  4. Copy the CSS
    The output builds a standard box shadow rule in real time, comma separated for two layers. Copy it into any element style to apply.

    
About this tool
Shadows are the main way interfaces express depth. Overlays, cards and pressed states all rely on them to show height. A box shadow rule combines a horizontal offset, a vertical offset, a blur radius, a spread radius, a color and the inset keyword. The first two set direction. Blur sets soft or hard edges, spread grows or shrinks the whole shadow, and inset flips it to the inside. Any color works, and lowering opacity usually looks more natural than pure black, a detail beginners often miss.
This tool splits two shadow layers into independent controls. Sliders and color pickers update the preview card as you drag. Six presets cover common pairings and stay editable afterwards, with the matching one highlighted. The output builds a standard box shadow declaration, comma separated across lines when both layers are on, ready to copy and paste. Everything renders locally in the browser, parameters persist on this device, and the next visit picks up where you stopped.

    
How it works
Box shadows do not take layout space. They paint outside the border box, or inside it with inset, and they follow the element's rounded corners. The first declared layer paints on top, and further layers stack below. The blur radius is twice the standard deviation of the blur, and spread resizes the shadow before the blur applies. Negative offsets move the shadow the other way. Knowing the declaration order and the clipping rules explains most cases where a shadow seems missing. The cause is usually a clipped parent rather than wrong syntax. 
From a design view, natural light usually needs two passes. A tight layer hugs the edge like ambient occlusion, and a wide faint layer plays the cast shadow. A deep gray with a slight blue lean beats pure black on light backgrounds. Dark interfaces get little from shadows, so brighter borders or background lightness carry the hierarchy instead. Very large low opacity blurs cost render time on weak devices. Animating shadow values directly can drop frames, so prefer opacity transitions for motion.

    
When to use it
  1. Cards and overlays
    List cards stay light with a small offset and low opacity. Dialogs and menus get a larger offset and blur to float. Keep two or three elevation levels across a product, and the shadow depth itself tells users which interactions weigh more.
  2. Pressed button states
    On press, shrink the shadow and nudge the element down a pixel or two to sell the push, then restore on release. The eye reads the change as depth, not as decoration. Adding a subtle inset shadow imitates a physical key sinking in, giving clear feedback without noise.
  3. Inset inputs
    Form fields with an inset shadow and a light border read as recessed containers. A heavier shadow at the top edge and a lighter one below matches how light falls. Switching the border color on focus makes the state change obvious.

    
Tips & tricks
  • Skip pure black. A dark gray with a hint of the page tone at lower opacity reads more natural.
  • Pair two layers on cards: a tight one near the edge plus a wide, faint one for depth.
  • Leave room for the shadow, since a parent with overflow hidden will clip it away.

    
Things to watch
  • Clipped by a parent
    A parent with overflow hidden clips the child's shadow, which looks like the style never applied. List containers trigger this most often. Give the parent padding or move the element into an unclipped container so the shadow has room to paint.
  • Too heavy a shadow
    A large opaque black shadow makes pages look dirty and crushes the content hierarchy, so users read the interface as heavy. Drop opacity below twenty percent and recheck the result. Most cards never need more than forty, and lighter almost always wins.
  • Overusing blur
    Hundred pixel blurs on small widgets look smudged and cost render time, and weak devices can drop frames while scrolling. Match the shadow scale to the element. Small radii suit small parts, and only large panels deserve the big radii.

  

          
Related Tools