CSS Neumorphism Generator for Soft UI Shadows
This CSS neumorphism generator builds soft UI shadow effects visually, so you never have to write the dual box-shadow by hand. Pick a base color, choose a shape, drag a few sliders, and copy production-ready CSS. It is made for designers and front-end developers who want neumorphic cards, buttons, and inputs without trial-and-error code.
Neumorphism (also called Soft UI) pairs two shadows — one light and one dark — to make an element look like it extrudes from or presses into the same surface. The generator derives those matching shadow colors from your base color automatically, then shows a live preview and the exact CSS as you tweak.
How to Use the Neumorphism Generator
Choose a base color
Set your background with the color picker or type a hex value. Light, neutral tones like grays work best, since they leave enough room for both the light and dark shadow.
Select a shape type
Switch between Flat, Pressed, Concave, and Convex. Use Flat for raised cards and Pressed for active or clicked states.
Adjust the shadows
Tune Distance (0–50px), Blur (0–100px), Intensity (0–100%), Border Radius (0–100px), and preview Size (80–400px). Each slider has a paired number input for exact values.
Set the light direction
Pick where the virtual light comes from — Top Left, Top Right, Bottom Left, or Bottom Right. This decides which side gets the light shadow and which gets the dark one. Top Left is the most natural.
Copy the CSS
Click Copy CSS and paste the output into your stylesheet. Remember to give the parent container the same base color so the neumorphic illusion holds.
Features
Base Color with Auto Shadows
Pick a base color with the picker or hex input, and the light and dark shadow colors are derived automatically for a natural, harmonious result.
Four Shape Types
Create Flat (raised), Pressed (inset), Concave (gradient inward), and Convex (gradient outward) effects, and switch instantly to compare them.
Precise Shadow Controls
Fine-tune distance, blur, and intensity with sliders that each have a synchronized number input for exact values.
Radius & Size Controls
Set corner roundness up to 100px and resize the preview element from 80 to 400px to see the effect at the scale you need.
Light Direction Control
Choose from four light source directions; shadow offsets and gradient angles adjust automatically to match.
Multiple Element Previews
Preview the effect on a Card, Button, Circle, or Input to see how it reads in different UI contexts.
Dark Background Preview
Toggle Dark Preview to check the design on a darker surface; the visuals recalculate while the exported CSS keeps your original color.
Six Quick-Start Presets
Begin from Subtle, Medium, Strong, Pressed, Concave, or Convex, then refine with the sliders.
Live CSS & One-Click Copy
The generated background and box-shadow CSS updates in real time, ready to copy with a single click.
Frequently Asked Questions
What is neumorphism (Soft UI)?
Neumorphism, or Soft UI, is a design style that combines flat surfaces with subtle dual shadows so elements look like they extrude from or press into the same background. It uses one light and one dark shadow to simulate soft, realistic depth.
Why does the generator use two box-shadows (light + dark)?
A single shadow only darkens one side. Neumorphism needs a light shadow on the side facing the light source and a dark shadow on the opposite side, so the element appears to rise out of the surface. The generator outputs both shadows in one box-shadow declaration for you.
Why doesn't my neumorphism effect look right?
The most common cause is a mismatch between the element and its parent background. Neumorphism requires both to be the same color, so apply the generated background color to the element and its parent container.
What colors work best for neumorphism?
Neutral, mid-tone colors work best — light grays like #e0e0e0 or soft pastels. Very dark or very light colors shrink the contrast between the light and dark shadow and make the effect hard to see, so avoid pure white and pure black.
How do I make a pressed (inset) neumorphic effect?
Select the Pressed shape type. It switches the box-shadow to inset, so the element looks pushed into the surface — perfect for active, focused, or clicked states. The Pressed preset gives you a ready-made starting point.
What is the difference between Concave and Convex?
Concave adds a gradient that runs dark to light for an inward-curve illusion, while Convex runs light to dark for an outward-curve illusion. Both keep the same raised dual-shadow as Flat.
Does Dark Preview change the CSS output?
No. Dark Preview is for visualization only — the generated CSS always reflects your original base color. To create CSS for a dark theme, change the base color itself to a dark shade.
How is neumorphism different from glassmorphism and skeuomorphism?
Neumorphism uses matched dual shadows on a single flat surface for soft depth. Glassmorphism relies on background blur and transparency for a frosted-glass look, while skeuomorphism imitates real-world textures and materials. Neumorphism is the minimal, monochrome middle ground.
Is neumorphism accessible?
Neumorphism has naturally low contrast, so use it mainly for decorative containers rather than critical interactive controls. Keep text on neumorphic surfaces at a sufficient contrast ratio, and reinforce buttons and inputs with clear labels, focus styles, and borders.
Can I use the CSS with any framework?
Yes. The output uses standard background, box-shadow, and border-radius properties that work with Tailwind, Bootstrap, or plain CSS — just apply them to your element.
No comments yet. Be the first to comment!