Free · Fast · Privacy-first

CSS Neumorphism Shadow Generator

Neumorphism uses two carefully calibrated box-shadows in opposite directions, one lighter and one darker than the background colour, to make UI elements appear to protrude from or press into their parent surface.

⚡

Dual-shadow builder for neumorphic raised and recessed effects

🔒

Live preview against your chosen background colour

✨

Separate controls for light and dark shadow values

⚡

Generates ready-to-use box-shadow CSS

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Shadow Effect Builder to your website

Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

The CSS Formula Behind Neumorphism and Why Background Colour Is the Starting Point

Neumorphism is a UI style that emerged in 2020 as a direct reaction to the prolonged dominance of flat design, attempting to restore physical depth cues by making elements appear to emerge from or be pressed into their background surface rather than floating above it. The technique relies on two box-shadows applied to the same element simultaneously: a light shadow on the upper-left edge simulating a light source positioned above and to the left of the viewport, and a dark shadow on the lower-right edge simulating the shadow cast away from that light source. Both shadows must be mathematically derived from the background colour rather than chosen independently. The light shadow is typically the background colour lightened by roughly 10 to 15 percent, and the dark shadow is the same colour darkened by 10 to 15 percent. This tight derivative relationship between shadow colours and background is what gives neumorphism its characteristic monochromatic, almost rubbery tactile appearance.

The CSS formula for a basic extruded neumorphic element on a background colour of #e0e5ec is box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff. The first shadow with positive offsets creates the darker lower-right shadow falling away from the implied light source. The second shadow with matching negative offsets creates the lighter upper-left highlight catching the implied light source on the raised edge. Both shadows typically use the same blur radius for visual symmetry, though some designers prefer slightly different blur values to suggest a softer or harder light source. The offset values control how dramatic the extrusion appears: larger offsets create a more pronounced protrusion that looks like a button rising several centimetres from the surface, while smaller offsets create a flatter, more subtle effect that reads as a gentle surface variation. For a pressed or recessed inset neumorphic element, both shadows are given the inset keyword, reversing their effect to suggest the element is depressed into the surface.

Neumorphism has a significant accessibility limitation that must be acknowledged and planned around before using the technique in any production interface. The style inherently relies on low-contrast differences between interactive elements and their background, because the shadow colours are derived from the background colour rather than from a contrasting colour palette. This means interactive controls built with pure neumorphism frequently fail WCAG 2.1 success criterion 1.4.11, which requires non-text UI components to maintain a 3 to 1 contrast ratio against adjacent colours for users with low vision. Before deploying any neumorphic interactive element such as a button or toggle, verify the contrast ratio of the element boundary against its background using a contrast checker tool, and ensure that focus states for keyboard navigation provide sufficient contrast through an explicit focus ring that does not rely on the inherent neumorphic styling.

When used selectively on accent elements rather than as the basis of an entire interface, neumorphism can add memorable tactile personality to a design without compromising accessibility for the bulk of the user experience. The most successful production uses of neumorphism in 2025 apply the style to decorative card containers, hero feature widgets, and audio player chrome where interactivity is supplementary rather than primary, while reverting to higher-contrast standard styles for the actual buttons, form fields, and navigation controls that users must operate. This pragmatic approach captures the visual distinctiveness of the style while preserving the contrast and clarity that accessible interaction requires.

MDN: box-shadow W3C CSS Backgrounds Specification

How to use this tool

💡

Set your background colour first. The tool calculates the light and dark shadow colours relative to that background. Adjust the offset and blur for both shadows together to control how pronounced the neumorphic protrusion appears.

How It Works

Step-by-step guide to css neumorphism shadow generator:

1
Enter your background colour
Set your page or component background colour in the builder using the colour input. The tool uses this base background colour to calculate the light and dark shadow colours mathematically, deriving each one from the background hue rather than using arbitrary independent values. Getting the background colour right is the single most important step in neumorphism work because every subsequent shadow value depends on it for visual coherence.
2
Choose raised or pressed style
Select either the extruded raised mode for an element that should appear to protrude from the background surface, or the inset pressed mode for an element that should appear depressed into the surface. The two modes generate the same dual-shadow structure but with different direction and inset keyword combinations. Raised elements suit display content and resting interactive controls, while pressed elements suit selected toggle states and active interaction feedback.
3
Adjust offset and blur for both shadows
Move the offset and blur sliders to control how pronounced the neumorphic protrusion or recession appears in the live preview. Larger offset and blur values create a more dramatic three-dimensional effect that looks heavier on the page, while smaller values create a subtle surface variation that integrates more quietly into the layout. Most production neumorphic designs use moderate values that suggest depth without becoming visually overwhelming or competing with content.
4
Copy the box-shadow CSS
Copy the generated dual-shadow declaration to your clipboard and apply it to your target component CSS rule. Critically, ensure that your component background colour in production matches the background colour you set in the builder, because the shadow colours are mathematically derived from that specific background hue. If the background changes later, regenerate the shadows against the new background colour rather than reusing the previous values.

