Neumorphism CSS Generator

Create soft UI / neumorphic elements with live preview. Shadow colors auto-calculated from your base color.

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

Soft UI
Light shadow: #ffffff Dark shadow: #c0c0c0
Background color

Presets:

Generated CSS
Adjust controls to generate neumorphic CSS.

How to Use the Neumorphism Generator

To use the Neumorphism CSS Generator, follow these steps:

1. Pick a Base Color: Use the color picker to select your background/base color. Mid-tone, muted colors work best.

2. Choose a Shape: Select Flat, Concave, Convex, or Pressed using the chips at the top.

3. Adjust Controls: Use the sliders to control size, border radius, shadow distance, blur, and intensity.

4. Apply a Preset: Click Button, Card, Input, Toggle, or Circle to jump to common configurations.

5. Copy the CSS: Copy the generated box-shadow values for use in your project.

When to Use the Tool in Real Workflows

The Neumorphism CSS Generator is ideal for designers and developers looking to create soft, modern UI elements. It's particularly useful when you want to add a subtle, three-dimensional look to your web pages without sacrificing usability.

How It Works

The Neumorphism CSS Generator uses CSS box-shadow values to create a soft, plastic-like appearance. It calculates the light and shadow colors based on the base color you select. The intensity slider controls how pronounced the shadows are, allowing you to fine-tune the look to your liking.

Tips, Edge Cases, or Limitations

1. Accessibility: Be mindful of accessibility issues. Neumorphism can be difficult to perceive for users with low vision or contrast sensitivity disorders. Always add clear focus states with high-contrast outlines for keyboard navigation.

2. Color Selection: Choose mid-range grays and pastel tones in the lightness range of 75-90% in HSL. Highly saturated colors can produce harsh-looking shadows.

3. Browser Compatibility: Ensure your target browsers support CSS box-shadow values. Most modern browsers do, but always test your designs in multiple environments.

4. Performance: Be mindful of performance implications. Complex CSS can affect page load times, so optimize your styles for efficiency.

Frequently Asked Questions

Neumorphism is a design style that creates a soft, plastic-like appearance using carefully placed CSS box-shadow values.
Given a base hex color, the neumorphism algorithm converts it to HSL and then creates two derived colors - one with increased lightness (the highlight shadow, top-left) and one with decreased lightness (the shadow color, bottom-right).
Flat creates a raised shape with light shadow top-left and dark shadow bottom-right. Concave adds an inward gradient to the flat shape. Convex adds an outward gradient. Pressed reverses the inset shadows to simulate a button that has been pushed in.
Neumorphism has been criticized for accessibility issues. Always add clear focus states with high-contrast outlines for keyboard navigation and use additional visual indicators on interactive elements.
Mid-tone, muted colors in the lightness range of 75-90% in HSL work best. Avoid pure white or black, as they can make the shadows invisible.

Quick reference

Neumorphism CSS Generator Quick Reference
Property Description Value Example
depth Controls the intensity of the 3D effect 10-20px depth: 15px;
color-scheme Defines light and dark base colors light:#f5f5f5 dark:#d9d9d9 color-scheme: light:#f5f5f5 dark:#d9d9d9;
shadow-blur Blurs the shadow edges 20px shadow-blur: 20px;
shadow-offset Shifts the shadow position 5px 5px shadow-offset: 5px 5px;
gradient-overlay Adds a subtle color gradient linear-gradient(147deg, #e0e0e0, #c0c0c0) background: linear-gradient(147deg, #e0e0e0, #c0c0c0);
border-radius Rounds the element corners 8px-24px border-radius: 16px;

Example walk-through

Worked example: step-by-step

Step 1. Define input parameters: text content, background color, and shadow intensity. Example input:


{
  "text": "Submit",
  "background": "#f0f0f0",
  "shadow": "2px 2px 8px #d0d0d0, -2px -2px 8px #ffffff"
}

Step 2. Generate CSS code with neumorphic styling using the parameters. Example output:


.button {
  background: #f0f0f0;
  color: #333;
  padding: 12px 24px;
  border: none;
  box-shadow: 2px 2px 8px #d0d0d0, -2px -2px 8px #ffffff;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  box-shadow: 3px 3px 12px #d0d0d0, -3px -3px 12px #ffffff;
}

Step 3. Embed the CSS in an HTML document and test the visual output. Step-by-step validation ensures the shadows create the paper-like effect with subtle depth.

Step 4. Customize shadow offsets and blur values to adjust the neumorphic intensity. The generator maintains consistent lighting direction across all elements.