7 Best Stylish Heading CSS for WordPress & Blogger

Today in this article we have shared Best Stylish Heading CSS for WordPress & Blogger codes by which you can make your website headings unique and stylish. Which will make your website Beautiful.

Here below we have shared the Best of the best and my personal favorite 7 Stylish Heading CSS Codes. You can also Manually Change the Colors, Font Size, Shadows, and anything you want according to your choice.

Simply Just copy-paste the CSS in your WordPress Website or Blogger and make the Headings (boring looking though the most important part of the website) Unique and Beautiful.

If you don’t know How to Add Custom CSS to WordPress Or Blogger? Then Checkout these links: WordPress | Blogger

1. Simple Yet Elegant Blue Heading CSS

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

2. Gradient Heading CSS

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

3. Left Border Heading CSS

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

4. Curved Corner Heading CSS

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

5. Side Rounded Heading CSS

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

6. Double Border Heading CSS

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

7. Stylish Check Mark Heading CSS

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

Hope you will like these Best Stylish Heading CSS for WordPress & Blogger. For more, do check our website on regular basis for free WordPress Themes, Plugins, Blogger Templates Scripts, etc.

5/5 (1 Review)

Leave a Comment