CSS Neumorphism Generator

Create CSS neumorphism (soft UI) effects with dual shadows that make elements appear raised or pressed into the background — with live preview and copy-ready CSS.

10px
20px
16px
Generated CSS

        

        
      

      

      

        
What Does This Tool Do?

        
Generate CSS neumorphism (soft UI) effects in flat, concave, convex and pressed styles. The dual-shadow technique creates the illusion of elements raised from or pushed into the background.

      

      

        
Key Features

        

    
🎨
4 Types
Flat, concave, convex and pressed (inset).

    
🎛️
Full Control
Shadow distance, blur and border radius sliders.

    
👁️
Live Preview
See the exact effect on matching background.

    
📋
Copy CSS
Complete box-shadow CSS ready to paste.

        

      

      

        
How to Use

        
  1. Pick your background color (neumorphism works best with mid-tone colors).
  2. Select the effect type — flat, concave, convex or pressed.
  3. Adjust shadow distance and blur.
  4. Copy the CSS.

      

      

        
Frequently Asked Questions

        

  
What is neumorphism?▾
A design style that uses dual box-shadows (one dark, one light) to make elements appear to be extruded from or pressed into the background. Also called Soft UI.

  
What colors work best for neumorphism?▾
Mid-tone flat colors (not too dark, not too white) work best — like light grey (#e0e5ec), warm beige or pale pastels. Pure white or black do not work well.

  
What is the difference between flat and pressed?▾
Flat uses outset shadows to make the element appear raised. Pressed uses inset shadows (box-shadow: inset ...) to make it appear pushed down.