Glassmorphism, Neumorphism and Box Shadow in CSS: A Practical Guide

Three effects show up again and again in modern interfaces: frosted glass, soft pushed-out buttons and realistic shadows. They look advanced, but each one comes down to a handful of CSS lines. This guide explains how they work, gives you code to start from and points out the traps.

1. Glassmorphism: the frosted glass look

Glassmorphism makes a panel look like a sheet of frosted glass. It lets the colors behind it show through, but blurred. You need four ingredients: a semi-transparent background, a blur of what is behind, a thin light border and a soft shadow.

.glass {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

The magic is backdrop-filter. It blurs whatever sits behind the element. Keep the -webkit- line for older Safari versions.

The trap: glass only looks like glass when there is something colorful behind it. On a plain white page you will see nothing special. Put it over a gradient or a photo.

2. Neumorphism: soft, pushed-out surfaces

Neumorphism (also called soft UI) makes an element look as if it is gently pushed out of the page, or pressed into it. The element has the same color as the background. Two shadows create the effect: a dark one on one side and a light one on the opposite side.

.neu {
  background: #e0e5ec;
  border-radius: 30px;
  box-shadow: 12px 12px 24px #b5c1d2,
              -12px -12px 24px #ffffff;
}
.neu--pressed {
  box-shadow: inset 12px 12px 24px #b5c1d2,
              inset -12px -12px 24px #ffffff;
}

The shadow colors come from your background color: one a bit darker, one a bit lighter. Change the light direction by flipping the signs.

The trap: the edges are very low contrast, which makes buttons hard to see for some people. Use neumorphism for a few decorative controls, not for a whole interface, and always add a clear focus style.

3. Box shadows that look real

A single shadow often looks flat and heavy. Real shadows are layered: a tight, dark one near the object and a wide, soft one further away.

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.07);
}

Stack two or three shadows with low opacity and growing blur. The result looks natural and light. A negative spread, like 0 10px 30px -5px, keeps the shadow from spreading wider than the box.

Skip the trial and error

Getting these values right by hand takes a lot of tweaking. Our free box shadow, glassmorphism and neumorphism generator gives you sliders for each one, a live preview and the code to copy as CSS or as a Tailwind class. Start from a preset and adjust.

Accessibility checklist

• Check text contrast on glass panels. Use dark text on light glass and light text on dark glass.
• Don't rely on shadow alone to show where a button is.
• Respect users who prefer reduced transparency by offering a solid background fallback if you can.

Dark glass and a fallback

The code above is a light glass. For a dark interface, use a dark tint instead, and keep the border subtle:

.glass-dark {
  background: rgba(17, 12, 40, 0.45);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

Not every browser or device supports backdrop-filter. A safe pattern is to give the panel a more solid background first, and only make it see-through where blur is available:

.glass { background: rgba(255, 255, 255, 0.85); }
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .glass { background: rgba(255, 255, 255, 0.25); }
}

Without support, people see a nearly solid panel, which is still readable.

Performance: do not blur everything

Blurring what is behind an element makes the browser do extra work, and it repeats that work whenever the content behind changes or scrolls. A few glass cards are fine. A whole page of large blurred areas, or glass on top of a video, can make scrolling feel heavy on older phones. Keep the blur value moderate, use it on small panels and test on a real mid-range phone.

Neumorphism and dark mode

Neumorphism depends on a light and a dark shadow around a mid-tone background. On a very dark background the light shadow barely shows, so the effect weakens. If you need dark mode, pick a dark gray rather than black, and make the light shadow only slightly brighter than the background.

Which effect for which job?

Effect	Good for	Avoid for
Glassmorphism	Cards over photos or gradients, navigation bars, modals	Plain backgrounds, long reading text
Neumorphism	A few switches, sliders and decorative cards	Main buttons, forms, anything that must be easy to see
Layered shadows	Almost every card, menu and button	Nothing, just keep them light

Frequently asked questions

Does backdrop-filter work in all browsers?

It works in all current browsers. Keep the -webkit- version for older Safari.

Why is my glass effect not blurry?

There is nothing behind it to blur. Place it over an image or a gradient.

Is neumorphism still popular?

It is used mostly as an accent, for things like switches and cards. Full neumorphic interfaces are rare because of the contrast problem.

Try the effects live: open the generator. Want a gradient behind your glass? Make one with the CSS gradient generator.