TOP 7 Stylish Heading CSS for WordPress & Blogger

12
2723

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

1Normal Blue Heading

Stylish Heading CSS
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;
}

2Left Border

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

3Stylish Gradient Heading CSS

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

4Stylish Curved Corner

Stylish 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;
border-left: 20px solid #ff5f00;
border-right: 20px solid #ff5f00;
border-radius: 5px 55px 5px 55px;
}

5Side Rounded

Stylish 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;
border-left: 20px solid #ff0077;
border-right: 20px solid #ff0077;
border-radius: 55px;
}

6Stylish Check Mark

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

7Double Border

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

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!

12 COMMENTS

  1. yes but one problem, this CSS default apply to the homepage I want to exclude the homepage, can u help me to fix this?

  2. 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…..

  3. 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?

LEAVE A REPLY

Please rate
Please enter your comment!
Please enter your name here