Real-world examples

Common situations where this approach makes a real difference:

Smart home app control panel

A mobile developer is building a smart home control panel for a connected lighting and thermostat app. Each device toggle button uses neumorphic dual shadows on a warm grey background, giving the controls a believable tactile panel appearance that matches the physical aesthetic of premium smart home hardware. The raised neumorphic state indicates the device is off and the pressed inset state indicates it is on, with smooth animation between the two states. The result resembles a physical control board without using any custom images or icons for the button surfaces, keeping the asset bundle small.

Audio player widget on a portfolio site

A creative developer embeds a custom audio player widget on their design portfolio site. The play button, volume knob, and progress scrubber bar all use neumorphism on a soft beige background to create a tactile look reminiscent of premium audio hardware. The decorative interactive components have the depth the designer wanted to evoke high-end physical equipment, while track title text and time display readouts use standard dark text on light backgrounds for full legibility and accessibility, separating the decorative depth treatment from the functional reading experience.

Dashboard card with raised data display

A SaaS dashboard designer uses neumorphic cards for a metrics overview section at the top of the dashboard. Each metric card appears to gently protrude from the background, creating a clear spatial hierarchy between the displayed cards and the otherwise flat page background. The cards are intentionally display-only with no interactive controls inside them, avoiding the accessibility concerns that apply specifically to interactive neumorphic elements. The result feels considered and tactile without compromising the functional usability of the surrounding dashboard interface elements.

Signup form input fields with recessed treatment

A designer uses pressed neumorphism with inset dual shadows on text input fields in a signup form, making each field look distinctly recessed into the form surface on a light grey background. The recessed fields clearly communicate that they accept input through the visual depth treatment alone. On focus, a coloured border outline is added to the input to meet WCAG 2.1 contrast requirements for the interactive focused state, ensuring that keyboard navigation remains accessible even though the resting visual treatment relies on the inherently low-contrast neumorphic style.

When to use this guide

Use this when designing a soft-UI interface where components need to appear extruded from or embedded in the background, using the neumorphic dual-shadow technique.

Pro tips

Get better results with these expert suggestions:

Keep the offset-to-blur ratio consistent across components

For a coherent soft-UI system that feels designed rather than improvised, use the same offset-to-blur ratio on every neumorphic component throughout the interface. A ratio of 1 to 2, for example 6 pixel offset paired with 12 pixel blur, is a reliable starting point that produces a balanced extrusion at most element sizes. Varying this ratio across different components in the same design makes some elements appear more dramatically extruded than others, creating visual inconsistency that undermines the carefully calibrated tactile illusion the style is trying to achieve. Treat the ratio as a system constant.

Define shadow colours as CSS custom properties

Declare --shadow-light and --shadow-dark as CSS custom properties at the :root level of your stylesheet, with values derived from your base background colour. Reference these custom properties in every neumorphic component rule rather than hardcoding the shadow colours per component. If the base background colour changes at any point during the design lifecycle, you update only the two custom property definitions and every neumorphic component in the entire interface updates automatically to maintain the correct mathematical relationship between background and shadows.

Test pressed states explicitly

Neumorphic UIs should have a visually distinct pressed state for every interactive element to preserve the physical metaphor that justifies the style choice. The pressed state switches both shadows from outer to inset with slightly reduced blur and offset values, suggesting the element has been pushed into the surface. Without this explicit state distinction, all components look identical when clicked, removing the tactile feedback cue that makes neumorphism worth using in the first place. Test every interactive component in both rest and pressed states before considering the implementation complete.

Pair neumorphism with explicit focus rings for accessibility

Because neumorphic elements have inherently low contrast against their background by design, keyboard focus states need additional explicit visual treatment to remain accessible. Add a 2 pixel coloured outline that is visually distinct from both the shadow colours and the background fill, applied via the :focus-visible pseudo-class. This provides an accessible focus indicator that meets WCAG keyboard navigation requirements without disturbing the neumorphic appearance at rest. The focus ring only appears during keyboard navigation, leaving mouse interaction visually unchanged.

Background colour is non-negotiable in neumorphism

The neumorphic effect only works when the shadow colours are derived from the background. If you change the background without updating both shadows, the effect breaks. Always treat background colour and shadow colours as a matched set.

Use border-radius to match element shape

Neumorphism looks most convincing on elements with rounded corners. A border-radius of 10-16px on cards and buttons softens the extrusion and matches the organic tactile feel the style aims for.

