【Just Copy and Paste!】 Best 59 heading tag’s styles template.

Beautiful Design lets user feel good, and stay on your site for a long time. And also, you will be easy to get repeat users.In this Article. I will provide design templates of heading tag.

I will use same HTML for following heading lists.

html
<h1>Heading Title</h1>

Pattern1

css
h1 {
color:#000000;
border-bottom:3px solid #74b9ff;
font-size: 24px;
}

Pattern2

css
h1 {
color:#487eb0;
font-size:24px;
border-bottom:3px dotted #487eb0;
}

Pattern3

[sociallocker id=”23776″]

css
h1 {
color:#000000;
font-size:24px;
border-bottom:5px double #ffc778;
}

Pattern4

css
h1 {
color:#00b894; 
font-size:24px;
border-top:3px solid #00b894;
border-bottom:3px solid #00b894;
padding:5px 0;
}

Pattern5

css
h1 {
background: #c2edff;
padding: 5px 20px;
font-size: 24px;
}

Pattern6

css
h1 {
color: #364e96; 
border: solid 3px #364e96; 
padding: 5px 20px; 
font-size: 24px; 
border-radius: 5px;
}

Pattern7

css
h1 {
padding: 5px 20px; 
color: #010101; 
background: #eaf3ff; 
border-bottom: solid 3px #516ab6; 
font-size: 24px;
}

Pattern8

css
h1 {
color:#000000; 
font-size:24px; 
border-left:5px solid #0693e3;
padding:5px 20px;
}

Pattern9

css
h1 {
background-color:#fffaf4;
color:#000000;
font-size:24px;
border-left:5px solid #ffaf58;
padding:5px 20px;
}

Pattern10

css
h1 {
padding: 5px 20px; 
color: #494949; 
background: #f4f4f4; 
border-left: solid 5px #7db4e6; 
border-bottom: solid 3px #d7d7d7;
font-size: 24px;
}

Pattern11

css
h1 {
padding: 5px 20px; 
background: aliceblue; 
box-shadow: 0 0 4px egba(0, 0, 0, 0.25);
font-size: 24px;
}

Pattern12

css
h1{
color: #505050;
padding: 5px 20px;
display: block;
background: #dbebf8;
border-radius: 25px 0px 0px 25px;	
font-size: 24px;
}
h1:before {
content: '●';
color: white;
margin-right: 8px;
}

Pattern13

css
h1 {
position: relative;
padding: 5px 20px;
background: #e0edff;
font-size: 24px;
margin-bottom: 30px;
}
h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

pattern14

css
h1{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 2px 5px;
font-size: 24px;
color: #454545;
width: calc(100% - 10px);
margin: 0 auto 15px auto;
}

Pattern15

css
h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #ffffff;
padding: 2px 5px;
color: #454545;
font-size: 24px;
width: calc(100% - 10px);
margin: 0 auto 15px auto;
}

Pattern16

css
h1 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px #fffff;
padding: 5px 10px;
color: #454545;
font-size: 24px;
width: calc(100% - 10px);
margin: 0 auto 15px auto;
}
h1::after {
position: absolute;
content: '';
left: -10px;
top: -10px;
border-width: 0 0 20px 20px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

Pattern17

css
h1 {
position: relative;
padding: 5px;
background: #a6d3c8;
font-size: 24px;
color: #ffffff;
margin-bottom: 25px;
}
	
h1::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

Pattern18

css
h1 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
font-size: 24px;
}

Pattern19

css
h1 {
border-bottom: solid 3px skyblue;
position: relative;
font-size: 24px;
}
h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}

Pattern20

css
h1 {
position: relative;
padding-left: 25px;
font-size: 24px;
width: calc(100% - 10px);
margin: 0 auto 15px auto;
}
h1:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px rgb(119, 195, 223);
}
h1:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);	
}

Pattern21

css
h1 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;
font-size: 24px;
}
h1:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

Pattern22

css
#h2-11 {
position: relative;
padding: 5px 26px 5px 42px;
background: #fff0d9;
color: #2d2d2d;
line-height: 1.3;
border-bottom: solid 3px orange;
font-size: 24px;
}
#h2-11:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
width: 0;
height: 0;
border: none;
border-left: solid 45px white;
border-bottom: solid 45px transparent;
}

