TOP 6 Stylish Heading CSS for WordPress & Blogger 2022

November 15, 2022 by Likebd

Heading are important for website.You can give best look using css.I give total 6 best css.That you can use your website.The css are help to make your site heading unique.Just copy the css code and past your heading css page.

Stylish Heading CSS for WordPress & Blogger

Blue Color Heading

h2 {
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;
}

Corner Heading CSS

h2 {
font-weight: 600;
font-size: 18px;
background: #6542ed;
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: 20px solid #000;
}

Stylish Color Heading CSS

h2 {
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;
}

Curved Corner Heading CSS

image 9 -

h2 {
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;
}

Rounded Corner Heading CSS

image 10 -

h2 {
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;
}

Check Symbol Heading CSS

h2 {
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;
h2 {
background-attachment: scroll;
background-color: #fff;
background-image: url('http://1.bp.blogspot.com/-hSWWgNO_pOs/VOToQXw_wmI/AAAAAAAABsU/SYUSJONNRQM/s1600/h3.png');
background-position: 5px 40%;
background-repeat: no-repeat no-repeat;
border: 2px solid #53b800;
border-radius: 80px 80px 80px 80px;
box-shadow: 0 2px 5px 0 #c7c7c7;
color: #000;
font-family: lato;
font-size: 16pt;
font-weight: 600;
line-height: 20px;
list-style: none outside none;
margin: 13px -20px;
outline: medium none;
padding: 10px 10px 10px 35px;
text-transform: capitalize;
vertical-align: baseline;
}

Bonus Heading CSS

h2 {
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;
}

Thanks For All.Hope this css are help you.If you need more CSS headings, ask in the comments box. Provides newer, cleaner CSS for headings.

Leave a Comment Cancel reply