Build a CSS shadow from offset, blur, spread, and color values. Adjust one property at a time to understand its effect on a card or button.
How to use
Set horizontal and vertical offsets, then blur, spread, and color. Select Generate result and copy the box shadow declaration into the target rule.
Example
A horizontal offset of 0, vertical offset of 4, blur of 12, and spread of 0 produces a soft shadow below the element.
FAQ
What changes the shadow size?
Spread expands or contracts the shape; blur softens its edge. Negative offsets move it left or up.
Related tools
A practical task
Build the shadow from its shape outward. Set blur to zero while finding the horizontal and vertical position, then add blur for softness. Check the shadow against the actual card background; a dark preview color can be too heavy on a light interface.
Another useful question
Can a shadow create space around a card?
No. It changes painting, not document flow. Use margins or layout gaps when neighboring elements need physical separation.
Settings and formats
| Field | Values |
|---|---|
| Horizontal offset | Starting value: 0 |
| Vertical offset | Starting value: 4 |
| Blur | Starting value: 12; bounds: 0 / … |
| Spread | Starting value: 0 |
| Color | Starting value: #333333 |
Details for interpreting the result
| Detail | Explanation |
|---|---|
| CSS cascade | The same selector can appear more than once for a reason. Order, specificity, media queries, and inheritance all affect the result. A shorter or neater stylesheet still needs a check in its actual page. |
| Color contrast | A foreground and background need enough contrast for readable text. Attractive colors do not automatically produce accessible combinations. Check the intended font size, text weight, and actual background together. |
| RGB channels | RGB describes red, green, and blue light channels. In the common integer form, each runs from 0 through 255. A six digit HEX value represents the same three channels as two hexadecimal digits per channel. |
| HSL values | HSL separates hue, saturation, and lightness. It is useful for describing variations of one color, but the lightness percentage is not a direct measure of perceived contrast or accessibility. |
| Transparency and background | A partly transparent color is combined with what sits behind it. The same translucent value can look different on white, black, or an image. Evaluate the final combination instead of the foreground value alone. |
| Preview boundaries | A restricted preview can block scripts, external images, fonts, and other resources. That keeps the preview separate from active page behavior, but it also means it is not a faithful copy of every production layout. |