Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS box shadow generator
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
Preview
About this tool
Tune the depth of a card or button by changing blur and spread independently. Negative spread shrinks the shadow outline; blur cannot be negative.
How to use
Set horizontal and vertical offsets, blur radius, spread, color and opacity. Enable inset for an inner shadow. The preview updates immediately, and the CSS can be copied or downloaded.
Offsets and spread may be negative; blur may not. Dimensions range from -200 to 200px, with blur from 0 to 200px. This tool generates one shadow layer with opacity from 0 to 100%.
Common questions
What is the difference between blur and spread?
Blur softens the edge, while spread expands or contracts the shadow shape. Enable inset for an inner shadow. The tool creates one layer; combine declarations in your CSS for multiple layers.
How do I move a shadow left or above the box?
Use a negative horizontal offset for left and a negative vertical offset for up. Positive values move right and down. The exported box-shadow applies to a box, not the opaque outline of an image.
Related tools
Opens in a new tab
Comments
0