Create Gradient Header using CSS

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout.

Create attractive headers in HTML using CSS
Create attractive headers in HTML using CSS

Heading tags (H1 through to H6) are given more weight by search engines than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO

I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html Output will look like image shown.

First we need to add a div tag to our html page to put header on it.

Css for div:

#container {
	background: #6699FF;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;

We will use this as

Css for Header Tag..

h1 {
	 background: red;             /*Background color to header*/
	 background: -moz-linear-gradient(top, red, FFFFFF);
              /*from to colors, I have used simple name it can be replaced by color codes*/
	 background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
	 padding: 10px 20px;
	 margin-left: -20px;
	 margin-top: 0;
	 position: relative;
	 width: 70%;
       /*from droping box shadow at the bottom of header*/
	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
                 box-shadow: 1px 1px 3px #292929;
	color: #454545;
	text-shadow: 0 1px 0 white;

Arrow class for dropping shadow.

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;

Now just create a html Page and put a header and you have done assuming that you have written css in separate file named jstyle.css.

<html >
    <link rel="Stylesheet" type="text/css" href="jstyle.css" />
	<title>CSS Header</title>
	 <div id="container">
		<h1> H1 - Heading <span class="arrow"></span> </h1>

Live Demo of CSS Header

Note: This will not work on browsers which does not support CSS3.

About Author:
Jayant Bramhnakar
Sr. Web Developer
Sahyadri Technologies Pvt. Ltd(Satara)





Related Posts


2 responses to “Create Gradient Header using CSS”

  1. […] 25. Create Gradient Header using CSS […]

  2. satya Avatar


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading