Right here we've got shared my satisfaction with the exceptional 6 stylish heading CSS codes. You could manually trade the colors, font length, shadows, and something you need.
 |
| © Copyright 2024 Tecky AaryaN |
You can see the demo here⤵
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>
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>
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>
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>
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>
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>
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>
Final Word
Wish you may like those CSS codes. for greater like this. if you need more CSS heading then really ask in the remark container, I’ll be again with greater new and fashionable heading CSS.
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
