Box Shadow and CSS Grid Generator
Visually build a box-shadow or CSS grid layout and copy the generated CSS. Free to use, no signup required for occasional use.
box-shadow: 0px 4px 12px 0px #00000040;
What is the Box Shadow / CSS Grid Generator?
This combined tool offers two live, visual CSS builders in one place: a box-shadow generator where you adjust offset, blur, spread, color, and inset with an instant preview, and a CSS grid generator where you set columns, rows, and gap to preview a grid layout. Both tabs generate copy-ready CSS as you adjust the controls, which is faster than hand-tuning shadow or grid values by trial and error in a stylesheet.
How to use it
Switch between the Box Shadow and CSS Grid tabs. Adjust the sliders and fields to shape the preview to what you want, then copy the generated CSS from the box below and paste it into your stylesheet.
Frequently asked questions
Can I generate an inset shadow?
Yes, toggle the Inset checkbox to switch between a standard drop shadow and an inset shadow.
Does the grid generator support unequal column widths?
It generates equal-width columns and rows via repeat(); for custom track sizes you'd adjust the generated grid-template-columns value by hand.
Is the generated CSS copy-paste ready?
Yes, both tabs produce plain CSS declarations you can paste directly into any stylesheet.