Box Shadow & Glassmorphism
Dial in shadows and frosted-glass effects with live sliders, then copy the exact CSS.
Shadow
Glassmorphism
CSS
Design shadows and glass effects visually
Dial in a layered box-shadow with live sliders for offset, blur, spread, color, and opacity — or flip on glassmorphism for the frosted-glass look popularized by modern UI design (a semi-transparent background plus a blurred backdrop). Preview both live, then copy the exact CSS to paste into your project.
What glassmorphism needs
The frosted-glass effect combines backdrop-filter: blur() with a semi-transparent background color, and typically a subtle border to help the edge read against varied backgrounds. Browser support for backdrop-filter is broad today, but always check it against your specific target browsers.
Also useful: CSS Gradient Generator and Color Contrast Checker.
Frequently asked questions
backdrop-filter blurs whatever is BEHIND the element, so it needs actual content or color variation showing through it — a plain solid background won't visibly change even with blur applied.
Blur softens and fades the shadow's edges outward; spread expands or contracts the shadow's size before blurring is applied. Higher spread with low blur gives a harder, more defined shadow.
Yes — CSS box-shadow accepts a comma-separated list of shadows. This tool generates one layer at a time; combine two exported values with a comma to layer them.