Create CSS box shadows visually. Adjust the sliders and copy the CSS code instantly.
The CSS box-shadow property adds shadow effects around an element. You can create subtle depth effects, glowing highlights, or hard-edged shadows depending on the values you use. Multiple shadows can be stacked by separating them with commas.
The box-shadow property takes up to six values. The first two are the horizontal and vertical offset. The third is the blur radius. The fourth is the spread radius. The fifth is the color. The optional inset keyword makes the shadow appear inside the element rather than outside.
Subtle shadows with low opacity look more realistic than dark opaque ones. Keep the blur radius at least two to three times the offset for soft realistic shadows. Use consistent light source direction across your design by keeping the horizontal and vertical offsets pointing the same way on all elements.
Yes. Separate multiple box-shadow values with commas. For example box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1) creates two layered shadows for a more realistic effect.
A positive spread radius makes the shadow larger than the element. A negative spread radius makes it smaller. Combined with zero blur and zero offset it creates a border-like effect without affecting layout.