Stylish Heading For Blogger

Hello! Welcome to Tecky AaryaN. 

You are looking for Stylish Heading For Blogger then this post is just for you.

1. Normal Blue Heading 

 Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background: #0194ff;

           color: #fff;

           padding: 10px;

           line-height: 1.7em;

           box-shadow: 0 2px 10px 0 #cac9c9;

           text-align: center;

           user-select: none;

           cursor: pointer;">Your Heading is Here</h2>

2. Left Border Heading 

 Preview

Your Heading is Here

<h2 style="background: rgb(101, 66, 237);

           border-left: 20px solid rgb(0, 0, 0);

           box-shadow: rgb(202, 201, 201) 0px 2px 10px 0px;

           color: white; cursor: pointer;

           font-size: 18px;

           font-weight: 600;

           line-height: 1.7em;

           padding: 10px;

           text-align: center;

           user-select: none;">Your Heading is Here</h2>

3. Gradient Heading 

 Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background-image: linear-gradient(to right, #ff5f00, #ff782f, #ff8d4e, #fea26d, #fbb58c);

           color: #fff;

           padding: 10px;

           line-height: 1.7em;

           box-shadow: 0 2px 10px 0 #cac9c9;

           text-align: left;

           user-select: none;

           cursor: pointer;

           border-left: 20px solid red;">Your Heading is Here</h2>

4. Curved Corner Heading 

 Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background: #fff;

           color: #000;

           padding: 10px;

           line-height: 1.7em;

           box-shadow: 0 2px 10px 0 #cac9c9;

           text-align: center;

           user-select: none;

           cursor: pointer;

           border-left: 20px solid #ff5f00;

           border-right: 20px solid #ff5f00;

           border-radius: 5px 55px 5px 55px;">Your Heading is Here</h2>

5. Side Rounded Heading 

 Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background: #fff;

           color: #000;

           padding: 10px;

           line-height: 1.7em;

           box-shadow: 0 2px 10px 0 #cac9c9;

           text-align: center;

           user-select: none;

           cursor: pointer;

           border-left: 20px solid #ff0077;

           border-right: 20px solid #ff0077;

           border-radius: 55px;">Your Heading is Here</h2>

6. Side Rounded Heading

  Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background: #a4aafc;

           color: #fff;

           padding: 10px;

           line-height: 1.7em;

           box-shadow: 0 2px 10px 0 #cac9c9;

           text-align: center;

           user-select: none;

           cursor: pointer;

           border-left: 30px solid #000ba3;

           border-right: 30px solid #000ba3;">Your Heading is Here</h2>

7. Solid Shadow Heading 

 Preview

Your Heading is Here

<h2 style="font-weight: 600;

           font-size: 18px;

           background:#333;

           margin:5px 4px 5px 0;

           padding:9px 0 9px 10px;

           border:0;

           color:white;

           line-height:1.7em;

           text-decoration:none;

           text-transform:uppercase;

           box-shadow:4px 4px 0px rgba(33,33,33,0.45);">Your Heading is Here</h2>

8. Gradient Shadow Heading 

 Preview

Gradient Shadow Heading

<h2 style="font-weight: 700;
           font-size: 22px;
           background: linear-gradient(90deg, #ff7a18, #af002d 70%);
           color: #fff;
           padding: 15px;
           line-height: 2em;
           text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
           box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
           text-align: center;
           border-radius: 10px;
           user-select: none;
           cursor: pointer;">Gradient Shadow Heading</h2>

9. Neon Glow Heading 

 Preview

Neon Glow Heading

<h2 style="font-weight: 800;
           font-size: 24px;
           background: #141e30;
           color: #fff;
           padding: 20px;
           line-height: 1.9em;
           text-shadow: 0 0 10px #00e676, 0 0 20px #00e676;
           text-align: center;
           border-radius: 10px;
           user-select: none;
           cursor: pointer;">Neon Glow Heading</h2>

10. 3D Effect Heading 

 Preview

3D Effect Heading

<h2 style="font-weight: 700;
           font-size: 24px;
           background: #ff005a;
           color: #fff;
           padding: 18px;
           line-height: 2em;
           text-align: center;
           border-radius: 8px;
           user-select: none;
           cursor: pointer;
           box-shadow: 0px 4px 0px #000, 0px 10px 10px rgba(0, 0, 0, 0.2);">3D Effect Heading</h2>

Conclusion

I hope you have successfully added Stylish Heading. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Tecky AaryaN

Go to Link

Prev And Next