Understanding CSS Box Shadows
The CSS box-shadow property attaches one or more shadows to an element container. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
- Horizontal Offset (X): Moves shadow left (negative) or right (positive).
- Vertical Offset (Y): Moves shadow up (negative) or down (positive).
- Blur Radius: Higher values create larger, softer blur gradients.
- Spread Radius: Positive values expand the shadow frame; negative values contract it.
- Inset: Changes the shadow from an outer drop shadow to an inner shadow.
Frequently Asked Questions
Is the generated CSS cross-browser compatible?
Yes. Standard box-shadow syntax is supported in modern browsers including Chrome, Firefox, Safari, Edge, and Opera.
Can I use RGBA transparency?
Yes. The opacity slider automatically compiles your selected color into an rgba() value for clean alpha blending.