1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
🟢 Dev

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.

Preview

Soft UI / Neumorphism

Neumorphism (also called Soft UI) fakes the look of a shape extruded from the surface using two opposing shadows: a light one at the top-left and a dark one at the bottom-right. The pressed variant flips that around, with inset shadows.

Important: the page background has to match the element's base colour — the effect falls apart without it. That is why this page forces the preview background to whatever colour you pick.

Accessibility: contrast in neumorphism is low by design. Use higher-contrast text, or back important actions with a solid colour. Everything runs in the browser.

Create the Soft UI effect (neumorphism)

Neumorphism, also known as Soft UI, is that style where elements look sculpted from the surface itself, with a soft relief that rises out of or sinks into the background. The trick is combining two complementary shadows, one light and one dark. That's exactly what the generator builds for you, visually.

Choose the base colour and adjust the distance, blur and type of relief (extruded, flat or pressed), following the result in real time. When you like it, copy the ready CSS, with both box-shadows already calculated so the effect stays coherent.

Nothing needs installing, since it all happens in the browser. So you can experiment with this interface style without guessing shadow values in the dark.

Frequently asked questions

I pasted the CSS into my project and the relief disappeared. What did I miss?
Almost always the background colour. Neumorphic depth comes from two shadows tinted from the surface itself, one lighter and one darker: if the element is #e0e5ec and the page is white, those shadows land on white and the relief flattens out. Paint the container in the same base colour as the element. This page forces the preview background to your chosen colour for exactly that reason, which is why it works here and not there.
Why is the size I picked missing from the copied CSS?
Because the size lives in the preview only. The generated CSS carries three things — background, border-radius and the box-shadow with both shadows — and no dimensions, since in practice the element gets sized by its content or by the layout it drops into. The size slider is there so you can judge the balance between distance, blur and surface area. To lock the square, add width and height by hand after pasting.
What is the difference between Raised, Flat and Pressed?
Raised throws the dark shadow down and right and the light one up and left, at the full distance value. Pressed uses those same two shadows with inset, pushing the relief inward. Flat splits the difference: same direction as raised, but a third of the distance and half the blur, just enough to lift the shape off the background. Intensity, from 5% to 40%, drives how far the shadows lighten and darken the base colour — at the default 15% that means 12 RGB steps each way.

Related Tools

🌑

CSS Box Shadow Generator

Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.
🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.
🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.
🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
〰️

Cubic Bezier Generator

Create and visualize cubic-bezier curves for CSS animations. Drag control points, preview the animation and copy the value. Includes presets (ease, ease-in, ease-out). Everything in your browser.