Skip to content

CSS Neumorphism Generator

Generate soft neumorphism box-shadow CSS for modern UI designs

Updated

What is the CSS Neumorphism Generator?

Neumorphism is a modern design trend that combines skeuomorphism and flat design to create soft, extruded UI elements that appear to be part of the background. This tool helps you generate custom CSS box-shadows for neumorphic effects—perfect for buttons, cards, panels, and other UI components.

With the CSS Neumorphism Generator, you can:

  • Create raised, pressed, or flat neumorphic effects.
  • Customize colors, blur, distance, size, and border radius.
  • Preview your design in real-time.
  • Copy CSS classes or inline styles for immediate use in your projects.

Whether you're building a dashboard, a landing page, or a mobile app, this tool ensures your neumorphic designs are pixel-perfect and production-ready.

How it works

The CSS Neumorphism Generator simplifies the process of creating neumorphic designs by automating the generation of complex box-shadow CSS properties. Here’s how it works:

1. Select Your Colors

Choose the base color (background), light color (highlight), and dark color (shadow) using the color pickers. These colors define the neumorphic effect’s appearance.

2. Adjust the Parameters

Fine-tune your design with the following controls:

  • Size: Sets the width and height of the preview element.
  • Blur: Controls the softness of the shadow edges.
  • Distance: Determines how far the shadows are offset from the element.
  • Border Radius: Rounds the corners of the element for a softer look.

3. Choose a Style

Select one of three neumorphic styles:

  • Raised: Creates a 3D effect where the element appears to pop out of the screen.
  • Pressed: Simulates a pressed or inset look, as if the element is embedded into the background.
  • Flat: Combines both light and dark shadows for a balanced, subtle effect.

4. Preview and Copy

  • The live preview updates as you adjust the settings, so you can see the effect instantly.
  • Once satisfied, copy the generated CSS class or inline style to use in your project.

Examples

Raised Neumorphism Button

Generate a raised neumorphism effect for a button with custom colors and shadow settings

Base Color: #e0e0e0, Light Color: #ffffff, Dark Color: #a0a0a0, Size: 200px, Blur: 20px, Distance: 10px, Border Radius: 20px, Style: Raised
 
.neumorphism-box { width: 200px; height: 200px; background-color: rgb(224, 224, 224); border-radius: 20px; box-shadow: 10px 10px 20px rgb(255, 255, 255), -10px -10px 20px rgb(160, 160, 160); }

Pressed Neumorphism Card

Create a pressed neumorphism effect for a card component

Base Color: #f0f0f0, Light Color: #ffffff, Dark Color: #b0b0b0, Size: 300px, Blur: 15px, Distance: 8px, Border Radius: 15px, Style: Pressed
 
.neumorphism-box { width: 300px; height: 300px; background-color: rgb(240, 240, 240); border-radius: 15px; box-shadow: inset 8px 8px 15px rgb(255, 255, 255), inset -8px -8px 15px rgb(176, 176, 176); }

Flat Neumorphism Panel

Generate a flat neumorphism effect for a panel with subtle shadows

Base Color: #e8e8e8, Light Color: #ffffff, Dark Color: #9e9e9e, Size: 250px, Blur: 10px, Distance: 5px, Border Radius: 10px, Style: Flat
 
.neumorphism-box { width: 250px; height: 250px; background-color: rgb(232, 232, 232); border-radius: 10px; box-shadow: inset 5px 5px 10px rgb(255, 255, 255), inset -5px -5px 10px rgb(158, 158, 158); }

Frequently asked questions

What is neumorphism in web design?

Neumorphism is a design style that uses subtle shadows and highlights to create the illusion of 3D elements on a flat surface. It’s a blend of skeuomorphism (realistic textures) and flat design (minimalism), resulting in soft, extruded UI components that appear to be part of the background.

How do I use the generated CSS in my project?

Copy the generated CSS class or inline style from the tool and paste it into your stylesheet or HTML element. For example:

  • CSS Class: Add the .neumorphism-box class to your HTML element.
  • Inline Style: Apply the style attribute directly to your element, e.g., <div style="width: 200px; height: 200px; background-color: rgb(224, 224, 224); border-radius: 20px; box-shadow: 10px 10px 20px rgb(255, 255, 255), -10px -10px 20px rgb(160, 160, 160);"></div>.

Can I customize the colors for my neumorphic design?

Yes! The tool allows you to customize the base color, light color, and dark color using color pickers. These colors determine the appearance of the shadows and highlights, so you can match your design to your project’s color scheme.

What’s the difference between raised, pressed, and flat neumorphism?

  • Raised: The element appears to float above the background, using outer shadows (light on the bottom-right, dark on the top-left).
  • Pressed: The element looks like it’s pushed into the background, using inner shadows (light on the top-left, dark on the bottom-right).
  • Flat: Combines both inner and outer shadows for a balanced, subtle 3D effect.

Why are my shadows not visible?

If your shadows aren’t visible, check the following:

  • Ensure the base color, light color, and dark color have sufficient contrast.
  • Increase the distance or blur values to make the shadows more pronounced.
  • Verify that the size of the element is large enough to display the shadows.

Is the generated CSS responsive?

The generated CSS is static and does not include responsive breakpoints. To make your neumorphic elements responsive, wrap them in a container with relative units (e.g., %, vw, vh) or use CSS media queries to adjust the box-shadow properties for different screen sizes.

Can I use this tool for commercial projects?

Yes! The CSS Neumorphism Generator is designed for both personal and commercial use. The generated CSS is yours to use freely in any project, including websites, apps, or design systems.

Related tools

More utilities you might find handy.

CSS

Box Model Visualizer

Interactive CSS box model visualizer with real-time editing of margin, border, padding, and content dimensions
CSS

CSS Animation Generator

Generate CSS keyframe animation code
CSS

CSS Button Generator

Design and generate custom CSS button styles with live preview and instant code export.