How to use the CSS box-shadow and glassmorphism generator
- Pick "Box-Shadow" or "Glassmorphism" with the tabs at the top.
- Move the sliders. The preview updates instantly and the CSS code is written for you in the box below.
- When you like the result, press "Copy CSS" and paste it into your stylesheet.
The Box-Shadow tab lets you stack up to five shadow layers. Start from a preset, then tweak each layer a little.
What the box-shadow values mean
box-shadow is written as "offset-x offset-y blur spread color". The offsets move the shadow, blur decides how far the edge is softened, and spread grows (positive) or shrinks (negative) the shadow itself. For example 0 10px 30px -5px rgba(0, 0, 0, 0.25) is a wide, soft shadow pushed 10px downward; because the spread is -5px it sits slightly smaller than the box, which keeps the edges clean. Adding inset puts the shadow inside the box so it looks pressed in. Blur can never be negative.
How glassmorphism is built
The frosted-glass look has three parts. First, a semi-transparent background color (for example white at 22% opacity). Second, backdrop-filter: blur(), which blurs whatever is behind the box. Third, a thin, light border that imitates the reflection on a glass edge. This tool also lets you adjust saturate so the colors behind the glass do not look dull, and it writes -webkit-backdrop-filter as well for some Safari versions. To see the effect properly there must be a colorful background or image behind the box. On a flat color there is nothing to blur, so it just looks like an ordinary translucent box.
Things to keep in mind
- Text on glass can become hard to read depending on what is behind it. A contrast ratio of at least 4.5:1 is recommended for body text, so check it with the Color Contrast Checker.
- Using several backdrop-filters with large blur on one screen can make scrolling stutter on low-end devices. Use it only where it matters.
- Low-contrast styles such as neumorphism can make button edges hard to see, which hurts accessibility.
- For environments without backdrop-filter, add a more opaque background inside @supports not (backdrop-filter: blur(1px)) as a safe fallback.
FAQ
I cannot see the shadow on screen.
A shadow is invisible when its opacity is 0 or when its color matches the background. If blur, spread and offsets are all 0 the shadow is also hidden entirely behind the box. Raise the opacity and add a small vertical offset to check it quickly.
backdrop-filter has no effect.
The element itself needs a semi-transparent background, otherwise there is nothing to reveal the blur. Some older browsers do not support it, so it is wise to keep a fallback style with a slightly higher background opacity for those browsers.
In what order do multiple shadows stack?
In a comma-separated box-shadow the first shadow is painted on top. Put small, crisp shadows first and wide, soft ones after them for a natural sense of depth.
Notes
This tool only writes style code as a reference. Before using it on a real site, check how it looks and performs in several browsers and devices.