Generate soft UI / neumorphism CSS box-shadow effects with live preview. Pick shape, depth, and color — copy the CSS instantly.
FREE
Loading…
Controls
Base Color
Shape
Preview
Generated CSS
.element {
border-radius: 16px;
background: #e0e5ec;
box-shadow: 10px 10px 20px rgb(184, 189, 196), -10px -10px 20px rgb(255, 255, 255);
}Neumorphism Generator is a free online CSS tool for creating the soft UI (neumorphism) effect with precise control over every shadow parameter. Adjust the base color, shadow distance, blur radius, intensity, and element shape — then copy the generated box-shadow CSS directly into your project.
Neumorphism (or "new skeuomorphism") is a design style that uses dual-shadow techniques to make elements appear to extrude from or indent into their background surface. The effect relies entirely on CSS box-shadow: a lighter shadow on the top-left and a darker shadow on the bottom-right creates the illusion of depth without gradients or images.
The tricky part of neumorphism is that the background color, shadow light color, and shadow dark color must all be mathematically related — a slight lightening and darkening of the same base hue. This tool handles all that math automatically: pick a base color and the generator computes the correct light and dark shadow values for a perfectly balanced result.
The generator takes the base color and computes a lighter variant (+lightening factor) and darker variant (-darkening factor) for the two box-shadow directions. The shape mode (flat, concave, convex, pressed) is achieved by combining box-shadow direction with a background gradient. All values update in real time.
Pick a base color
Select the color that will be used for both the element background and the background surface.
Choose a shape
Select flat, concave, convex, or pressed to define the visual depth style.
Adjust depth
Use the Distance and Blur sliders to control how deep the shadow appears.
Set intensity
Intensity controls how strong the light and dark shadows are — lower values are subtler.
Copy the CSS
Click Copy CSS to get the complete box-shadow, background, and border-radius code.
Button States
Design pressed/raised button states that react naturally to click interactions.
Control Panels
Create dashboard knobs, toggles, and sliders with tactile soft-UI styling.
Cards & Panels
Give content cards a raised, physical-looking depth without heavy drop shadows.
Mobile Components
Style iOS/Android-inspired inputs, switches, and list items with soft UI shadows.
Design Systems
Generate consistent shadow values to document in your team design system tokens.
Prototyping
Rapidly test different depth and shape combinations before committing to a design.
Auto Shadow Math
Light and dark shadow colors are automatically derived from your base color — no manual hex tweaking.
Four Shape Modes
Flat, concave, convex, and pressed cover every neumorphic state you need for interactive elements.
Complete CSS Output
Generated code includes box-shadow (both directions), background-color, and border-radius in a single ready-to-paste block.
Live Preview
Preview updates instantly as you move sliders so you can fine-tune without guessing.
No External Dependencies
The effect is pure CSS — no JavaScript, no libraries needed in your implementation.
Privacy First
All computation runs in your browser — no data is sent to any server.
Also Try
Also Known As
Binary To Decimal
Convert between binary, decimal, hex and octal number systems
Color Converter
Convert colors between HEX, RGB, and HSL formats
Convert Binary
Convert binary numbers to text and text to binary
Convert Timestamp
Convert Unix epoch timestamp to standard date format and back
Count Words
Count words, characters, sentences and paragraphs in text
Convert Datetime
Convert datetime between different formats and timezones
Trusted Worldwide
iLoveDocsTools is used by students, professionals, and businesses across the United States, Canada, United Kingdom, Australia, India, and more than 100 other countries. All tools are browser-based and process files privately — your files never leave your device. Free to use, with Pro plans for unlimited access.
All processing happens directly in your browser. Your documents are never sent to any server — complete privacy guaranteed for users in the USA, Canada, UK, and worldwide.
Every tool on iLoveDocsTools is free to use. Need more? Upgrade to Pro for unlimited usage, priority access, and no daily limits. Trusted by students, freelancers, and teams across North America and Europe.
Whether you are on a Mac, Windows PC, iPhone, or Android in New York, Toronto, London, or Sydney — our tools work instantly in any modern browser.
Looking for free PDF tools in the USA? Free document converters in Canada? Online PDF editors in the UK or Australia? iLoveDocsTools offers 70+ free tools — merge PDF, split PDF, compress PDF, convert Word to PDF, Excel to PDF, JPG to PDF, and many more — all free, all instant, all private. No watermarks. No file size limits. Just free tools that work.