Best Stylish 6 Heading CSS For Blogger - RehmanWeb

Welcome to RehmanWeb in this post i am giving 6 best stylish heading CSS you can easily add this stylish CSS on blogger post heading or anywhere on blogger.

These stylish CSS Headings will make your blog most looking good so follow a few steps to add these CSS Headings on your blog.

How To Add CSS on Your Blog Post, Page or Anywhere?

Simply go to create a new post in Title write your post title then click on pencil icon left side your post editing and change Compose view to HTML view then copy and paste the following any stylish heading CSS and past it on your blog.

Note: Must change (Your Heading Text Here) to your own heading title.

Then click on Publish and see your post Heading you will see your new stylish heading on your blog.

CSS 1. Normal Blue Heading:

Preview

Your Heading Text Here

Code

<h2 style="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;">Your Heading Text Here</h2>

 

CSS 2. Left Border Heading

Preview

Your Heading Text Here

Code

<h2 style="background: rgb(101, 66, 237); border-left: 20px solid rgb(0, 0, 0); box-shadow: rgb(202, 201, 201) 0px 2px 10px 0px; color: white; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.7em; padding: 10px; text-align: center; user-select: none;">Your Heading Text Here</h2>

 
CSS 3. Gradient Heading

Preview

Your Heading Text Here

Code

<h2 style="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;">Your Heading Text Here</h2>

 

CSS 4. Curved Corner Heading

Preview

Your Heading Text Here

Code

<h2 style="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;">Your Heading Text Here</h2>

 

CSS 5. Solid Shadow Heading

Preview

Your Heading Text Here

Code

<h2 style="font-weight: 600; font-size: 18px; background:#333; margin:5px 4px 5px 0; padding:9px 0 9px 10px; border:0; color:white; line-height:1.7em; text-decoration:none; text-transform:uppercase; box-shadow:4px 4px 0px rgba(33,33,33,0.45);">Your Heading Text Here</h2>

 

CSS 6. Side Rounded Heading

Preview

Your Heading Text Here

Code

<h2 style="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;">Your Heading Text Here</h2>

If you need any types of codes comment below or contact me RehmanWeb will provide for you. Don't forget to share this post with friends.

Thank You!