Generate Neumorphism Styles

Name: Generate Neumorphism Styles
Author: Kitmul

Create soft neumorphic UI effects with customizable shadow distance, blur, intensity, border radius, and shape options.

The Neumorphism Generator lets you visually build soft, extruded UI elements using light and dark box-shadows calculated from a single background color. Adjust size, border radius, shadow distance, intensity, and blur; then pick from flat, concave, convex, or pressed shapes. Preview the effect in real time on a matching background and copy the generated CSS with one click. Runs entirely in your browser with no server processing required.

Live Preview

Shape

Background Color

Element Size 200px

Border Radius 30px

Shadow Distance 20px

Shadow Intensity 0.15

Shadow Blur 60px

CSS Output

border-radius: 30px;
background: #e0e0e0;
box-shadow: 20px 20px 60px rgb(186, 186, 186),
            -20px -20px 60px rgb(255, 255, 255);

Your data stays in your browser

Was this tool useful?

Rate this tool

Tutorial

How to use

Choose a background color

Pick a background color using the color picker or enter a hex value. Neumorphism works best with muted, desaturated colors like light grays or soft pastels.

Adjust shadow controls

Use the sliders to set shadow distance, blur radius, and intensity. Higher intensity creates stronger contrast between the light and dark shadows.

Select a shape and copy

Choose flat, concave, convex, or pressed to change how the element appears extruded or inset. Click Copy to grab the CSS for your project.

Guide

Complete Guide to Neumorphism CSS

Neumorphism Fundamentals

Neumorphism creates a soft, physical appearance by combining two box-shadows on elements that share the same background color as their parent container. One shadow is lighter than the background, simulating a light source, while the other is darker, simulating a shadow. This dual-shadow technique produces the characteristic extruded or embossed look.

Designing with Shapes

The four shape options provide different visual effects for various UI states. Flat shapes are best for default states of cards and containers. Convex and concave shapes add subtle gradients that simulate curved surfaces; useful for buttons and interactive elements. Pressed shapes use inset shadows for active or selected states.

Color Selection Strategy

The base color is the most important decision in neumorphic design. The generator calculates light and dark shadow variants from this color; so the base must have enough room in both directions. Mid-range colors around 60-80% lightness work best. Pure white or pure black leave no room for the lighter or darker shadow respectively.

Accessibility Considerations

Neumorphism's soft, low-contrast nature presents real accessibility challenges. Interactive elements can be difficult to distinguish from decorative ones. Always supplement neumorphic styling with clear text labels, visible focus rings for keyboard navigation, and ARIA attributes. Test with WCAG contrast checkers to ensure your shadow differences meet minimum requirements.

Sources

Examples

Worked Examples

Example: Classic Soft Button

Goal: Create a standard neumorphic button on a light gray background.

Step 1: Set background color to #e0e0e0.

Step 2: Set size to 150px and border radius to 30px.

Step 3: Set shadow distance to 20px, blur to 60px, intensity to 0.15.

Step 4: Select the Flat shape for the default state.

Result: A soft, raised button element with balanced light and dark shadows creating a gentle 3D extrusion effect.

Example: Pressed Toggle State

Goal: Create a pressed/active state for a neumorphic toggle switch.

Step 1: Keep the same #e0e0e0 background.

Step 2: Set size to 120px and border radius to 50px for a pill shape.

Step 3: Set shadow distance to 10px, blur to 30px, intensity to 0.2.

Step 4: Select the Pressed shape for the inset effect.

Result: An inset element that appears pressed into the surface; perfect for toggled-on states and active controls.

Use Cases

Use cases

Soft Dashboard Cards and Panels

“Dashboard interfaces benefit from neumorphic cards that appear gently raised from the background surface. The soft shadow pairing creates visual depth and hierarchy without the harsh outlines of traditional card designs; making data panels feel tactile and modern.”

Toggle Switches and Buttons

