Why does neumorphism need two shadows instead of one?

The soft-UI effect relies on a light shadow on one side and a dark shadow on the other, simulating a light source and giving the embossed, "pressed into the surface" look.

Does neumorphism work well with any background color?

It works best on a background color close to the element's own color, since the effect relies on subtle light/dark shadow contrast against a similar base tone.

Can I preview the effect before copying the CSS?

Yes, you see a live preview as you adjust the shadow settings.

Does Neumorphism Generator upload my files to a server?

No. Neumorphism Generator runs entirely in your browser using on-device processing, your files never leave your device.

Neumorphism Generator

Design a soft-UI neumorphic CSS shadow effect and copy the code.

Runs in your browser

Base colorDistance

Blur

background: #e0e0e0;
box-shadow: 10px 10px 20px #c2c2c2,
            -10px -10px 20px #fefefe;
border-radius: 20px;

About this tool

Soft-UI neumorphic shadows — the subtle, embossed-looking effect popular in some UI design — rely on carefully balanced light and dark shadow pairs that are genuinely hard to get right without seeing the live result. This tool lets you design a neumorphic shadow effect visually and copy the generated CSS, letting you dial in the subtle balance visually instead of guessing at shadow values.

Frequently asked questions

Glassmorphism Generator

Design a frosted-glass CSS card effect and copy the code.

CSS Box Shadow Generator

Design a CSS box-shadow visually and copy the code.

File Converter

Convert data files between CSV, JSON and TSV.

Hot

JSON Formatter

Format, validate and minify JSON.

Base64 Converter

Encode or decode text and files as Base64.

Base32 Encoder/Decoder

Encode or decode text as Base32.

ULID Generator

Generate sortable, timestamp-based ULIDs.

Semver Parser/Comparator

Parse and compare two semantic version numbers.

.env File Parser/Validator

Parse a .env file and flag duplicate keys, missing values and invalid names.

Markdown Table Generator

Build a Markdown table with a spreadsheet-style editor.

CSS Grid Generator

Visually build a CSS Grid layout and copy the code.

CSS Flexbox Generator

Visually build a CSS Flexbox layout and copy the code.

PDF Tools

Merge, split, compress and convert PDF files.

Image Tools

Compress, resize, crop and convert images.

Link & QR Tools

Shorten links and generate QR codes and barcodes.

Audio Tools

Convert audio files and turn text into speech, or speech into text.

Video Tools

Compress and process video files, right in your browser.

SEO & Web Tools

Meta tags, sitemaps, schema markup and other on-page SEO utilities.

Data & Spreadsheet Tools

Clean, convert and inspect CSV, TSV and tabular data.

File Tools

Archive, inspect and convert files, right in your browser.

Business Tools

Invoices, quotations, receipts and other business documents.

Social Media Tools

Resize images for social platforms, count hashtags and preview posts.