CSS Box Shadow, Border Radius & Glassmorphism Generator
Design CSS box shadows, rounded corners and frosted-glass (glassmorphism) effects with sliders and a live preview — then copy the CSS.
How to use
- 1Adjust the shadow offset, blur, spread, color and opacity (add a second layer for depth).
- 2Set corner radius and optional glass blur, then copy the CSS.
Frequently asked questions
How do I make a soft, realistic shadow?
Use two layers: a small, tighter shadow and a larger, very transparent one with a big blur.
What is glassmorphism?
A frosted-glass look: a semi-transparent background plus backdrop-filter: blur(), usually with a subtle border.
Is backdrop-filter supported?
Yes in all modern browsers; older Safari needed the -webkit- prefix, which the generator includes.