ADVERT

💡 Neumorphism Generator

Generate neumorphic soft UI effects with adjustable shadows, blur, border radius, and inset mode. Copy CSS code instantly.

Neumorphism Generator

Generate soft UI / neumorphic designs. Pick a preset or tweak background, shadow size, blur, and radius. Copy CSS instantly.

Background

Size

12px

Blur

24px

Radius

12px

Inset

background: #e0e0e0;
border-radius: 12px;
box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;

How to use this tool

Pick a preset to start from a balanced light or dark surface.
Adjust size, blur, and radius sliders until the depth matches your interface.
Copy the CSS snippet and apply it to cards, toggles, or buttons in your project.

Design notes

Use subtle color variance between the background and component for a believable extrusion.
Inset mode simulates pressed states—pair it with neutral backgrounds for tactile controls.
Keep blur proportional to size; too much blur can muddy the illusion on smaller elements.

Hand-off tips

Share both the CSS and hex background so developers reproduce the look precisely.
Consider exporting an alternative flat style for reduced-motion accessibility settings.
Combine with the Material Palette tool to ensure your shadows align with brand colors.

FAQ

Why are there two shadows?: Neumorphism relies on dual highlights and shadows to mimic light hitting the surface from opposite angles.
Can I change the shadow colors?: Yes. Swap the light and dark hex codes inside the generated CSS to match your palette.
Does this support multiple layers?: Apply the CSS to any element—nesting cards with different radii creates layered depth without extra markup.

ADVERT

More like this

Assemble responsive meta tags for viewport, Open Graph, Twitter Cards, favicons, and manifests. Copy clean HTML head snippets in seconds.

Import CSS custom properties to preview light and dark themes, tweak values live, and export polished token sets.

Generate glassmorphism CSS with background transparency, blur, border radius, and frosted glass effects. Copy CSS code instantly.

Design interactive button hover states with border wipe, glow trail, and micro-motion presets. Adjust colors, radius, timing, and copy production-ready CSS.

Experiment with flexbox layouts in real time. Adjust direction, wrapping, alignment, and gaps visually, then copy clean CSS for your own UI layouts.

Plan component-level breakpoints, preview how layouts respond to container width changes, and copy production-ready CSS container queries with matching markup.

Build fluid typography with ease. Enter min/max font sizes and viewport breakpoints to produce a precise CSS clamp() font-size formula with live preview.

Create multi-step CSS animations with translate, rotate, scale, and opacity controls. Preview the timeline and copy clean keyframe CSS.

ADVERT