How to use CSS Shadow Effects?

CSS shadow effects allow you to add depth and dimension to your web page elements, making them stand out and look more visually appealing. In this tutorial, we’ll cover the basics of how to use CSS shadow effects to create different effects on your web page.

Understanding the Box Shadow Property

The box-shadow property is what you’ll use to create shadow effects on your web page. This property takes several values, which you can adjust to achieve different shadow effects. Here’s the basic syntax of the box-shadow property:

box-shadow: h-shadow v-shadow blur spread color;

Let’s take a closer look at each value:

• h-shadow: This sets the horizontal distance of the shadow from the element. A positive value will move the shadow to the right, while a negative value will move it to the left.
• v-shadow: This sets the vertical distance of the shadow from the element. A positive value will move the shadow down, while a negative value will move it up.
• blur: This sets the blur radius of the shadow. A higher value will create a more blurred, diffuse effect.
• spread: This sets the spread radius of the shadow. A higher value will make the shadow larger and more spread out.
• color: This sets the color of the shadow.

Here’s an example of how to use the box-shadow property:

.box {
  box-shadow: 10px 10px 5px #888888;
}

In this example, we’re adding a shadow to an element with the class name “box”. The shadow has a horizontal offset of 10 pixels, a vertical offset of 10 pixels, a blur radius of 5 pixels, and a color of #888888 (which is a shade of gray).

Creating Different Shadow Effects

Now that you understand the basic syntax of the box-shadow property, let’s look at how to create different shadow effects.

Creating a Drop Shadow

A drop shadow is a common shadow effect that creates the illusion that the element is floating above the background. Here’s an example of how to create a drop shadow:

.box {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

In this example, we’re adding a drop shadow to an element with the class name “box”. The shadow has a horizontal offset of 2 pixels, a vertical offset of 2 pixels, a blur radius of 8 pixels, and a color of black with an alpha value of 0.2. The alpha value makes the shadow partially transparent, which helps create the illusion of depth.

Creating an Inset Shadow

An inset shadow is a shadow effect that appears inside the element, rather than outside of it. This can be useful for creating a pressed or indented effect. Here’s an example of how to create an inset shadow:

.box {
  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.2);
}

In this example, we’re adding an inset shadow to an element with the class name “box”. The shadow has a horizontal offset of 2 pixels, a vertical offset of 2 pixels, a blur radius of 8 pixels, and a color of black with an alpha value of 0.2. The “inset” keyword tells the browser to create an inset shadow.

Text Shadow Effects tutorial

CSS provides a variety of text styling properties, and one of them is text-shadow. Text-shadow allows you to add a shadow effect to text in HTML. Here’s how you can create a text shadow in CSS:

First, create an HTML element that you want to apply the text shadow to. For example, you can create a paragraph element like this:

<p>Hello World</p>

Now, open your CSS file and select the HTML element you want to apply the text shadow to. You can do this by using the element selector, like this:

p {
  /* CSS properties go here */
}

Next, add the text-shadow property to the selector and specify the shadow’s color, offset, blur radius, and spread distance. The syntax for the text-shadow property is as follows:

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

For example, to create a black shadow with an offset of 2 pixels to the right and 2 pixels down, a blur radius of 3 pixels, and no spread distance, you can use the following code:

p {
  text-shadow: 2px 2px 3px #000;
}

p {
  text-shadow: 2px 2px 3px #000, -2px -2px 3px #fff;
}

p {
  text-shadow: -2px 2px 3px #000;
}

p {
  text-shadow: 2px 2px 1px #000;
}

p {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Shadow Effects Example</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      
      .shadow {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        margin: 50px;
      }
      
      /* Box Shadow */
      .box-shadow {
        box-shadow: 10px 10px 5px grey;
      }
      
      /* Text Shadow */
      .text-shadow {
        font-size: 40px;
        color: white;
        text-shadow: 2px 2px 5px black;
      }
      
      /* Inset Shadow */
      .inset-shadow {
        box-shadow: inset 10px 10px 5px grey;
      }
      
      /* Multiple Shadows */
      .multi-shadow {
        box-shadow: 10px 10px 5px grey, -10px -10px 5px grey;
      }
      
      /* Spread Shadow */
      .spread-shadow {
        box-shadow: 10px 10px 5px grey;
        margin: 50px;
        transform: rotate(-10deg);
      }
      .spread-shadow::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -10px;
        left: -10px;
        z-index: -1;
        box-shadow: 0 0 20px 5px grey;
      }
    </style>
  </head>
  <body>
    <div class="shadow box-shadow"></div>
    <h1 class="text-shadow">Text Shadow</h1>
    <div class="shadow inset-shadow"></div>
    <div class="shadow multi-shadow"></div>
    <div class="shadow spread-shadow"></div>
  </body>
</html>