CSS Neumorphism Generator
Create soft UI (neumorphic) styles with inner and outer shadows, convex/concave shapes, and adjustable intensity.
What is Neumorphism?
Neumorphism, sometimes called Soft UI, is a design style in which interface elements appear to be gently extruded from or pressed into the surface behind them. It uses two soft shadows, one light and one dark, on top of a background that matches the element's color, so the shape reads as a subtle bump rather than a floating card.
The effect depends on the contrast between the base color and the two shadow colors. This generator derives those shadows from the base color by lightening and darkening it by 30 × intensity / 100 per RGB channel, clamped to the 0–255 range. With the default intensity of 50, that is a shift of 15 in each channel, which keeps the shadows close to the surface.
Two shape modes are available. Convex places a light shadow above-left and a dark shadow below-right so the element appears raised; concave reverses the shadows and uses inset shadows so the element appears pressed into the surface, like a button that is already held down.
The output is a single .neumorphic rule containing the box-shadow, background color, and border radius. Copy it into your stylesheet and apply the class to any element. Everything is calculated in the browser, so the preview updates instantly as you move the controls.
Key Concepts
- Soft UI — a style built from paired light and dark shadows on a matching background.
- Convex — a raised appearance with a light highlight and a dark lower-right shadow.
- Concave — a pressed appearance created with inset shadows and reversed offsets.
- Intensity — controls how far the base color is shifted; the shift is
30 × intensity / 100per channel. - Distance and blur — the shadow offset in pixels and how soft its edge appears.
- Base color — the element and background color from which both shadows are derived.
How to Use
- Choose a preset or start fresh — Load Convex, Concave, Flat, Pressed, or Rounded Soft, or leave the dropdown empty to begin from the defaults.
- Set the base color and shape — Pick the base color, then choose Convex (raised) or Concave (pressed) as the shape mode.
- Tune the shadow — Adjust intensity, shadow distance, and blur to control how strong and how soft the effect looks.
- Set the border radius — Drag the Border Radius slider to round the element from a soft square to a near-circle.
- Copy the CSS — Click Copy CSS to copy the generated
.neumorphicrule into your stylesheet.
Neumorphism Reference
| Setting | Range / Options | Default |
|---|---|---|
| Base Color | Any hex color | #e0e5ec |
| Shape | Convex / Concave | Convex |
| Intensity | 10 – 100% | 50 |
| Shadow Distance | 2 – 30 px | 10 px |
| Shadow Blur | 2 – 60 px | 20 px |
| Border Radius | 0 – 50 px | 24 px |
| Output | A .neumorphic CSS rule | — |
The default base color is #e0e5ec. The lighter and darker shadow colors are derived from it by adding and subtracting round(30 × intensity / 100) to each RGB channel, so the shadows always stay in tune with the base color you choose.
| Preset | Shape | Intensity | Distance | Blur | Radius |
|---|---|---|---|---|---|
| Convex | Convex | 50 | 10 | 20 | 24 |
| Concave | Concave | 50 | 10 | 20 | 24 |
| Flat | Convex | 20 | 4 | 8 | 16 |
| Pressed | Concave | 40 | 6 | 12 | 20 |
| Rounded Soft | Convex | 60 | 14 | 28 | 40 |
Worked Examples
- Convex default — base
#e0e5ecat intensity 50 shifts the shadows by 15 per channel, with 10px distance, 20px blur, and a 24px radius. - Flat — intensity 20 shifts the color by 6 per channel, with a 4px distance, 8px blur, and 16px radius for a very subtle lift.
- Pressed — concave mode at intensity 40 shifts by 12 per channel, with a 6px distance, 12px blur, and 20px radius, so the element looks pushed in.
- Rounded Soft — intensity 60 shifts by 18 per channel, with a 14px distance, 28px blur, and a 40px radius for a soft, pill-like shape.
- Concave — the same numbers as Convex but with inset shadows and reversed offsets, so the surface reads as a recess.
- Custom base color — choosing
#d1d9e6produces lighter and darker shadows derived from that hue at the current intensity.
Tips and Common Mistakes
- Match the element to the background — neumorphism relies on the element sharing the page background, so keep the base color and the surrounding surface the same.
- Keep contrast gentle — a low intensity reads as a soft highlight, while very high values look like harsh bevels and lose the effect.
- Do not use it for primary actions — low-contrast soft UI can hurt accessibility, so pair it with clear text, icons, or borders on interactive elements.
- Blur controls softness — a small blur with a large distance creates a hard edge, while a large blur softens the whole shape.
- Border radius above half the size — on a square element, a radius near half its width produces a rounded shape, which can look unintentional for cards.
- Test on your real background — pastel and neutral tones work best, so preview the effect on the actual page color before shipping.
Common Use Cases
Soft UI suits calm, tactile interfaces where subtle depth is welcome. These are some of the ways designers use this generator.
- Dashboard widgets — give stat cards and panels a soft, physical feel.
- Buttons and toggles — use convex for idle and concave or pressed for the active state.
- Music and media controls — style play, pause, and volume controls with rounded soft shapes.
- Form inputs — use inset shadows to suggest recessed text fields.
- Kiosk and appliance UIs — create large, tactile controls for touch screens.
- Design concepts and mockups — explore a soft, modern aesthetic before committing to a full design system.
Frequently Asked Questions
How do I use the generated CSS?
Copy the CSS code and add it to your stylesheet. Use the class .neumorphic to apply the effect to any element.
What is the difference between Convex and Concave?
Convex (raised) uses a dark shadow below-right and a light shadow above-left, making the element appear to pop out. Concave (pressed) reverses the shadows and uses inset shadows, making the element appear pressed into the surface.
What background color works best?
Neumorphism works best on pastel or neutral backgrounds such as light grays, soft blues, and warm beiges. The base color should match the page background for the illusion to work.
How are the shadow colors calculated?
Both shadows are derived from the base color. The tool adds and subtracts round(30 × intensity / 100) to each RGB channel, clamping to 0–255, to produce the light and dark shadows.
What do distance and blur control?
Distance is the pixel offset of the shadow from the element, and blur controls how soft its edge is. Small distance with large blur gives a diffuse lift; large distance with small blur gives a harder bevel.
Can I change the border radius?
Yes. The Border Radius slider ranges from 0 to 50 pixels, so you can go from a sharp square to a rounded, pill-like shape.
Does neumorphism work for dark interfaces?
Yes. Choose a dark base color and the lighter and darker shadows are derived from it, producing a soft, raised effect on a dark surface.
Is anything sent to a server?
No. The CSS is generated entirely in your browser, so your chosen colors and settings never leave your device.