Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | Shadow Effect

  • Last Updated : 04 Dec, 2018

The shadow effect property in CSS is used to add text and images shadow in HTML document.

Text Shadow: The CSS text-shadow property is used to display the text with shadow. This property holds the pixel length, breadth, and width of the shadow and the color of the shadow.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

Text-shadow: 3px 3px 3px green;

Example:






<!DOCTYPE html>
<html>
    <head>
        <title>text-shadow property</title>
        <style>
            h1 {
                color: green;
                text-shadow: 3px 3px 3px lightgreen;
            }
        </style>
    </head>
    <body>
        <h1>Geeks For Geeks | A computer Science portal for Geeks</h1>
    </body>
</html>                    

Output:

TextBox Shadow: The CSS boxShadow property applies shadow to the text box. This property hold the pixel length, breadth, and width of the shadow and the color of the shadow.

Syntax:

boxShadow: 3px 3px 3px green;

Example:




<!DOCTYPE html>
<html>
     <head>
         <title>box shadow property</title>
         <style>
               #Gfg {
                   width: 220px;
                   height: 50px;
                   background-color: green;
                   color: white;
               }
          </style>
          <script>
   
               // function that show Shadow Effect.
               function Shadow() {
                  document.getElementById("Gfg").style.boxShadow 
                                           = "5px 5px 5px gray";
               }
          </script>
     </head>
     <body>
          <button onclick = "Shadow()">Click to see Shadow</button>
          <div id = "Gfg">
            <h1>GeeksforGeeks</h1>
          </div>
     </body>
</html>

Output:
box shadow property




My Personal Notes arrow_drop_up
Recommended Articles
Page :