Guides JP

Neumorphism CSS Generator

A free tool to build neumorphism (soft UI) CSS intuitively with sliders. Adjust background color, size, radius, shadow distance, blur, inset and intensity, and preview the dual light/dark box-shadow instantly. Copy the generated CSS with one click. Everything runs in your browser.

Last updated: 2026/10/16 Design Feedback & bug reports
Preview
Presets
Shape
Light source
Generated CSS

How to Use

1

Set the color and shape

Pick a base background color, then tune size and border radius. Choosing a shape (flat, concave, convex, pressed) and light source dramatically changes the look.

2

Adjust the shadow

Move the distance, blur and intensity sliders to craft the soft, extruded depth that defines neumorphism. The preview updates in real time.

3

Copy the CSS

Copy the generated border-radius, background and box-shadow code with the "Copy CSS" button and paste it straight into your stylesheet.

About the Neumorphism CSS Generator

Neumorphism (soft UI) is a design style that combines a light shadow and a dark shadow on an element that shares its background color, creating soft, extruded (or pressed-in) depth. With this tool you adjust the background color, distance, blur and intensity with sliders, and the dual light/dark box-shadow is generated automatically. Without memorizing any numbers, you can dial in the exact feel while watching a live preview. Copy the code and use it right away—and since everything runs in your browser, you can use it with peace of mind.

Features

  • Live previewThe preview and the generated CSS update instantly as you move the sliders.
  • Shape & light controlSwitch between flat, concave, convex and pressed (inset) shapes and the light source direction.
  • Built-in presetsApply classic neumorphism styles like card, button and circle in one tap.
  • One-click copyCopy the generated background and box-shadow CSS and paste it anywhere.

Use Cases

  • Build neumorphic buttons and card UIs
  • Create soft-UI toggles, switches and input fields
  • Express pressed-in elements with inset shadows
  • Add a soft texture to dashboards and app screens
  • Learn how dual light/dark box-shadow layers combine

FAQ

Is the neumorphism generator free to use?
Yes, it is completely free. No registration is required—just open it in your browser and start using it.
Why does the background color matter so much in neumorphism?
Neumorphism relies on the element and its background sharing the same color, using two shadows for depth. When you change the background color, the light and dark shadow colors are recalculated to match. In your implementation, give the element's parent the same background color.
Does it support inset (pressed) shapes?
Yes. Choosing the "Pressed (inset)" shape adds inset to the box-shadow, making the element look sunken into the background. Concave and convex add a gradient background for a curved nuance.
Is my data sent to a server?
No. All processing happens locally in your browser; nothing is ever sent to or stored on a server.
Are there any caveats when using neumorphism?
Contrast tends to be low, so it can be hard to tell that buttons are interactive. For important UI, consider raising the intensity, providing distinct focus states, and keeping accessibility in mind.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address