KOENJP

CSS Box Shadow Generator (Layered Shadows)

BOX · SHADOW

Stack, reorder and tweak multiple box-shadow layers — offset, blur, spread, color, opacity and inset — on a live card. Start from soft, neumorphism, layered or glow presets and copy CSS or a utility-class arbitrary value.

Presets

Preview

Card

Shadow layers

    Edit layer 1

    Color
    
      
    Layers are joined with commas. The top layer is drawn in front.
    
    
    

    
    Runs in your browser only. Nothing is uploaded.
    
  
    
  
    

    



    
  
    
    
    
      HOW TO
      
    How to use
    
      
      
      
    1. Pick a preset — soft, neumorphism, layered, glow and more — to start.
      2. 
      
    2. Select a layer and adjust X, Y, blur, spread, opacity, color and inset.
      3. 
      
    3. Add more layers, reorder them with the arrows or delete them, and change the background, card color and radius to preview.
      4. 
      
    4. Choose CSS or the Tailwind arbitrary value and copy the code.
      5. 
      
    
    
    
    
    
      PAIRS WELL WITH
      
    Pairs well with
    
      
    
    
  
    
  
  
    
    FAQ
    
    FAQ
    
    
    Why stack several shadows?
    Pairing a small, darker shadow with a large, blurry one creates natural-looking depth, much like real light. The Layered and Floating presets show this.
    
    
    What does the layer order do?
    In box-shadow, the first value in the comma list is painted on top. The top layer in the list is drawn in front.
    
    
    How do I make neumorphism?
    Use the same color for the background and the card, then add a dark shadow on one side and a light shadow on the other. The Neumorphism preset sets this up.
    
    
    How do I use the Tailwind output?
    It's an arbitrary value like shadow-[...], with spaces turned into underscores. Paste it straight into your class attribute.