Multi-layer · Neumorphism · Tailwind export

CSS Box-Shadow Generator

Build multi-layer box shadows visually with live preview. Copy plain CSS or a Tailwind arbitrary-value class instantly.

Presets
Shadow Layers
Preview Background
Box

              
            

          

        


      

    

    

    

      

        
Multi-layer CSS shadows and neumorphism made easy

        
CSS box-shadow accepts multiple comma-separated layers, which is how modern designs achieve depth. The neumorphism trend uses two shadows — one lighter and one darker than the background — to create a soft-extruded look.

        

          
🎨
Multi-layer shadows
Combine multiple shadow layers for depth. Material Design cards use a sharp shadow at 2px and a soft diffuse shadow at 8px simultaneously.

          
📋
Tailwind export
Copies as a Tailwind arbitrary value: shadow-[value]. Spaces are replaced with underscores as required by Tailwind v3+ arbitrary value syntax.

          
🧩
Neumorphism presets
The Neuo presets generate matched light and dark shadow pairs relative to your chosen background — the key technique for the soft UI aesthetic.

        

      

    

    

      

        
Frequently Asked Questions

        
What is the CSS box-shadow syntax?
box-shadow: [inset] h-offset v-offset blur spread color; Multiple shadows are comma-separated. Positive h-offset moves right, positive v-offset moves down.

        
How do I use neumorphism?
Pick a mid-tone background color, then use two shadows: one lighter than the background (offset top-left) and one darker (offset bottom-right). The presets generate this automatically.

        
How does Tailwind export work?
Tailwind v3+ supports arbitrary values like shadow-[0px_4px_6px_rgba(0,0,0,0.1)]. Spaces in the value are replaced with underscores, and commas for multi-layer shadows are replaced with ,_.