Create CSS box shadows with multiple options based on color (including Tailwind), direction, distance, and other options. The result is a CSS value that can be copied and used anywhere on the web.
Box Color
Shadow Color
Background Color
Horizontal Shift
Vertical Shift
Blur Radius
Spread Radius
Opacity
CSS
box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.9);
General Help
Click on the button to share this tool with others.
Box Shadow Help
Colored boxes
The three cards at the top showing the colors for ‘Box Color’, ‘Shadow Color’, and ‘Background Color’ each have a color button with the current hex value for each display.
If you click each of these buttons you will be presented with a dialog where you can adjust these colors respectfully.
Sliders
Use the sliders and numerical input boxes to adjust the values for the position, shape and opacity of the shadow:
Horizontal Shift - moves the shadow to the left / right in relation to the subject.
Vertical Shift - moves the shadow to the up / down in relation to the subject.
Blur Radius - increases / decrease the radius of the blurriness of the shadow.
Spread Radius - increases / decrease size of the shadow.
Opacity - increases / decrease opacity of the shadow against the background.
Result
When you are happy with the final result, you can click the buttons to copy the calculated CSS to the clipboard.
