Skip to content
JustTools

CSS Neumorphism Generator

Pick a surface colour and where the light comes from, and get soft, pressed-out or pressed-in CSS shadows — with checks that people can actually see the edges, and a matching button, input and switch.

Runs in your browser Free · no sign-up

At a glance

  • Writes the two box-shadows of neumorphism — a light one towards the light and a dark one away from it — for flat, concave, convex and pressed shapes.
  • The light can come from any angle, not just the four corners; drag on the preview to move it.
  • Shadow colours are the surface colour made lighter and darker in OKLCH, so a coloured surface keeps its hue instead of turning grey or muddy.
  • Measures how visible the element’s edge is. Soft shadows alone usually reach well under the 3:1 that WCAG 2.1 (success criterion 1.4.11) asks for buttons and inputs, so one click adds a border that passes.
  • Optional button states: a pressed-in shadow while clicked, a focus ring for keyboard users, and a forced-colors border so the shape survives Windows High Contrast, which removes shadows.
  • Copy CSS, Tailwind CSS v4 classes (checked against Tailwind’s compiler) or a UI kit — card, button, round button, text field and switch — built on CSS variables.

Step by step

How to make a neumorphism effect in CSS

  1. 1

    Choose the surface colour

    Pick the colour of the page behind your element — the element uses the same colour. Light greys such as #e0e5ec give the classic look; dark surfaces work too.

  2. 2

    Choose the shape

    Flat and Convex look pressed out, Concave looks scooped, Pressed looks pushed in.

  3. 3

    Set the light

    Click a direction or drag on the preview. Then adjust Distance, Blur and Intensity — a blur about twice the distance looks softest.

  4. 4

    Check the edges

    Read the checks under the preview. Switch on Visible edge for buttons and inputs, and use the suggested text colour if yours is too faint.

  5. 5

    Copy the code

    Copy the CSS or Tailwind classes for one element, or the UI kit for a full set of controls.

Features

Everything you need, nothing you don’t

Any light direction

Choose one of eight directions or any angle from 0° to 359°. The shadows, the convex gradient and the pressed look all follow the light.

Accessible soft UI

Neumorphism is known for low contrast. The tool tells you the edge and text contrast and fixes them for you, instead of hiding the problem.

Colour that stays colour

Lighter and darker shades are worked out in OKLCH, which keeps a pink surface pink and a blue one blue — on light and dark themes alike.

A whole UI kit

See your colours on a card with a text field, buttons and a switch, then copy the kit’s CSS variables and classes to retheme everything at once.

Real button states

Press the preview to feel the pressed-in state. The CSS includes :active, :focus-visible and a smooth shadow transition.

Private and free

Everything runs in your browser with no sign-up. Your settings are remembered on this device only.

How neumorphism works

Neumorphism (new skeuomorphism, or soft UI) makes elements look moulded from the background itself. The element has the same colour as the surface behind it, and two shadows shape it: a dark one on the side away from the light and a light one on the side facing it.

In CSS that is a single box-shadow with two values, such as 16px 16px 32px #bfc3ca, -16px -16px 32px #ffffff. The word inset in front of both turns the shape into a hollow; a gradient background makes it convex or concave.

The four shapes

ShapeBackgroundShadowLooks like
Flatthe surface colouroutsidea raised, flat-topped tile
Convexgradient, light side lighteroutsidea domed button
Concavegradient, light side darkeroutsidea raised dish
Pressedthe surface colourinseta hole or a pushed-in button

Making neumorphism accessible

  • WCAG 2.1 asks for 3:1 contrast for the visual boundary of buttons, inputs and other controls (success criterion 1.4.11). Soft shadows rarely reach it, so add a border to anything people must find and use — Visible edge does this with a colour that passes.
  • Text needs 4.5:1 against the surface (3:1 for large text). Grey-on-grey text is the most common neumorphism mistake.
  • Do not rely on the pressed look alone to show that a toggle is on; add a label, an icon or a colour change.
  • Windows High Contrast mode removes box-shadows. The CSS adds a border inside @media (forced-colors: active) so every element still has an outline.
  • Keep a visible focus ring for keyboard users; the tool’s button states include one.

FAQ

Frequently asked questions

Why does neumorphism not work on a white background?

The light shadow has to be lighter than the surface, and nothing is lighter than white — so the top edge disappears. Use a light grey such as #e0e5ec or #f0f0f3 instead; the tool warns you when the surface is too light or too dark.

How do I make a neumorphic button pressed when clicked?

Give the button an inset version of its shadow in :active, for example .neu:active { box-shadow: inset 9.6px 9.6px 19.2px #bfc3ca, inset -9.6px -9.6px 19.2px #ffffff; }. With Button states on, the tool writes this for you, plus a focus ring and a smooth transition.

How do I do neumorphism in Tailwind CSS?

Use arbitrary values: a background the same as the page, such as bg-[#e0e5ec], and a shadow like shadow-[16px_16px_32px_#bfc3ca,-16px_-16px_32px_#ffffff]. The Tailwind tab gives you the exact classes for your settings, including active: and focus-visible: states.

Can neumorphism work in dark mode?

Yes. Choose a dark surface such as #2b2f36 and raise the intensity a little, because shadows show less on dark colours. Use light text and check its contrast in the panel under the preview.

Is neumorphism bad for accessibility?

It can be, because the shapes are drawn only with subtle shadows. It works when you add a visible border to controls, keep text contrast at 4.5:1 or more, and never use the pressed look as the only sign of state. The tool checks the first two for you.

What is the difference between concave and convex?

Both are raised from the surface. Convex has a gradient that is lighter on the side facing the light, so it bulges like a dome; concave has the opposite gradient, so it looks like a shallow dish.

Are my settings saved?

They are kept in this browser’s local storage so they are still there next time. Nothing is uploaded.

Keep going

Related tools

New

CSS Glassmorphism Generator

Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.

CSS ToolsOpen
New

Bento Grid Generator

Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.

CSS ToolsOpen
New

CSS to Tailwind Converter

Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.

Developer ToolsOpen
New

Image Color Picker

Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.

Image ToolsOpen
New

Scroll Animation Generator

Free scroll animation generator: fade, slide, zoom and reveal effects with CSS scroll-driven animations, parallax and progress bars, plus a Firefox fallback.

CSS ToolsOpen
Popular

Image Compressor

Compress JPG, PNG, WebP and AVIF images online for free. Shrink photos by up to 90% or hit an exact KB target — right in your browser, with no upload.

Image ToolsOpen

Browse every tool

Last updated Report a problem or suggest a feature