How do I make a pressed neumorphic button in CSS?

Choose Pressed. Both shadows become inset, so at the defaults the code reads box-shadow: inset 20px 20px 40px #babfc6, inset -20px -20px 40px #ffffff; on the plain #e0e5ec background. Put the flat shadow on the button and the pressed one on its :active state to get the push-in effect.

Does the copied CSS set the width of my button or card?

No. The code is border-radius, background and box-shadow only, the same for Box, Button, Card and Input. Set width, height and padding in your own rule.

What is the difference between convex and concave?

Both keep the raised shadows of flat and replace the plain background with a 145 degree gradient. Convex runs from 5% lighter at the top left, the side the light comes from, to 5% darker at the bottom right, so the surface looks domed; concave runs the other way and looks dished. At #e0e5ec convex is linear-gradient(145deg, #edf2f9, #d3d8df) and concave linear-gradient(145deg, #d3d8df, #edf2f9).

Is neumorphism accessible?

It is a known weak point: the element and its background share a color, so the edge has little contrast, and critics have said so since it appeared. WCAG 2.2 success criterion 1.4.11 (Non-text Contrast, level AA) asks 3:1 against adjacent colors for what identifies a control. The tool shows the contrast of the dark and the light shade against your surface and warns below 3:1; the default #e0e5ec at 15% gives 1.4:1 and 1.2:1. Raising the intensity helps only so far on a light surface, so give real controls a border or a visible focus ring.

Why is my radius smaller than I set?

The radius cannot be more than half the size. The preview and the code use the capped value, and the radius label shows it.

Are my saved presets kept?

Yes. Presets you save are stored in this browser and load when the page opens. The eight built-in presets are always there, and entries that are damaged are dropped.

CSS Neumorphism Generator

Make soft UI (neumorphism) shadows from one surface color: pick flat, convex, concave or pressed, set distance, blur and light, then copy CSS, SCSS or Tailwind. How it works

Preview Element

Color#e0e5ec

Shape

Light source

The light shadow falls towards the light, the dark shadow away from it.

Ambient Shadow

Size (200px)

Radius (30px)

Distance (20px)

Intensity (15%)

Blur (40px)

Presets:

About the CSS Neumorphism Generator

A neumorphic element is the same color as the surface behind it and gets its depth from two shadows: a dark one down and to the right, a light one up and to the left. The default flat shape at #e0e5ec with 15% intensity copies as border-radius: 30px; background: #e0e5ec; box-shadow: 20px 20px 40px #babfc6, -20px -20px 40px #ffffff;

How to use this tool

Pick the surface color, and give the page behind the element the same color.
Choose flat, convex, concave or pressed, and the corner the light comes from (top left to start). Box, Button, Card and Input change only the preview, not the code.
Set radius, distance (5 to 50 px), intensity (1% to 60%) and blur (0 to 200 px). Size (50 to 400 px) is for the preview and caps the radius at half its value. Ambient Shadow adds a third, darker shadow all round.
Read the edge contrast line, then choose Raw CSS, CSS Vars, SCSS or Tailwind and copy the code. Save the settings as a preset to reuse them; a preset keeps the light source.

Frequently asked questions

How do I make a pressed neumorphic button in CSS?: Choose Pressed. Both shadows become inset, so at the defaults the code reads box-shadow: inset 20px 20px 40px #babfc6, inset -20px -20px 40px #ffffff; on the plain #e0e5ec background. Put the flat shadow on the button and the pressed one on its :active state to get the push-in effect.
Does the copied CSS set the width of my button or card?: No. The code is border-radius, background and box-shadow only, the same for Box, Button, Card and Input. Set width, height and padding in your own rule.
What is the difference between convex and concave?: Both keep the raised shadows of flat and replace the plain background with a 145 degree gradient. Convex runs from 5% lighter at the top left, the side the light comes from, to 5% darker at the bottom right, so the surface looks domed; concave runs the other way and looks dished. At #e0e5ec convex is linear-gradient(145deg, #edf2f9, #d3d8df) and concave linear-gradient(145deg, #d3d8df, #edf2f9).
Is neumorphism accessible?: It is a known weak point: the element and its background share a color, so the edge has little contrast, and critics have said so since it appeared. WCAG 2.2 success criterion 1.4.11 (Non-text Contrast, level AA) asks 3:1 against adjacent colors for what identifies a control. The tool shows the contrast of the dark and the light shade against your surface and warns below 3:1; the default #e0e5ec at 15% gives 1.4:1 and 1.2:1. Raising the intensity helps only so far on a light surface, so give real controls a border or a visible focus ring.
Why is my radius smaller than I set?: The radius cannot be more than half the size. The preview and the code use the capped value, and the radius label shows it.
Are my saved presets kept?: Yes. Presets you save are stored in this browser and load when the page opens. The eight built-in presets are always there, and entries that are damaged are dropped.

Shapes, formats and what the code leaves out

Soft UI suits a music player, a smart-home panel or settings screen where every control sits on one light gray or pastel surface. Pick that surface color and choose a shape:

Flat: plain background, raised shadows.
Convex and Concave: raised shadows with a 145° gradient background, in opposite directions.
Pressed: plain background with both shadows inset, for a key that is held down or a text field.

The Size slider and the Box, Button, Card or Input choice only change the preview. Raw CSS is three lines, border-radius, background and box-shadow, so width, height and padding stay in your own rule. CSS Vars puts the color, radius, distance, blur and both shades in --nm-* custom properties, SCSS writes $nm-* variables and a neumorphic mixin, and Tailwind writes one div with arbitrary-value classes such as shadow-[20px_20px_40px_#babfc6,-20px_-20px_40px_#ffffff]. Eight presets, such as Soft Button and Pressed Key, are a starting point, and presets you save stay in this browser.

How the shadows are worked out

The generator makes a dark and a light shade from your color by moving every red, green and blue channel by round(2.55 × intensity) and stopping at 0 or 255. At the default color #e0e5ec and 15% intensity that is 38 per channel, so the dark shade is #babfc6 and the light shade reaches the ceiling at #ffffff. The dark shadow goes down and to the right by the distance, the light one up and to the left:

box-shadow: 20px 20px 40px #babfc6, -20px -20px 40px #ffffff;

Light source moves the light to another corner: from the top right the shadows become -20px 20px 40px #babfc6, 20px -20px 40px #ffffff, and a convex gradient turns from 145° to 215°.

The radius cannot exceed half the size, and the output shows the capped value. Text on the preview switches between black and white by WCAG contrast. Each shade is checked against the surface, with a warning below 3:1 (WCAG 2.2 SC 1.4.11); the default gives 1.4:1 and 1.2:1.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.