CSS Neumorphism Generator
Create soft, extruded shapes that appear to rise from the page or sink into it. Pick a surface colour and the generator calculates the matching highlight and shadow; adjust distance, blur, intensity and the direction of the light.
- Runs in your browser
- No sign-up
- Free to use
Surface
Light and shadow
Preview box
How to use CSS Neumorphism Generator
- Choose the surface colour; the page background must be the same colour.
- Pick a shape: raised, pressed, concave or convex.
- Adjust distance, blur and intensity, and choose where the light comes from.
- Copy the CSS, and set the same background colour on the parent element.
CSS Neumorphism Generator features
Automatic highlight and shadow
A lighter and a darker shade are derived from your surface colour.
Four shapes
Flat raised, pressed inward, concave and convex surfaces.
Light direction
Move the light source to any corner; both shadows follow.
Fine control
Distance, blur and intensity to go from barely visible to pronounced.
Matching preview
The preview background takes the surface colour, as the effect requires.
Helpful warnings
Tells you when a colour is too light or too dark for the effect to show.
When to use CSS Neumorphism Generator
- Cards, toggles and buttons in a soft UI design.
- Pressed states for neumorphic buttons and input fields.
- Music players, calculators and other skeuomorphic-style controls.
- Experimenting with the style before committing a design to it.
CSS Neumorphism Generator FAQ
What is neumorphism?
A design style, also called soft UI, in which elements look as if they were moulded from the same material as the background. Instead of a border or a contrasting fill, a shape is defined by a light shadow on one side and a dark shadow on the other, as though lit from a corner.
Why must the background match the element?
The illusion depends on the element and its surroundings being one surface. The highlight is a lighter version of that colour and the shadow a darker one. On a different background, the two shadows look like a blurry outline and the effect falls apart.
How are the two shadows built?
Two box-shadows with opposite offsets. The dark one is displaced away from the light source and the light one towards it, both with the same blur. For a pressed shape, the same pair is drawn inside the element with the inset keyword.
Which colours work best?
Mid-light, slightly tinted neutrals such as a cool light grey. Pure white leaves no room for a highlight, and pure black hides the shadow. Saturated colours work if the page uses the same colour as its background.
Is neumorphism accessible?
It is the style's main weakness. Edges defined only by soft shadows have very low contrast, so people with low vision may not see where a control begins. Use strong text and icon contrast, add clear focus indicators, and do not rely on the shadow alone to show state.
What is the difference between concave and convex?
Both add a subtle gradient across the surface. Convex is lighter towards the light, making the shape look domed. Concave reverses the gradient, so the surface looks dished.
How soft UI creates depth
Neumorphism borrows from the physical world more literally than flat design does. Imagine a sheet of soft plastic with a button pushed up from behind. Light from the upper left brightens the upper-left edge of the bump and leaves the lower-right edge in shadow. Reproducing those two edges with CSS shadows, and nothing else, is the whole technique. There is no border and no change of colour, which gives the style its calm, uniform look.
The relationship between the three colours is what makes or breaks the effect. The highlight and the shadow must be the same hue as the surface, only lighter and darker. This generator derives both from the colour you choose and lets you set how far they deviate with the intensity control. Distance and blur should grow together. A small offset with a large blur looks misty, a large offset with little blur looks like two hard copies of the shape.
A pressed state is the natural counterpart to a raised one. Swapping the outer shadows for inset shadows makes the same shape appear to sink, which gives buttons and toggles an intuitive on and off appearance without any colour change. Designers often combine a raised resting state with a pressed active state.
The style has clear limits, and it is worth being honest about them. Low contrast is inherent, so it suits small, focused interfaces, a player, a dashboard widget, a settings panel, more than content-heavy pages. It is best combined with strong typography, clear icons and at least one accent colour for the elements that must stand out.