CSS Generators
Generate CSS for box shadows, border radius, clip-path shapes, and fluid typography — all in your browser.
Design CSS box-shadows, border-radius, clip-path shapes, and fluid typography with sliders and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);How to use this tool
- 1Drag the X offset, Y offset, Blur, and Spread sliders to shape the shadow.
- 2Pick a shadow color with the color swatch, then adjust Opacity to control how strong the shadow looks.
- 3Check Inset if you want the shadow to appear inside the box instead of behind it.
- 4Watch the live preview on the right update as you adjust each control.
- 5Copy the generated box-shadow CSS with the Copy button and paste it into your stylesheet.
Frequently asked questions
Does box-shadow work in all browsers?
Yes. box-shadow has been supported in all modern browsers (Chrome, Firefox, Safari, Edge) for years, including mobile browsers, with no vendor prefixes needed.
What's the difference between blur and spread?
Blur controls how soft/feathered the shadow's edge looks — higher values spread the shadow out and fade it. Spread expands or shrinks the shadow's shape itself before blurring is applied; a positive spread makes the shadow bigger than the element, negative makes it smaller.
What does the Inset checkbox do?
By default, the shadow is cast outward as if the box is raised above the page. Checking Inset flips this so the shadow is drawn inside the box's border, giving a pressed-in or recessed look.
Is this shadow generated on a server?
No — every slider and the preview are computed entirely in your browser with plain CSS. Nothing about your design is ever sent anywhere.