CSS SHADOWS

Basically in CSS, we do have two main properties that we can use to style our elements using shadows, namely:

1. Text Shadows
2. Box Shadows

Text Shadows

However, we are only able to add shadows to all elements and the text inside them, except for the body element itself. To demonstrate this, create a folder and in it create two files: HTML and CSS. Then in the HTML file, copy the following code:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="index.css">
     <title>CSS SHADOWS</title>
    </head>
    <body>
     <div>
      <p class="shadow">Batman: The Dark Knight</p>
     </div>
    </body>
</html>

Then add the following code to the CSS file:

body{
    background-color: black;
}
div{
   background-color: white;
   display: flex;
   justify-content: center;
}

After saving your changes and linking your CSS file, run the code on your browser to see the rendered page as it is. Then add the following code to your CSS file:

.shadow{
   padding: 10px;
   font-size: 24px;
   text-shadow: 2px 2px 5px blue;
}

Then refresh the rendered page to see the changes. You should see something like this below:

For us to target adding shadows to only the text in an element, we use the 6 text-shadow CSS property. Let’s touch on that using the code below as an example:

#shadow{
  text-shadow:3px 5px 5px brown;
   padding: 10px;
}

The first value of thetext-shadow property is the horizontal value and the greater it is, the farther away the shadow moves in the right direction. The second value defines the vertical value, and the greater it is, the farther away the shadow moves downward. These two values are mandatory to include using the text-shadow property.

Get John Sean Kangethe’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A third value is often added to specify the amount of blur of the shadow, and the higher it is, the higher the amount of blur will be added. However, too much use of the third value is often discouraged as it makes the shadows look terrible — and thus 5px is the recommended value of use.

The fourth value specifies the shadow color.

Box Shadows

The box-shadow property is used to add shadows to the outside of elements. The values are similar to those of text-shadow property. Let us use the following code to understand this much better:

div{
padding: 5px;
box-shadow: 5px 5px 5px yellowgreen;
}

The first value specifies the horizontal value, and the greater it is, the farther away the shadow moves on the right-hand side. The second value specifies the vertical value, and the greater it is, the farther away the shadow moves downwards. The first two values are mandatory to include whenever you use the box-shadow property.

The third value specifies the blur amount of the shadow, and the greater it is the higher the amount of shadow blur. Same as the text-shadow property, whenever we use the box-shadow property, the recommended third value is 5px as too much of it makes shadows look terrible.

The fourth value specifies the shadow color.

Adding the above box-shadow code to the same CSS file that we had created and then refreshing the rendered page should allow us to see this:

Happy Coding

In the meantime, you can follow me on Instagram @its_ngangasean and on Twitter @nganga_sea