Create Gradient Header using CSS

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags with 2 Comments on Create Gradient Header using CSS

Create a Gradient effect in heading tag of HTML using simple CSS trick

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