CSS Box Shadow Generator
Design box shadows visually with sliders for offset, blur, spread, color, and opacity. Copy the CSS instantly.
Design box shadows visually with sliders for offset, blur, spread, color, and opacity. Copy the CSS instantly.
The box-shadow property is one of the most powerful CSS tools for adding depth and dimension to your web designs. Our visual box shadow generator lets you craft the perfect shadow without guessing pixel values or opacity levels. Every change you make is reflected in the live preview, and the generated CSS code is always clean and production-ready.
A CSS box shadow is defined by its horizontal offset, vertical offset, blur radius, spread radius, and color. The horizontal and vertical offsets control the position of the shadow relative to the element. Blur radius softens the shadow edges, while spread radius expands or contracts the shadow. Combining these values creates effects ranging from subtle elevation to dramatic drop shadows.
The inset keyword reverses the shadow direction, creating an inner shadow effect. Inset shadows are commonly used for pressed button states, input fields, and creating the appearance of depth within an element rather than behind it. Toggle the inset option in our tool to see the difference instantly.
Keep shadows subtle for a modern, clean look. Low opacity values between 5% and 20% work best for most designs. Use larger blur values with small offsets for soft, ambient shadows. Layer multiple shadows for richer depth effects. Our generator makes it easy to experiment until you find exactly the right shadow for your project.