Limit neumorphism to accent elements, not entire pages

Full-page neumorphic interfaces have poor accessibility contrast. Use the technique selectively on hero cards or feature widgets, paired with accessible text colours and focus states elsewhere in the layout.

FAQ

Frequently asked questions

Neumorphism is a UI design style that simulates physical depth by applying two box-shadows to an element simultaneously: one shadow lighter than the background on the upper-left edge and one shadow darker than the background on the lower-right edge. This dual-shadow combination creates the visual illusion that the element protrudes from or is pressed into the background surface rather than floating above it. The effect depends entirely on the shadow colours being mathematically derived from the background colour rather than using arbitrary contrasting colours, which is what gives neumorphism its characteristic monochromatic tactile appearance distinct from material design elevation shadows.

Start with your background colour expressed in either hex notation or the HSL colour space. For the light shadow component, increase the lightness value by 10 to 15 percent while keeping saturation and hue unchanged. For the dark shadow component, decrease the lightness by the same amount with the same saturation and hue preserved. For a neutral grey background of #e0e0e0, the light shadow would be approximately #f5f5f5 and the dark shadow approximately #bebebe. Adjust the values up or down from this baseline until the extrusion effect reads clearly in your live preview without looking heavy, ghostly, or fluorescent against your actual background.

Achieving full WCAG 2.1 AA accessibility with neumorphism is genuinely difficult because the style fundamentally relies on low-contrast surface variations between elements and their background. The safest practical approach is to use neumorphism exclusively for decorative, non-interactive display elements such as feature cards and visual accent widgets, while using conventional higher-contrast styles for all interactive controls including buttons, inputs, links, and form fields. If neumorphic interactive elements are required by the design brief, you must add explicit focus rings that are not part of the neumorphic styling and ensure all text labels meet contrast requirements independently of the surrounding shadow effect.

Raised or extruded neumorphism places both shadow layers on the outside of the element with opposing offset directions, making the element appear to float above the surface as if pushed outward from a continuous skin. Pressed neumorphism adds the inset keyword to both shadow layers, reversing their direction to appear inside the element, which makes the element look as if it has been pushed into the surface rather than out of it. The pressed state is commonly used as the active, selected, or on state in neumorphic toggle switches and button components to communicate the binary state transition through visual depth alone.

Yes, but the effect is significantly more difficult to calibrate visually on strongly saturated background colours. On a deep blue or vibrant orange background, deriving shadow colours by mechanically lightening and darkening the base hue requires careful manual colour adjustments to avoid the shadows looking muddy, fluorescent, or chromatically off-balance. Neumorphism is most predictable and most visually pleasant on neutral grey, warm beige, soft pastel, and muted earth-tone backgrounds where the light and dark derivations read as natural shading rather than as deliberate colour shifts. Save coloured backgrounds for confident neumorphism designers.

Yes, dark mode neumorphism uses exactly the same technique applied to a dark base background. Derive a lighter shadow and a darker shadow mathematically from the dark background colour. On a dark slate background of #1e1e2e, the light shadow might be #2a2a3e and the dark shadow might be #141420. The offset values and blur values remain identical to those used in light mode, with only the colour derivations changing. Note that the perceptible contrast difference between shadow and background is even smaller on dark surfaces because human eyes resolve dark-on-dark less precisely than light-on-light, amplifying the accessibility concerns inherent to the style.

A standard neumorphic effect requires exactly two box-shadow layers in a single property declaration: one shadow with positive offset values and the dark derived colour for the lower-right shadow, and one shadow with matching negative offset values and the light derived colour for the upper-left highlight. Both must be derived from the background colour for the technique to work. Some designers add a third layer for additional depth definition or to simulate a thin border around the element edge, but two layers is the minimum required for the characteristic dual-highlight appearance that defines the neumorphic style.

Neumorphism peaked as a dominant design trend around 2020 to 2021 and has since been used more selectively rather than disappearing entirely. Full neumorphic interfaces covering every component on every screen are rare in production today due to the well-documented accessibility challenges and the visual fatigue users experience after extended exposure. However, individual neumorphic elements such as feature card components, audio player chrome, smart home device toggles, and decorative widgets continue to appear regularly in production interfaces as deliberate accent elements within otherwise flat or material-design systems.

Avoid using neumorphism as the entire visual language of an interface, which is what made the style feel exhausted after its peak. Instead, use it for select hero moments and accent components where the tactile quality adds meaningful character to the design without overwhelming the user. Pair neumorphic elements with modern typography choices including variable fonts and contemporary type pairings, use generous whitespace around the neumorphic components, and ensure the colour palette feels current rather than reaching for the soft pastels that dominated the 2020 trend. Restraint and selective application are what keep neumorphism feeling intentional rather than nostalgic.