Box Shadow Generator
A tool to visually create CSS box-shadow with adjustable offset, blur, spread, and color in real-time.
Use the sliders to adjust the horizontal offset, vertical offset, blur radius, spread radius, and shadow color. The preview updates in real-time. You can toggle the inset option to create inner shadows. Click "Copy CSS" to copy the generated code to your clipboard.
About the box-shadow Property
The CSS box-shadow property adds shadow effects to elements. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be specified separated by commas. The inset keyword creates an inner shadow. Box-shadow is commonly used to add depth and visual hierarchy to UI components like cards, buttons, and modals.
About the box-shadow Property
Q. Can I add multiple shadows?
A. Yes, CSS box-shadow supports multiple shadows separated by commas. Each shadow can have different offset, blur, spread, and color values.
Q. Is my input data secure?
A. All processing is completed within your browser. No data is ever sent to any server.