Neumorphism Generator

Build neumorphism UI card, tune all values and export ready-to-use CSS, SCSS and Tailwind.

Calendar

Today

1.neo-card {
2  background: #e2e8f0;
3  border-radius: 24px;
4  box-shadow: -12px -12px 28px rgba(255, 255, 255, 0.51), 12px 12px 28px rgba(148, 163, 184, 0.27);
5  padding: 18px;
6  border: 1.5px solid #cbd5e1;
7}

Background

Surface

Light Shadow

Dark Shadow

Border

Radius24px

Padding18px

Distance12px

Blur28px

How it works

Set base color, light and dark shadows, depth, radius, and spacing. The preview updates instantly and the export section gives production-ready snippets for CSS, SCSS, and Tailwind workflows.

Keep exploring

Color Generator to create consistent brand color scales.
JSON Formatter to validate and prettify raw API payloads.
Fake REST API to prototype frontend flows with realistic mock endpoints.