Pattern23

css
h1 {
color: #010079;
text-shadow: 0 0 5px white;
padding: 5px 10px;
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
font-size: 24px;
}

Pattern24

css
h1 {
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
font-size: 24px;
}

Pattern25

css
h1 {
color: #6cb4e4;
text-align: center;
padding: 3px;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
font-size: 24px;
}

Pattern26

css
h1 {
position: relative;
font-size: 24px;
}
h1:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);	
}

Pattern27

css
h1 {
position: relative;
padding: 5px 10px;
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;
font-size: 24px;
margin-bottom: 25px;
}
h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
width: 0;
height: 0;
}

Pattern28

css
h1 {
font-size: 24px;
text-align: center;
position: relative;
padding: 0 30%;
}
h1:before {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 30%;
height: 2px;
border-top: solid 1px #545454;
border-bottom: solid 1px #545454;
left: 0;
}	
h1:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 30%;
height: 2px;
border-top: solid 1px #545454;
border-bottom: solid 1px #545454;
right: 0;
}

Pattern29

css
h1 {
position: relative;
display: inline-block;
font-size: 24px;
text-align: center;
width: 100%;
}
h1:before {
content: '';
position: absolute;
bottom: 0px;
width: 60px;
height: 2px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
}

Pattern30

css
h1 {
position: relative;
display: inline-block;
padding: 5px 20px;
font-size: 24px;
text-align: center;
width: 100%;
}
h1:before {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
left:0;
}
h1:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
right:0;
}

Pattern31

css
h1 {
position: relative;
padding: 5px 20px;
border-top: solid 2px black;
border-bottom: solid 2px black;
font-size: 24px;
}
h1:before {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
left:7px;
}
h1:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
  height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
right:7px;
}

Pattern32

