Live Preview4 Shape TypesCopy CSSFree
border-radius: 30px;
background: #e0e0e0;
box-shadow: 10px 10px 20px #bababa, -10px -10px 20px #ffffff;

How It Works

1

Choose Color

Pick a background color. Shadow colors are calculated automatically.

2

Adjust Settings

Control distance, intensity, blur, and select a shape type.

3

Copy CSS

Click Copy to get the complete CSS for your project.

Frequently Asked Questions

What is neumorphism?
Neumorphism (soft UI) is a design style that uses subtle shadows to create elements that appear extruded from or pressed into the background.
What shapes are available?
Flat, Concave, Convex, and Pressed shapes that change how the element appears relative to the surface.
How does the color affect the result?
The background color determines the shadow colors. Lighter and darker versions of your chosen color create the 3D effect.
Is neumorphism accessible?
Use neumorphism thoughtfully as low-contrast designs can be harder for some users to perceive. Combine with clear labels.
Share:Copied!
Was this tool helpful?

Get a free API key + new tools as they ship

100 calls/day, no card, no spam. Built by one person, in public.

About Neumorphism

When you need developer and design work done in seconds, Neumorphism delivers a clean, focused interface without the friction of a generic tool. The goal was to keep the path from "open the page" to "get the result" as short as possible. No mandatory account, no cookie wall, no upsell at every step. It is one of about a hundred developer tools that share the same philosophy: do one thing, do it well, get out of your way.

When you'd reach for Neumorphism

  • You need to handle a one-off task right before a meeting and don't have time to install anything.

    Anyone working remotely on a borrowed or restricted machine.

    Open the page, get the result, paste it into your doc — under a minute.

  • You're cleaning up a folder of files that accumulated over a project and need to standardize them.

    Designers, writers, and developers wrapping up deliverables.

    Drop each file in, copy the output, move on.

  • You're on a public or shared machine and don't want to leave traces of what you're working on.

    Travelers, contractors, anyone working from a friend's computer.

    Nothing is uploaded, nothing persists if you're not signed in.

  • You're hitting the daily limit of a paid SaaS and need a backup option for a single quick job.

    Marketers and ops people whose primary tool is metered.

    Stay productive without burning credits.

Frequently asked about Neumorphism

Does Neumorphism work on mobile?
Yes, Neumorphism is fully responsive and tested on iOS Safari and Android Chrome.
Are my files uploaded to a server when I use Neumorphism?
Neumorphism processes everything in your browser using local APIs. Your files never leave your device.
What browsers does Neumorphism support?
Every modern browser released in the last three years: Chrome, Firefox, Safari, Edge, Brave, Opera.
Can I use Neumorphism commercially?
Yes. The output of Neumorphism belongs entirely to you, with no licensing restrictions.
Is Neumorphism really free?
Yes — Neumorphism is free for unlimited personal use, with no account required and no watermark on the output.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete UI/UX Design Systems Guide 2026: Tokens, Typography, Color, Components & Accessibility

30,000 words · 65 min read

Explore More