How to style text and box shadow in CSS?

Shadow in CSS

The shadow effect of text and box containing text can be achieved in CSS3. It gives you the ability to add shadow effect to the element without using any images. Shadow effect makes text of your web page beautiful and attracts more user to read your website. The shadow effect in CSS may be applied to text and boxes. In order to achieve text and box shadow, CSS3 provides two types of shadow properties.

  • text-shadow
  • box-shadow

text-shadow

The text-shadow property of CSS allows you to apply shadow to the text on your web page. In its simplest form, you can apply shadow to the text by specifying horizontal and vertical values in pixels. The general syntax of simplest text shadow is shown below:

h1{ text-shadow:vx, vy;}

The vx and vy are horizontal and vrtical values in pixels.

You can apply text shadows with single effect and multiple effects.

Let us apply different text shadow to four paragraphs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow property</title>
    <style>
        .container{
            border:2px solid orange;
            font-size:xx-large;
            height:auto;
            width:50%;
            font-weight: bold;
        }
        #shad1{
            color:red;
            text-shadow: 2px 2px;
        }
        #shad2{
            color:red;
            text-shadow: 2px 2px pink;
        }
        #shad3{
            text-shadow: 2px 2px 5px green;
        }
        #shad4{
            color:rgb(35, 17, 204);
            text-shadow: 6px 6px 6px #09b47b;
        }
   </style>
</head>
<body>
    <div class="container">
        <p id="shad1">Programming tutorial is the best tutorial to learn programming stepwise.</p>
        <p id="shad2">Programming tutorial is uploading detailed posts daily.</p>
        <p id="shad3">Programming tutorial's lectures are written in simple words.</p>
        <p id="shad4">You can learn C, C plus plus, HTML, CSS, PHP, Python and much more.</p>
    </div>  
</body>
</html>
text-shadow, www.programmingtutorial.in

box-shadow in CSS

Just like text-shadow, we can also use box-shadow to an element. The simplest form of box-shadow is horizontal and vertical shadow. By default, box-shadow apply black color shadow. You can apply some other color to the shadow. CSS shadow provides a blur shadow also. Let us now write code for different box-shadow:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow property</title>
    <style>
        .container{
            border:2px solid orange;
            font-size:x-large;
            height:auto;
            width:20%;
            font-weight: bold;
        }
        .box{
            height:100px;
            width:250px;
            margin:25px;
        }
        #box1{
            background-color: burlywood;
            box-shadow: 10px 10px;
        }
        #box2{
            color:red;
            background-color: rgb(88, 206, 58);
            box-shadow: 10px 10px rgb(208, 233, 181);
        }
        #box3{
            color:rgb(166, 168, 29);
            background-color: rgb(241, 244, 247);
            box-shadow: 2px 2px 20px green;
        }
        #box4{
            color:rgb(35, 17, 204);
            box-shadow: 0 4px 20px 0 rgba(204, 50, 50, 0.6), 0 6px 20px 0 rgba(12, 173, 60, 0.19);
        }    
    </style>
</head>
<body>
    <div class="container">
        <div id="box1" class="box">Programming tutorial is the best tutorial to learn programming step wise.</div>
        <div id="box2" class="box">Programming tutorial is uploading detailed posts daily.</div>
        <div id="box3" class="box">Programming tutorial's lectures are written in simple words.</div>
        <div id="box4" class="box">You can learn C, C plus plus, HTML, CSS, PHP, Python and much more.</div>
    </div>   
</body>
</html>
box-shadow in CSS, www.programmingtutorial.in