1. Homepage
  2. CSS
  3. TOP 7 Stylish Heading CSS for WordPress & Blogger

TOP 7 Stylish Heading CSS for WordPress & Blogger


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

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

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

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

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

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

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

Double 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!

About Author

RipoN is a YouTuber by Hobbie and Blogger by Passion. He Loves to spread information that helps others to lives in this Digital World.

Write a Comment

Comments (18)

  1. 3 years ago

    Awesome post

  2. 3 years ago

    Nice post
    Is it possible to use on Blogger

  3. 3 years ago

    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 years ago

      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

      • 2 years ago

        after posting this above comment i am seeing that my html code is not appearing properly, Admin can work on this.

  4. 2 years ago

    sir can i know what is good font and font size for blog posts.

  5. this CSS default applies to the whole website want to exclude the homepage, can u help me to fix this?

  6. 2 years ago

    More Please

  7. 2 years ago

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

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

  9. How to upload? Can we upload it in schema lite theme?

  10. Esy website may problem tho nhai Gahy gha sir

  11. thanks for this Stylish Heading CSS

  12. Possible way to add dark mode

  13. thanks for code, i also used in this my website:

    NEB Notes

Leave a Reply

Your email address will not be published. Required fields are marked *