Free Online Neumorphism Generator

A neumorphism generator builds the soft-UI extruded look using a paired light highlight and dark shadow over a matching background, outputting CSS box-shadow declarations.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed
CSS
background: #E0E5EC;
border-radius: 50px;
box-shadow: 20px 20px 40px #D1D6DD,
            -20px -20px 40px #EFF4FB;

How to Use This Tool

  1. Set the Background color — usually a neutral mid-grey like #E0E5EC.
  2. Adjust Size and Radius to match the element you'll style.
  3. Tune Distance, Intensity and Blur until the soft-extruded look is right.
  4. Toggle Inset to flip from raised to pressed-in.
  5. Click Copy CSS to copy the background, border-radius and box-shadow declarations.

What Is a Neumorphism Generator?

Neumorphism — a contraction of "new" and "skeuomorphism" — is the soft-UI style that briefly dominated dribbble shots in 2020. Cards and buttons appear gently extruded from the page using a two-shadow `box-shadow`: a bright highlight offset to the top-left, and a dark shadow offset to the bottom-right, both with the same blur, on a matching background color.

The effect only works on neutral, slightly off-white or off-black backgrounds — pure white and pure black don't leave room for the highlight and shadow to do their work, and saturated backgrounds wash out the highlight. Accessibility-wise, neumorphic buttons often fail contrast and tap-target affordance tests, so it's best reserved for decorative or low-stakes UI.

This generator exposes every tunable parameter — background, size, radius, distance, intensity, blur — plus an inset toggle to flip from raised to pressed-in. The live preview shows the result on the actual background so you can judge in context.

Frequently Asked Questions

What is neumorphism?
A soft-UI style where elements appear extruded from the background using two opposing shadows — one lighter, one darker — on top of a matching base color.
How is the CSS structured?
Two box-shadows: a dark one offset toward the light direction's opposite, and a light one in the light direction. Plus border-radius and a matching background color.
Are there accessibility issues?
Yes — neumorphic elements tend to have low contrast against their background. Use sparingly and never as the only signal for an interactive control.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Glassmorphism Generator

Generate frosted-glass CSS with adjustable blur, opacity and border. Live preview plus copy-ready code.

Gradient Generator

Build linear, radial and conic CSS gradients with multiple color stops. Copy ready-to-use CSS in one click.

CSS Pattern Generator

Generate CSS background patterns — dots, stripes, grids and diagonals — with custom colors and spacing.

Color Picker

Pick any color with an interactive picker. See hex, RGB and HSL values update live, then copy in one click.

Color Shades Generator

Generate 10 shades, 10 tints and 10 tones of any color. Build a Tailwind-style 50–950 scale from a single seed.