CSS Shadows

CSS shadows are used to create depth and dimension in elements by adding shadow effects. This can enhance the visual design of a webpage by making elements appear to float or cast shadows.

Types of CSS Shadows

CSS supports two main types of shadows:

• Box Shadow: Adds shadow effects to the border box of an element.
• Text Shadow: Adds shadow effects to the text within an element.

Box Shadow

The `box-shadow` property applies shadow effects to the box of an element. You can control the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.

/* Box Shadow Syntax */
box-shadow:     ;

        

/* Simple Box Shadow */
.box-shadow-example {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

            

Text Shadow

The `text-shadow` property applies shadow effects to the text. You can control the horizontal and vertical offsets, blur radius, and color of the shadow.

/* Text Shadow Syntax */
text-shadow:    ;

        

/* Simple Text Shadow */
.text-shadow-example {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

            

Shadow Properties

Here is a brief overview of the key properties for shadows:

• Horizontal Offset: Moves the shadow horizontally.
• Vertical Offset: Moves the shadow vertically.
• Blur Radius: Controls the blurriness of the shadow.
• Spread Radius: Expands or contracts the size of the shadow.
• Color: Sets the color of the shadow, including opacity.

/* Multiple Shadows */
.multiple-shadows-example {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(0, 0, 0, 0.2);
}