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>

5. 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>

6. 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>

How to add Stylish h1, h2 ,h3 Headings in Blogger Post? 

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On your  Blogger Dashboard, click 'Theme'.

Step 3:Click on the arrow down icon next to 'customize' button.

Step 4:Click on Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Stylish Headings By Techy DarshaN */
.TDheading-1{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f);box-shadow:0 5px 15px rgba(242,97,103,.4);Color:white;padding:10px;border-radius:7px}

.TDheading-2{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-3{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-4{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px 0 rgba(116,79,168,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-5{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-6{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-7{background-image:linear-gradient(to right,#009245,#FCEE21,#00A8C5,#D9E021);box-shadow:0 4px 15px 0 rgba(83,176,57,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-8{background-image:linear-gradient(to right,#6253e1,#852D91,#A3A1FF,#F24645);box-shadow:0 4px 15px 0 rgba(126,52,161,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-9{background-image:linear-gradient(to right,#29323c,#485563,#2b5876,#4e4376);box-shadow:0 4px 15px 0 rgba(45,54,65,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-10{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-11{background-image:linear-gradient(to right,#ed6ea0,#ec8c69,#f7186a,#FBB03B);box-shadow:0 4px 15px 0 rgba(236,116,149,0.75);Color:white;padding:10px;border-radius:7px}
Step 6: Crete a new post or edit a existing post to add these Stylish Headings

Step 7: Switch to 'HTML View' Then, paste the following HTML codes 

I have designed 10+ Stylish Headings you can use can of them you like and don't forget to change the Title :)

This is a Stylish Heading

 <h1 class="TDheading-1" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

  <h1 class="TDheading-2" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

  <h1 class="TDheading-3" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

  <h1 class="TDheading-4" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

 <h1 class="TDheading-5" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

  <h1 class="TDheading-6" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

  <h1 class="TDheading-7" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

 <h1 class="TDheading-8" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

   <h1 class="TDheading-9" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

 <h1 class="TDheading-10" style="text-align: left;">This is a Stylish Heading </h1>

This is a Stylish Heading

   <h1 class="TDheading-11" style="text-align: left;">This is a Stylish Heading </h1>