CSS Neumorphism Generator

Soft UI 3D Plastic Look • Raised & Inset • Ready-to-Use CSS

Customize
Shadow Intensity25%
Distance8px
Blur16px
Border Radius20px
Live Preview
CSS Code

                        

                             Neumorphism works best with a muted, low-contrast base color (soft grays, pastels) — the effect relies on subtle light/dark shadow contrast, not the color itself.
                        

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Neumorphism Generator

            
Neumorphism (sometimes called "soft UI") is a design style where elements appear to be extruded from or pressed into the same surface they sit on, made of the same soft material — like buttons molded from plastic. The effect comes entirely from two shadows cast in opposite directions: a light one simulating light hitting the top-left edge, and a dark one simulating shade on the bottom-right, both derived from the same base color. This tool calculates those two shadow colors automatically from a single base color you pick, so they always stay balanced and correctly toned, then lets you fine-tune the intensity, distance, blur, and corner rounding, and switch between a raised (extruded) or inset (pressed) look. Copy the finished CSS when it looks right. All processing happens locally in your browser.