Skip to tool

CSS Neumorphism Generator

CSS Neumorphism Generator tool on AzWebTools.

Result

Fill inputs and click run.

How to Use This Tool

  1. Choose a base color by using the color picker or entering a HEX code.
  2. Adjust the 'Size' slider to match the dimensions of your target HTML element.
  3. Modify the 'Radius' slider to round the corners of your element.
  4. Use the 'Distance' and 'Blur' sliders to simulate the depth and height of the element.
  5. Adjust the 'Intensity' to make the shadows sharper or softer.
  6. Select a surface shape: Flat, Pressed, Concave, or Convex.
  7. Copy the generated CSS from the output box and paste it into your project's stylesheet.

Learn More About CSS Neumorphism Generator

Understanding Neumorphism in CSS

Neumorphism (a portmanteau of 'New' and 'Skeuomorphism') is a design trend characterized by soft, minimal UI elements that appear to be made of the exact same material as their background. Unlike Material Design, which uses distinct layers floating above the background, Neumorphic elements look like they are extruded directly from the background surface.

The Mechanics of the Effect

At the core of a Neumorphic element is the CSS box-shadow property. To achieve the 3D plastic look, two opposing shadows are applied to a single element:

  1. A Light Shadow: Positioned towards the simulated light source (usually top-left), using a lighter tint of the base background color.
  2. A Dark Shadow: Positioned away from the light source (usually bottom-right), using a darker shade of the base background color.

Surface Shapes

  • Flat: Uses a solid background color matching the parent container, relying purely on the dual box-shadows for visual depth.
  • Pressed (Inset): Moves the shadows inside the element using the inset keyword, making it look like an indented well or a pushed button.
  • Concave & Convex: Utilize subtle linear-gradient backgrounds that transition between slightly lighter and darker shades of the base color to simulate a curved, tactile surface.

Accessibility Considerations

While visually striking, Neumorphism presents significant accessibility challenges. Because the elements rely on low-contrast shadows rather than distinct borders or bright colors to indicate boundaries, they can be difficult for visually impaired users to perceive. When implementing Neumorphic UI, always ensure that text has high contrast against the background, and consider adding clear states (like color shifts or bolder outlines) for interactive focus and active states.

The Origin of Neumorphism

Neumorphism, originally termed 'New Skeuomorphism', gained widespread popularity in late 2019 following a conceptual UI post by designer Michal Malewicz. It evolved as a minimalist reaction to heavily layered flat design, aiming to reintroduce tactile, physical realism into user interfaces without the clutter of traditional 2000s skeuomorphism. It rapidly became a viral trend on platforms like Dribbble before finding its way into specialized web and mobile production environments.
Neumorphism is a UI design trend characterized by soft, extruded plastic-like elements achieved through opposing CSS box shadows.
Coined By
Michal Malewicz
Year Popularized
2019
Core CSS Property
box-shadow

Examples

Soft Light (Default)

Runtime-verified example for css-neumorphism-generator
Input
{"baseColor":"#e0e0e0","distance":20,"blur":60,"intensity":15,"shape":"flat"}
Output
{
  "baseColor": "#e0e0e0",
  "distance": 20,
  "blur": 60,
  "intensity": 15,
  "shape": "flat"
}

Dark Mode Pressed

Runtime-verified example for css-neumorphism-generator
Input
{"baseColor":"#292929","distance":10,"blur":20,"intensity":25,"shape":"pressed"}
Output
{
  "baseColor": "#292929",
  "distance": 10,
  "blur": 20,
  "intensity": 25,
  "shape": "pressed"
}

Concave Pop

Runtime-verified example for css-neumorphism-generator
Input
{"baseColor":"#f0f0f0","distance":25,"blur":50,"intensity":20,"shape":"concave"}
Output
{
  "baseColor": "#f0f0f0",
  "distance": 25,
  "blur": 50,
  "intensity": 20,
  "shape": "concave"
}

Use Cases

  • Designing soft, tactile buttons for modern web application interfaces.
  • Creating dashboard cards and layout containers that blend seamlessly into the page background.
  • Styling custom form elements like toggles, switches, and sliders with a realistic pressed or raised effect.
  • Generating rapid UI prototypes in code without needing complex graphics software.

Frequently Asked Questions

Related Tools