Super Boring Tools

Search tools

Find a tool by name or what it does.

Neumorphism Generator

Design soft neumorphic surfaces and copy the CSS box-shadow.

Preview
Adjust
Shape
CSS
border-radius: 40px;
background: #e0e0e0;
box-shadow: 18px 18px 36px #bebebe, -18px -18px 36px #e5e5e5;

How to generate neumorphism CSS

  1. Pick a color

    Choose the surface background color that the shape sits on.

  2. Shape the surface

    Adjust distance, intensity, blur, radius, and switch between flat, convex, and concave.

  3. Copy the CSS

    Copy the generated background and box-shadow rules straight into your stylesheet.

Why use this tool

Two derived shadows

The light and dark shadows are computed from your base color, so the surface always reads as one soft material.

Flat, convex, concave

Switch the surface curvature and add an inset toggle for pressed and carved looks in one click.

Live preview

Every slider updates the preview and the CSS instantly, so you shape the result by eye.

Clean, copyable CSS

Output is standard background and box-shadow declarations that drop into any stylesheet.

Runs in your browser

Colors and settings never leave your device. Nothing is uploaded.

Free and unlimited

Generate as many surfaces as you like with no account and no limits.

About this tool

Neumorphism, also called soft UI, is a style where elements look extruded from the background rather than floating above it. The effect comes from two shadows placed on opposite corners of a shape: one lighter than the background and one darker. Together they mimic a single light source hitting a soft surface, so buttons and cards appear gently raised or pressed into the page.

This generator takes a single background color and derives both shadow colors for you by lightening and darkening that base. Because both shadows share the same origin, the surface stays believable no matter which color you pick. You control the distance the shape appears to lift, the blur softness, the shadow intensity, the corner radius, and the size of the preview shape.

The shape control switches between flat, convex, and concave surfaces. Convex adds a subtle raised gradient, concave a scooped one, and flat keeps a solid fill. An inset toggle flips the shadows inward for pressed and carved states, which is handy for active buttons and input wells. Every change updates the preview and the CSS at the same time.

When the look is right, copy the background and box-shadow rules and paste them into your stylesheet. For more surface styling try the glassmorphism generator, the box shadow generator, or the CSS button generator.

Frequently asked questions

What is neumorphism?
Neumorphism is a soft UI style where shapes look extruded from the background using two opposing shadows, one lighter and one darker than the surface color.
How are the two shadow colors chosen?
They are derived from your background color. The light shadow is a lightened version and the dark shadow a darkened version, so the surface always looks like one material.
What does the inset toggle do?
Inset flips both shadows inward so the shape looks pressed into the page instead of raised. It is useful for active buttons and input fields.
Does neumorphism work on any background color?
It works best on mid-tone colors where both a lighter and a darker shadow are visible. Very light or very dark backgrounds leave one shadow hard to see.
Is my color data sent anywhere?
No. Everything runs in your browser and nothing is uploaded. Your colors and settings stay on your device.

Related tools