CSS Shadow Generator — box-shadow & glassmorphism
The CSS shadow generator lets you dial in a beautiful box-shadow with sliders, or generate a trendy glassmorphism effect in one click — live preview, and one-click copy of paste-ready CSS. Design Cat is pure front-end with no framework needed.
box-shadow: 0px 10px 25px -5px rgba(27, 27, 31, 0.2);
Pure CSS, live preview — copy and paste.
How to use css shadow generator
- 1Pick a mode: box-shadow or glassmorphism.
- 2Drag the sliders for offset, blur, spread, color, opacity and more.
- 3Watch the live preview.
- 4Hit Copy CSS and paste it into your stylesheet.
Why use Design Cat's CSS Shadow Generator?
- WYSIWYG: the preview updates as you drag — no trial and error.
- Two effects: classic shadow plus trendy glassmorphism in one tool.
- Copy-and-go: standard CSS (with -webkit prefix) that works on paste.
Frequently asked questions
Why isn't my glassmorphism blurring?
Glassmorphism relies on backdrop-filter, which needs content behind the element to blur and isn't supported in some older browsers. The generated CSS includes the -webkit-backdrop-filter prefix for wider support.
What does the inset option do?
Inset draws the shadow inside the element — handy for recessed looks, input focus and pressed states; unchecked gives a normal outer shadow.
Can I use this in Tailwind?
Yes. Put the box-shadow value into your Tailwind boxShadow config, or use an arbitrary value like shadow-[...] directly in a class.
Updated · design cat team