Jobs Hub

CSS How to Add Shadows

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

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

CSS Online Test

« Previous Tutorial Next Tutorial »