Box Shadow

Part of the Styling with CSS section of Coddy's HTML journey — lesson 42 of 76.

In CSS, the box-shadow property is used to add shadow effects to an element's box. This property allows you to create visually appealing effects that make elements appear to "pop out" from the page or create depth and dimension.

Here's the basic syntax for using the box-shadow property:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: The horizontal distance of the shadow from the element. Positive values move the shadow to the right, and negative values move it to the left.

vertical-offset: The vertical distance of the shadow from the element. Positive values move the shadow downward, and negative values move it upward.

blur (optional): The blur radius of the shadow. A larger value creates a more blurred shadow. If omitted, it defaults to 0 (no blur).

spread (optional): The spread radius of the shadow. Positive values cause the shadow to expand, and negative values cause it to shrink.

color (optional): The color of the shadow. It can be specified using named colors, hexadecimal values, RGB values, or HSL values.
inset (optional): Changes the shadow from an outer shadow (outset) to an inner shadow.

For example:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

In this example, all <div> elements have a box shadow with a horizontal offset of 5px, a vertical offset of 5px, a blur radius of 10px, and a gray color. Elements with the class button have a box shadow with a horizontal offset of 2px, a vertical offset of 2px, a blur radius of 5px, a spread radius of 2px, and a semi-transparent black color (rgba(0, 0, 0, 0.5)).

Challenge

Easy

You are given an HTML document with a division (<div>) and a paragraph (<p>). Your task is to use the box-shadow property to add shadow effects to these elements. Follow the steps below:

Write a CSS rule that targets the <div> element. Set the box-shadow to 10px 10px 5px gray.
Write a CSS rule that targets the <p> element. Set the box-shadow to -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Cheat sheet

The box-shadow property adds shadow effects to elements:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Horizontal distance (positive = right, negative = left)
vertical-offset: Vertical distance (positive = down, negative = up)
blur (optional): Blur radius (larger = more blurred)
spread (optional): Spread radius (positive = expand, negative = shrink)
color (optional): Shadow color
inset (optional): Creates inner shadow instead of outer

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Try it yourself

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>