Hello, dear weblog reader! today I have a few CSS codes that allow you to make your weblog stunning. You realize headings are the maximum critical part of blog content, so why do you're making it dull? Certainly reproduction below CSS codes underneath and paste them into your submit editor section.
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.
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>