CSS Neumorphism Generator - Create Soft UI Shadows
Easily generate CSS for neumorphic (Soft UI) designs. Get a live preview, adjust size, color, distance, and blur, and copy the code for your project.
Controls
Generates a "pressed" effect on hover. Only applies to Flat/Convex shapes.
Generated CSS Code
What is Neumorphism (Soft UI)?
Neumorphism, also known as "Soft UI," is a visual design trend that emerged as a middle ground between hyper-realistic skeuomorphism (like old iOS icons) and hyper-minimalist flat design. Its defining characteristic is a soft, extruded, 3D-like appearance where UI elements look like they are part of the background, either pushed *out* or *into* the surface.
This effect is achieved by using subtle, matching-color shadows. Unlike a traditional drop shadow that's dark and fuzzy, a neumorphic element has two shadows: a light one and a dark one, creating the illusion that it's being lit from a specific angle (usually the top-left).
The Core Principles of Neumorphic Design
Achieving the neumorphic look relies on a few key rules that, when combined, create its unique aesthetic. Our generator handles all of this for you automatically.
- Monochromatic Color Scheme: The most important rule is that the element (like a button or card) must be the *same color* as the background it's sitting on.
- The Double Shadow: The 3D effect comes from two shadows:
- A light shadow (e.g., a lighter version of the background color) placed on the top and left sides.
- A dark shadow (e.g., a darker version of the background color) placed on the bottom and right sides.
- Subtlety is Key: The effect is meant to be soft and subtle. The shadows should have a significant blur and distance, and the color difference should not be extreme. Our "Intensity" slider helps you control this.
A Critical Warning: Neumorphism & Accessibility
While visually interesting, neumorphism has **severe accessibility challenges** that you must be aware of. Because the interactive elements are the same color as the background, there is very little contrast.
This makes it extremely difficult, or even impossible, for users with visual impairments to distinguish a button from the background. A user who cannot clearly see the "soft" shadows will just see a blank page.
Best Practices to Follow
- Avoid for Critical Actions: Do not use neumorphism for primary call-to-action buttons (like "Submit" or "Buy Now"). Use standard, high-contrast buttons for all essential actions.
- Use for Non-Essential Elements: This style is best reserved for decorative elements, background cards, or static containers where interaction is not the primary purpose.
- Add Other Cues: If you *must* use it for an interactive element, you must provide other visual cues, such as a high-contrast icon or text *inside* the element.
- Check Contrast: Always use a contrast checker tool to ensure your text has a `WCAG AA` or `AAA` rating against the background color.
How to Use This Generator
Our tool makes it simple to experiment with and get the code for your designs.
| Control | What it Does |
|---|---|
| Presets | Click "Light", "Dark", or "Pressed" for instant starting points. |
| Base Color | Sets the background color AND the element color. All shadow colors are derived from this. |
| Size | Controls the `width` and `height` of the preview element. |
| Border Radius | Controls the `border-radius`, or "roundness," of the element. |
| Distance | How far the shadows extend from the element. Higher values create a "taller" element. |
| Blur | How soft and diffused the shadows are. Higher values create a softer effect. |
| Intensity | Controls the opacity of the shadows, making the effect more or less pronounced. |
| Shape | Changes the `box-shadow` type. 'Flat' and 'Convex' are extruded, while 'Concave' and 'Inset' are pressed *into* the page. |
| Add :hover effect | Automatically generates the `transition` and `:hover` CSS for a "pressed" interaction. |
Best Use Cases for Neumorphism (And Where to Avoid It)
As we mentioned in the accessibility warning, neumorphism is not suitable for all elements. Its low-contrast nature makes it a poor choice for critical buttons. However, it excels in specific applications:
- Dashboards & Control Panels: It's excellent for widgets, cards, and toggles in a data dashboard or a smart home control app (like a virtual remote).
- Music Players: Neumorphic "play," "pause," and "skip" buttons are a very common and stylish use case. The "pressed" state gives a satisfying tactile feel.
- Calculators: The soft buttons of a calculator are a perfect fit for this style.
- Where to AVOID it: Never use neumorphism for primary "Call to Action" buttons on a landing page, in-text links, or essential navigation. Stick to high-contrast designs for those elements.
Neumorphism vs. Glassmorphism
You may also hear about "Glassmorphism," another popular design trend. While both create a 3D-like feel, they are very different:
- Neumorphism (Soft UI): Is about a single, solid surface. Elements are the *same color* as the background and appear to be extruded or pressed into it. It's opaque and soft.
- Glassmorphism (Frosted Glass): Is all about transparency and layers. Elements look like they are made of "frosted glass," floating *above* a colorful, blurred background. It's defined by transparency, blur, and a thin, light border.
In short: Neumorphism is like soft plastic or clay, while Glassmorphism is like frosted glass.