“Neumorphism is ideal for interactive elements like toggle switches and buttons. The flat shape serves as the default state while the pressed shape gives clear visual feedback when activated; creating an intuitive physical interaction metaphor users immediately understand.”

Form Input Fields and Controls

“Form inputs styled with the pressed neumorphic shape create inset text fields that feel carved into the surface. Combined with flat-shaped labels and buttons; this approach produces cohesive form designs where every element shares the same material language.”

Frequently Asked Questions

?What is neumorphism?

Neumorphism is a UI design style that combines background-colored elements with paired light and dark box-shadows to create a soft, extruded appearance; as if interface elements are pushed out of or pressed into the background surface.

?How does the shadow calculation work?

The generator takes your background color and creates two shadows; one lighter and one darker than the base color. The intensity slider controls how far each shadow color deviates from the background, while distance and blur control placement and softness.

?What is the difference between the four shapes?

Flat uses outset shadows with a solid background. Concave and convex add a subtle gradient to simulate curved surfaces. Pressed uses inset shadows to make the element look pushed into the background; ideal for active states.

?Which background colors work best for neumorphism?

Muted, desaturated colors work best. Light grays like #e0e0e0 are classic choices. Highly saturated or very dark colors reduce the visible contrast between light and dark shadows, weakening the effect.

?Is this neumorphism generator free?

Yes, this tool is completely free with no usage limits, no registration required, and no premium tiers. Use it as often as you need for any project.

?Is my data sent to a server?

No, everything runs locally in your browser. No data is transmitted to any server. Your neumorphism configurations remain entirely private on your device.

?Does neumorphism have accessibility concerns?

Yes; the low-contrast nature of neumorphism can make interactive elements harder to distinguish for users with visual impairments. Always pair neumorphic styling with clear labels, focus indicators, and sufficient contrast ratios.

?Can I use neumorphism with dark mode?

Absolutely. Choose a dark background color like #2d2d2d and the generator will calculate appropriate light and dark shadow colors. The effect works on any base color as long as there is room for both lighter and darker shadow variants.

Help us improve

How do you like this tool?

Every tool on Kitmul is built from real user requests. Your rating and suggestions help us fix bugs, add missing features and build the tools you actually need.

Related Tools

Generate Color Palettes

Create harmonious color palettes using color theory harmonies

Try Tool

Generate CSS Animations

Create CSS keyframe animations with presets and live preview

Try Tool

Generate SVG Waves & Blobs

Create SVG wave dividers and organic blob shapes

Try Tool

Recommended Books on CSS & UI Design

Boost Your Capabilities

Generate Neumorphism Styles

Live Preview

Shape

CSS Output

How to use

Choose a background color

Adjust shadow controls

Select a shape and copy

Complete Guide to Neumorphism CSS

Neumorphism Fundamentals

Designing with Shapes

Color Selection Strategy

Accessibility Considerations

Worked Examples

Example: Classic Soft Button

Example: Pressed Toggle State

Use cases

Soft Dashboard Cards and Panels

Toggle Switches and Buttons

Form Input Fields and Controls

Frequently Asked Questions

?What is neumorphism?

?How does the shadow calculation work?

?What is the difference between the four shapes?

?Which background colors work best for neumorphism?

?Is this neumorphism generator free?

?Is my data sent to a server?

?Does neumorphism have accessibility concerns?

?Can I use neumorphism with dark mode?

How do you like this tool?

Related Tools

Generate Color Palettes

Generate CSS Animations

Generate SVG Waves & Blobs

Recommended Books on CSS & UI Design

CSS: The Definitive Guide

CSS: The Definitive Guide (Previous Edition)

The Non-Designer's Design Book

Recommended Products for Web Designers

Huion Kamvas Pro 16 Drawing Monitor for UI Design

BenQ ScreenBar Monitor Light for Designer Workstations

Logitech MX Master 3S Wireless Mouse for Design Workflows

Get Free Productivity Tips & New Tools First

Live Preview

Shape

CSS Output