css
h1 {
position: relative;
padding: 5px 10px;
display: inline-block;
font-size: 24px;
}
h1:before {
content:'';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
h1:sfter{
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom:0;
right: 0;
}

Pattern33

css
h1 {
position: relative;
padding: 5px 10px;
display: inline-block;
top:0;
font-size: 24px;
width: 100%;
text-align: center;
}
h1:before {
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
h1:after{
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
}

Pattern34

css
h1 {
position: relative;
padding: 5px 10px;
display: inline-block;
top:0;
font-size: 24px;
width: 100%;
text-align: center;
}
h1:before {
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
border-top: dotted 1px #535aaa;
border-left: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
left: 0;
}
h1:after{
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
border-top: dotted 1px #535aaa;
border-right: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
right: 0;
}

Pattern35

css
h1 {
font-size: 24px;
}
h1:first-letter {
font-size: 36px;
color: #7172ac;
}

Pattern36

css
h1 {
position: relative;
padding: 5px 10px;
font-size: 24px;
}
h1:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

Pattern37

css
h1 {
position: relative;
padding: 5px 10px;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545454;
font-size: 24px;
}

Pattern38

css
h1 {
position: relative;
padding: 5px 10px;
background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
font-size: 24px;
}

Pattern39

css
h1 {
position: relative;
padding: 5px 10px;
background: -moz-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
font-size: 24px;
}

Pattern40

css
h1 {
position: relative;
padding-left: 30px;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f00c";
font-weight: bold;
position: absolute;
left: 0;
top: 0;
color: #5ab9ff;
}

Pattern41

css
h1 {
position: relative;
padding: 5px 10px 5px 30px;
color: #ff6a6a;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f138";
font-weight: bold;
position: absolute;
left: 0px;
color: #ff6a6a; 
}

Pattern42

css
h1 {
position: relative;
display: inline-block;
font-size: 24px;
}
h1:before {
position: relative;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 10px;
color: #ff6a6a;
content:"f053";
padding-right: 5px;
}
h1:after {
position: relative;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 10px;
color: #ff6a6a;
content:"f054";
padding-left: 5px;
}

Pattern43

css
h1 {
position: relative;
padding-left: 12px;
font-size: 24px;
}
h1:before {
 font-family: "Font Awesome 5 Free";
content: "f075";
font-weight: bold;
position: absolute;
left: 0;
color: #5ab9ff;
}

Pattern44

css
h1 {
position: relative;
color: white;
background: #81d0cb;
padding: 5px 10px 5px 30px;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f14a";
font-weight: bold;
position: absolute;
left : 5px;
}

Pattern45

css
h1 {
position: relative;
padding-left: 30px;
color:#153c6e;
font-size: 24px;
}
h1:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "f121";
font-weight: bold;
background: #c9e2ff;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Pattern46

css
h1 {
position: relative;
color: black;
background: #d0ecff;
padding: 5px 10px;
border-radius: 0 5px 5px 5px;
font-size: 24px;
margin-top: 40px;
}
h1:before {
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: bold;
content:'f00c Check';
background: #2196F3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 17px;
line-height: 1;
letter-spacing: 0.5;
}

Pattern47

css
h1 {
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
padding: 5px 10px;
font-size: 24px;
margin-top: 40px;
}
h1:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: 'f0a7 POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 17px;;
line-height: 1;
letter-spacing: 0.5;
}

Pattern48

css
h1 {
position: relative;
background: #f1f8ff;
border-left: solid 2em #5c9ee7;
padding: 5px 10px;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f303";
font-weight: bold;
position: absolute;
padding: 0em;
color: white;
left: -36px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Pattern49

css
h1 {
position: relative;
padding-left: 35px;
font-size: 24px;
}
h1:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "f0eb";
background: #ffca2c;
color: white;
font-weight: normal;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h1:after {
content: '';
display: block;
position: absolute;
left: 20px;
height: 0;
width: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffca2c;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Pattern50

css
h1 {
position: relative;
background: #ffd98a;
padding: 2px 5px 2px 25px;
font-size: 24px;
color: #474747;
border-radius: 0 10px 10px 0;
margin-left: 15px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f0eb";
font-weight: bold;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ffa337;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -20px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;
}

Pattern51

css
h1 {
position: relative;
background: #f5f5f5;
padding: 2px 5px 2px 25px;
font-size: 24px;
color: #474747;
border-radius: 0 10px 10px 0;
margin-left: 15px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f0eb";
font-weight: bold;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -20px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;
}

Pattern52

css
h1 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 25px;
font-size: 24px;
color: #474747;
border-radius: 0 10px 10px 0;
margin-left: 15px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f0eb";
font-weight: bold;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -20px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}

Pattern53

css
h1 {
position: relative;
padding-left: 20px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f246";
font-weight: bold;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: silver;
-webkit-animation:blink 0.5s ease-in-out infinite alternate;
-moz-animation:blink 0.5s ease-in-out infinite alternate;
animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

Pattern54

css
h1 {
position: relative;
padding-left: 20px;
color: #ffa7a1;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f246";
font-weight: bold;
position: absolute;
left: 0;
}

Pattern55

css
h1 {
position: relative;
padding: 5px 10px;
margin-left: 30px;
background: #def3ff;
border-radius: 20px;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f0eb";
font-weight: bold;
position: absolute;
font-size: 30px;
left: -30px;
bottom: 0;
color: #def3ff;
}

Pattern56

css
h1 {
position: relative;
padding-left: 30px;
color: #7b6459;
font-size: 24px;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "f1b0";
font-weight: bold;
position: absolute;
left: 0;
color: #ff938b; 
}

Pattern57

css
h1 {
position: relative;
color: #333333;
margin: 47px 0;
text-shadow: 0 0 2px white;
text-align: center;
font-size: 24px;
z-index: 1;
}
h1:before {
content: "";
position: absolute;
background: #a9e1ff;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
border: dashed 1px white;
left: 50%;
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
box-shadow: 0px 0px 0px 5px #a9e1ff;
}

Pattern58

css
h1 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
font-size: 24px;
z-index: 1;
padding-left: 20px;
}
h1:before {
content: "";
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
left: 0;sform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
left: 0;
}

Pattern59

css
h1 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
background: #e0f3ff;
z-index: 1;
border-radius: 0 10px 10px;
font-size: 24px;
padding: 4px 10px 4px 20px;
margin-left: 12px;
}
h1:before {
content: "";
position: absolute;
background: #9de5ff;
width: 60px;
height: 60px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
left: -12px;
}

[/sociallocker]