Skip to main content
7BBusyBoss

Neumorphism CSS Generator — Soft UI Shadows

Generate neumorphic CSS from one base colour and two derived shades. Control radius, distance and blur, and toggle inset for a pressed state.

No limitsZero data leaksSuper fast
#e0e5ec
40px
20px
40px
border-radius: 40px;
background: #e0e5ec;
box-shadow: 20px 20px 40px rgb(186, 191, 198),
            -20px -20px 40px rgb(255, 255, 255);

You're on 7BusyBoss — 300+ free tools that run instantly in your browser. No signup, nothing uploaded.

CSS Clip-Path GeneratorCSS Box Shadow GeneratorCSS Border Radius GeneratorCSS Text Shadow GeneratorCSS Cubic-Bezier GeneratorRGB to HEX Converter
Browse all Design Generators →
About this tool

Neumorphism is two shadows from one base colour

Neumorphic design creates a soft, three-dimensional illusion using only shadows — no borders, no separate colors. The effect comes from a light shadow on one side and a dark shadow on the opposite side, both derived from the background colour. This tool derives the darker shade by reducing the background's brightness by 15%, and the lighter shade by increasing it by 12%. The two shadows sit at opposite 45-degree angles, both with a blur radius (0–100 px) to soften the edges and a distance offset (5–50 px) that controls how far the element appears to lift from (or press into) its surface.

The cornerstone constraint: the element and its background must be the same colour or the illusion collapses. Neumorphism lives on a flat, solid background — never over an image or gradient. Because of this rigid pairing, the shadow values are strictly determined by the base colour and the three numeric controls this tool exposes: corner radius (0–80 px), distance, and blur.

The accessibility problem is real

Because the whole style relies on near-identical foreground and background colours, contrast is inherently low. Buttons in this style routinely fail WCAG AA and AAA contrast requirements. The raised versus inset states can be indistinguishable to someone with low vision — there is no border, no colour change, only a soft shadow shift. Icons and text rendered on top face the same problem: a dark icon on a light background with minimal contrast.

If the control must be usable by everyone, neumorphism needs a supplementary cue. Add a text label, an icon, a visible focus ring, or a border so users can perceive interaction state without relying on shadow alone. Check your design against a color contrast checker before shipping.

Inset versus raised is the whole interaction vocabulary

Neumorphic interaction is binary: either the element is raised (default) or inset (pressed). Toggling the "Inset" checkbox swaps the shadow directions — the light and dark shadows reverse positions. This subtle reversal is the only signal that a button is active or a form field is focused. The inset keyword in CSS box-shadow achieves this by inverting where the shadows fall relative to the element's edges. Without this pairing, neumorphism has no way to signal state, so the inset toggle is not optional — it's the entire interaction language.

What this tool does and doesn't expose

This generator produces clean CSS for border-radius, background colour, and box-shadow with two paired shadows. It lets you tune corner radius, distance, and blur to fit your design grid. It does not generate:

  • Transition or animation timing — you must hand-write transition: all 0.3s ease to animate between raised and inset states
  • Hover, focus, or active states — apply the inset version to pseudo-classes yourself
  • Text or icon styling — neumorphism affects only the container; contrast fixes must happen elsewhere
  • Responsive behaviour — scale distance and blur manually for smaller screens

Use this tool to generate the shadow values, then pair them with your markup, state management, and accessibility layer. For help with shadow mathematics, see the box-shadow generator.

How to use the Neumorphism Generator

Takes about a minute. No signup, no download, your data stays in your browser.

  1. 1
    Open the tool. Scroll up to the Neumorphism Generator above — it loads instantly in your browser, no install needed.
  2. 2
    Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
  3. 3
    Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.

Frequently asked questions

Common questions about the Neumorphism Generator.

What is neumorphism?

Neumorphism is a design style that creates a soft, three-dimensional effect using only shadows. It combines two shadows (light and dark) derived from the background colour to make an element appear raised or inset, without borders or separate colours. The background and element must be the same colour.

Is neumorphism accessible?

No — neumorphism is inherently low-contrast because the element and background are the same colour. Buttons routinely fail WCAG contrast requirements, and raised versus inset states can be indistinguishable to users with low vision. Add text labels, icons, focus rings, or borders to make it accessible.

Why does my neumorphism look flat?

If your element looks flat, check three things: the background and element must be exactly the same colour; increase the distance (5–50 px) to push the shadows further apart; and increase blur (0–100 px) to soften edges. Weak shadows on a light background fade into invisibility — try a darker or more saturated base colour.

How do I animate between raised and inset states?

Add CSS transitions to smooth the shadow change: transition: all 0.3s ease; Then toggle the inset class on interaction. The browser will animate the shadow offsets and blur over 300 milliseconds. Test the animation on multiple background colours to ensure shadows remain visible.

Community rating

Discussion (0)

No comments yet. Start the discussion.

Keep exploring

Related tools across 7BusyBoss — all free, all instant.