Website Tools Graphics Tools Seo Tools Network Tools Other Tools
Bookmark and Share

Graphics Tools » Generate background gradient images for css designs

The css gradient image generator lets you quickly create gradient images to use in your css designs.

Common uses include for navigation bars, or for adding a gentle fade on your web page background into the actual background colour 3/4 or more down the page.
Create a background gradient graphic

Get css for this image / download image
CSS to use this gradient as a background image

To use this gradient image as a background image in your design you can just copy the css style rule into your stylesheet for the element you want to add the background to. For example, to use this as the background image for the body of your html document, you could use the style: 

body {
	background: url(http://g.phpace.com/30/003366/aaaaff/v) repeat-x;
}

The image itself is 1x30 pixels (to make it as small as possible) and the css rule above will result in it being repeated across your page to fill the specified area.

If you plan to use this image on a high-traffic website please do not use the image hosted on g.phpace.com, but instead download it here.

Graphics Tools

Bulk Image Converter Batch resize, convert and watermark images. Supports uploading a zip archve of images
Gradient Maker Make great looking gradient images to use in your website design