Some Beautiful Heading CSS Codes for WordPress

As you know, Heading Plays a very important role in blogging. If you make the Heading attractive, it makes your blog very beautiful. All you have to do is paste the CSS codes in the customize section of your WordPress dashboard.

Here I am sharing some Beautiful Heading CSS codes for WordPress, Manually you can easily change the fonts, Colour and Font Size.

Don you know What are Large, Medium & Small Caps in Stock Market

Normal Blue Heading

http://www.iamrajkakkar.com

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


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


Gradient Heading

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

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


Curved Corner

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 like Heading CSS Codes for WordPress, for any help you can ask in comment box

Raj Kakkar

Raj is a Trader & Blogger by Passion. He loves to spread the information that helps to learn new skills...<a href="http://www.iamrajkakkar.com">Let's Succeed Together</a>

Leave a Reply

Your email address will not be published.