Shadows in CSS

CSS provides properties to create shadows for elements and text, adding depth and emphasis to your designs.

1. Box Shadow (box-shadow)

Adds shadow around an element's box (like divs, buttons, images).

Syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: horizontal shadow distance (positive = right, negative = left)

• offset-y: vertical shadow distance (positive = down, negative = up)

• blur-radius (optional): how blurry the shadow is (default 0)

• spread-radius (optional): size of the shadow (positive = bigger, negative = smaller)

• color: shadow color (can use rgba for transparency)

Example:

.box {  width: 200px;  height: 100px;  background: #eee;  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);}

2. Multiple Shadows

You can apply multiple shadows separated by commas.

box-shadow: 3px 3px 5px gray, -3px -3px 5px lightgray;

3. Inset Shadow

Creates an inner shadow inside the element.

box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);

4. Text Shadow (text-shadow)

Adds shadow to text.

Syntax:

text-shadow: offset-x offset-y blur-radius color;

• Similar to box-shadow but without spread radius.

Example:

h1 {  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}

Summary

If you want, I can provide you with shadow effects examples, or a tutorial on creative shadows!