Box shadow & border radius
Dial in box shadows and corner radius on a live preview box, stack up to three shadows, and copy the CSS.
~~~
Preview
Box shadows
Border radius
~~~
Generated CSS
The preview box can show shadows and rounded corners — that's the point. Tool chrome stays monochrome; your output CSS can use any colors you pick.
~~~
About this tool
Box shadows and border-radius are easy to get wrong on the first guess. Tweaking four offset values and a blur by hand gets old fast. This generator shows the result as you move sliders, supports stacked shadows, and outputs copy-paste CSS.
Use inset shadows for pressed buttons or sunken panels. Unlink corners when you only want to round the top of a card.
~~~