CSS Tutorial

CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can create both outer and inner shadows, and customize their color, size, blur radius, and position. It's commonly used to add depth and highlight elements on a webpage.

Key Points on CSS Box Shadow:

The box-shadow property is shorthand for defining the horizontal offset, vertical offset, blur radius, spread radius, and color of a shadow.
Shadows can be applied to all elements that have a defined box model, such as div, p, or input.
Multiple shadows can be applied to a single element by separating them with commas.
The inset keyword can create an inner shadow, appearing inside the element instead of outside.
Box shadows can be used to create depth, focus effects, and highlight important elements like buttons and modals.
Shadows are scalable and can be adjusted for different screen sizes and resolutions.

Syntax for CSS Box Shadow:

Syntax Example

/* Box Shadow syntax */
        box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color inset;
        
        /* Example */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

Examples of CSS Box Shadow:

The following examples demonstrate the usage of the box-shadow property:

Code Example: Basic Box Shadow

div {
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }

Output

This div has a basic box shadow.

Code Example: Inset Box Shadow

div {
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }

Output

This div has an inset box shadow.

Code Example: Multiple Box Shadows

div {
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), -3px -3px 5px rgba(0, 0, 0, 0.3);
        }

Output

This div has multiple box shadows.

Common Box Shadow Properties:

horizontal-offset: Specifies the horizontal distance of the shadow. A positive value moves the shadow to the right, while a negative value moves it to the left.
vertical-offset: Specifies the vertical distance of the shadow. A positive value moves the shadow down, while a negative value moves it up.
blur-radius: Defines how much the shadow is blurred. A higher value creates a larger and softer shadow.
spread-radius: Specifies the size of the shadow. A positive value will cause the shadow to expand, while a negative value will make it shrink.
color: Sets the color of the shadow. It can accept any valid CSS color format (hex, rgb, rgba, etc.).
inset: Changes the shadow from an outer shadow to an inner shadow.

When using box shadows, it's essential to consider the overall design and layout of the page. Avoid using heavy or too many shadows that can clutter the design. Proper contrast and smoothness should be maintained for a polished effect.