Back to UI design
CSS box-shadow and glassmorphism generator
Use sliders to tune layered shadows or a frosted-glass effect, preview it on a sample card, then copy the CSS into your site.
How to use
- Choose Box shadow or Glass.
- Drag the sliders to adjust offset, blur, strength or background blur.
- Copy the CSS and apply it to the card, button or panel that needs the effect.
Frequently asked questions
Why use several shadow layers?
Layered shadows that get smaller mimic real light and look softer and more refined than one heavy shadow.
Does glassmorphism work in every browser?
Yes in current Chrome, Edge, Safari and Firefox. The code already includes the Safari prefix.
Does the glass effect slow a site down?
Not on a few small panels. Avoid covering the whole page or long scrolling areas with it.