Home arrow HTML arrow Gradient Creation with the HR Element

Gradient Creation with the HR Element

Gradient can mean many things, depending on the subject. Here, I am talking about the gradient you see in pictures, images, web pages and works of desktop publishing. When you see an image where a line is slowly changing color as your eye moves from one position to another, that area of the image is a gradient. This article will go over implementing gradients with the HR element.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
May 21, 2008
  1. · Gradient Creation with the HR Element
  2. · Horizontal Gradient
  3. · Vertical Gradient
  4. · Application
  5. · Resolution

print this article

Gradient Creation with the HR Element
(Page 1 of 5 )

The following figure gives eight examples of gradients.


Fig.1 Different Gradients


The pixel is the smallest dot that can be displayed on a computer screen (monitor). Consider it the smallest square that can be shown on the screen. It can have a color (red, purple, yellow, green, etc.). The pixel is denoted by px in CSS.

For the rest of this article, I will assume that you have a basic knowledge of HTML, CSS, and JavaScript.


An ideal gradient is made up of unidentifiable lines whose colors change from one position to another. If you do not understand the basics of color composition and how it is represented in HTML, then see one of my previous articles, which is called "Color Composition and HTML." You do not need to be good in physics or engineering to understand either that article or this one; all you need is basic knowledge of HTML, CSS, and JavaScript.

The HR Element

The HR element is meant for drawing lines on a web page.

The basic tag used to draw a line is <hr>.

If you type this in the body of an HTML file, you should see a line when the file is opened. You give dimensions to the line using Cascading Style Sheets. The following code produces a line of width: 500px and height: 10px, with a blue color.



<style type="text/css">

hr {width:500px; height:10px; color:blue}







You can have lines with different dimensions (e.g. of width:500px and height:10px, also of 400px by 5px, 1px by 1px in rectangles).

Drawing Gradients

The secret to drawing gradients using the HR element is to draw consecutive lines (no space between them) whose colors change slowly from one position to another.


We shall use absolute positioning when drawing the lines. With absolute positioning, the top-left corner of the client area of your web page has the coordinates 0px, 0px and the measurement starts from there. Going to the right of the client area makes the x-coordinate more positive and going down makes the y coordinate more positive. So the HR syntax in the Style Sheet of this article will always begin with...

hr {position:absolute ...

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials