Neumorphism Generator
Create soft, extruded UI elements with realistic lighting. Design buttons, cards, inputs, and toggles with adjustable depth, light direction, and shape. Export as CSS, Tailwind, or SCSS with hover and active states.
How it works
Features
| Shortcut | Action |
|---|---|
| 1-5 | Switch element type (Box, Button, Card, Input, Circle) |
| F C V P | Switch shape (Flat, Concave, Convex, Pressed) |
| Ctrl+C | Copy generated code |
| ← → | Rotate light angle by 5 degrees |
| R | Reset all values to defaults |
What Is Neumorphism?
Neumorphism is a CSS design trend that creates soft, extruded user interface elements by combining carefully calculated box-shadows with matching background colors. Unlike flat design which relies on solid fills and sharp borders, neumorphic elements appear to rise from or sink into the surface behind them. The effect mimics real-world materials like molded plastic or pressed clay, giving digital interfaces a tactile, physical quality.
The technique requires two opposing shadows: a lighter one simulating reflected light and a darker one representing the cast shadow. Both shadows must be calculated relative to the base background color. This free neumorphism CSS generator handles all the math automatically, letting you focus on adjusting the visual parameters until the design feels right. It outputs production-ready code in CSS, Tailwind, and SCSS formats.
How to Generate Neumorphic CSS
- Choose a background color. Pick from the 8 curated presets or enter any hex value. The element and page background must match for the illusion to work.
- Select a shape type. Flat gives a simple extruded look. Concave and convex add surface gradients. Pressed creates an inset, pushed-in appearance.
- Set the light direction. Drag the circular angle picker or use the slider. The light angle determines where highlights and shadows fall.
- Adjust depth parameters. Use the Distance, Blur, and Intensity sliders to control how pronounced the 3D effect appears. Higher distance creates deeper shadows; higher blur creates softer edges.
- Pick an element type. Switch between Box, Button, Card, Input, and Circle to preview how the shadow looks on different UI components.
- Copy the output. Select your preferred format (CSS, Tailwind, or SCSS) and click Copy. The code includes hover and active states automatically.
Features
- Real-time preview. Every parameter change updates the preview element instantly with no delay or page reload.
- Three output formats. Export as vanilla CSS properties, Tailwind arbitrary value classes, or SCSS variables with a mixin-ready structure.
- Draggable angle picker. An interactive circular control lets you set light direction intuitively by dragging, with touch support for mobile devices.
- Hover and active states. Generated code includes reduced-depth hover shadows and inset active shadows for complete interaction design.
- Dark and light presets. Eight curated color presets cover common design scenarios from bright whites to deep navies.
- Keyboard shortcuts. Power users can switch elements, shapes, rotate light, and reset values without touching the mouse.
- Fully private. All calculations run in your browser. No data is sent to any server.
Use Cases
Dashboard cards. Neumorphic cards work well for analytics dashboards where you want data panels to feel distinct without harsh borders. The soft elevation separates content areas while maintaining a cohesive, unified surface.
Music and media players. The pressed shape type is ideal for play/pause buttons and volume knobs in audio interfaces. The tactile appearance invites interaction and communicates state clearly.
Form inputs and toggles. Login forms and settings panels benefit from neumorphic inputs that appear recessed into the surface. Combined with the Glassmorphism Generator for overlays, you can create layered, modern interfaces.
Tips and Tricks
- Match backgrounds exactly. The neumorphic illusion breaks if the element background differs from its container. Always use the same hex value for both.
- Keep intensity moderate. Values between 30% and 50% produce the most realistic results. Higher intensity creates harsh shadows that look unnatural.
- Use consistent light direction. Pick one angle (commonly 135 or 145 degrees, simulating top-left lighting) and apply it to all elements on the page.
- Add focus states separately. Since neumorphism relies on subtle shadows, add a visible outline or border-color change for keyboard focus to maintain accessibility.
- Combine with the Box Shadow Generator for complex layered effects. Use neumorphic base shadows with additional colored accent shadows for interactive highlights.
Frequently Asked Questions
What is neumorphism in CSS?
Neumorphism (also called soft UI) is a design style that combines flat design with skeuomorphism. It uses subtle box-shadows to create elements that appear extruded from or pressed into the background surface, giving a soft, three-dimensional look.
How do I create a neumorphic shadow in CSS?
Apply two box-shadows to an element: one lighter shadow offset away from the light source, and one darker shadow offset toward the light source. The background color of the element must match the parent background for the effect to work.
Does neumorphism work with dark mode?
Yes. Neumorphism works with any base color. For dark themes, use a dark background color and the generator will automatically calculate appropriate lighter and darker shadow values to maintain the soft extruded appearance.
Is neumorphism accessible?
Neumorphism can have accessibility challenges because the subtle shadows provide low contrast between interactive and non-interactive elements. Always add clear focus states, hover indicators, and sufficient color contrast to ensure usability for all users.
Can I use neumorphism with Tailwind CSS?
Yes. This generator exports Tailwind-compatible arbitrary value classes using the shadow-[] syntax. Copy the generated class string directly into your HTML element's class attribute.
What is the difference between flat, concave, convex, and pressed shapes?
Flat uses a solid background with outer shadows. Concave adds a gradient that makes the surface appear curved inward. Convex adds a gradient curving outward like a dome. Pressed uses inset shadows to make the element look pushed into the surface.
Related Tools
Conclusion
This neumorphism CSS generator gives you complete control over soft UI shadow design without manual calculations. Whether you are building a dashboard, a media player, or a settings panel, the real-time preview and multi-format export make it easy to integrate neumorphic elements into any project. Pair it with the Glassmorphism Generator and CSS Gradient Generator to build a complete modern design system.