Hey, Wassap Buddies! Today I have some CSS codes which will make your blog beautiful. You know Headings are the most important part of blog content, So why you make it boring? Simply Copy Below CSS codes below and paste them into your Theme’s Style.css Section.
Here We have shared my Best of the best 7 Stylish Heading CSS Codes. You can Manually Change the Colors, Font Size, Shadows and anything you wants.
If you don’t know How to Add Custom CSS? Then Checkout these links: WordPress | Blogger
Normal Blue 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;
}
Left Border

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 Gradient 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;
}
Stylish Curved Corner

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;
}
Side Rounded

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;
}
Stylish Check Mark

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;
}
Double Border

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;
}
Hope You will like these CSS Codes. For More Like this, You can Check My entire CSS Code Collection. If You need more CSS Heading Then simply ask in the Comment box, I’ll be back with more new and stylish Heading CSS.
Thank You!
Awesome post
Thanks, Buddy! Hope you will give a share to your friends!
Nice post
Is it possible to use on Blogger
yes but one problem, this CSS default apply to the homepage I want to exclude the homepage, can u help me to fix this?
So you have to add a class name in the html of home page, and target using the class name, apply the css.
eg:
html
hello
css
h2.heading {
font-weight: 600;
font-size: 18px;
background: #a4aafc;
color: #fff;
etc etc
}
hope you find,, else search in stackoverflow
after posting this above comment i am seeing that my html code is not appearing properly, Admin can work on this.
sir can i know what is good font and font size for blog posts.
14pt is the ideal size of the font used by most blogs.
this CSS default applies to the whole website want to exclude the homepage, can u help me to fix this?
Please see the CSS Tag used in Only Single page like .Content .Main
Then add
.content h2 {
rest of the code
}
More Please
Hii sir,
I am Manish and I am your very very…… Big fan. So please read this comment.
Sir mai aapka har video dekhta hu aur itna hi nahin per day wait karta hu new video dikhane ke liye. Chahe aap kitna bhi video dalo mujhe kam lagta he.
Meri ek request thi aisi cideing I mean code category me aur post likhe. Please…..
Error in “Stylish Check Mark”
Use below code
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;
}
————————————————————————
One question using this stylish headings make my website heavy or it’s normal?
How to upload? Can we upload it in schema lite theme?
Esy website may problem tho nhai Gahy gha sir
thanks for this Stylish Heading CSS
Possible way to add dark mode
thanks for code, i also used in this my website:
NEB Notes