CSS: How to Add Shadows

Using CSS, we can add multiple types of shadows to an HTML element to make the element look more interactive and highlighted. To do this, here are the two properties we need to understand:

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 30px 10px; border: 1px solid; padding: 12px;}
      div.a{text-shadow: 4px 4px 10px red;}
      div.b{box-shadow: 4px 4px 10px blue;}
   </style>
</head>
<body>

   <div class="a">text-shadow: 4px 4px 10px red</div>
   <div class="b">box-shadow: 4px 4px 10px blue</div>
   
</body>
</html>
Output
text-shadow: 4px 4px 10px red
box-shadow: 4px 4px 10px blue

The code defines two "div" elements with different shadow styles.

The first div has the class "a" and uses the text-shadow property. This adds a shadow effect behind the text within the element, with a horizontal and vertical offset of 4 pixels and a blur radius of 10 pixels. As a result, the text appears to be 3D, with a red shadow behind it.

The second div has the class "b" and uses the box-shadow property. This applies a shadow effect to the entire element, with a horizontal and vertical offset of 4 pixels and a blur radius of 10 pixels. As a result, the entire element appears to float above the page, surrounded by a blue shadow.

The CSS box-shadow module, which enables you to add a shadow effect to an element, includes both text-shadow and box-shadow. The primary distinction between the two is that while box-shadow applies the shadow effect to the entire element (including any child elements), text-shadow only applies it to the text within an element. Additionally, a wider range of shadow effects, including multiple shadows, inset shadows, and more complicated shapes, can be produced using box-shadow.

The two properties that can be used to define a shadow behind a box or text are already covered in their separate posts. So you can visit those posts to learn in detail.

Now, before we close the discussion on creating shadows using CSS, I want to include one more example demonstrating the use of shadow to make the web page look more elegant.

<!DOCTYPE html>
<html>
<head>
  <title>Shadows Example</title>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }
    
    h2 {
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #fff;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      transition: all 0.3s ease-in-out;
    }
    
    .box:hover {
      transform: translateY(-10px);
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    }
    
    p {
      text-align: justify;
      text-justify: inter-word;
      line-height: 1.5;
      margin: 30px auto;
      width: 80%;
      font-size: 16px;
      color: #666;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>

   <h2>Shadows Example</h2>
  
   <div class="box"></div>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel 
   dapibus nulla.Vivamus a enim vel nisi convallis imperdiet quis id nulla.
   Sed volutpat felis ac ultrices maximus. Sed eu tincidunt metus.</p>
  
</body>
</html>

The output should be:

css shadow example code

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!