How to Create Dynamic Color Gradients for Web Site Background
Color gradients are images in which one color gradually shifts to a different color. In web design, they serve as creative ways of making your website stand out without being obnoxious. They can make good backgrounds if a solid color is too boring and an image would be too distracting. Many advanced image editors--some free--can create gradients on the fly and utilizing them on your website is simple and straightforward.
Other People Are Reading
Instructions
-
-
1
Download and install the program Gimp from Gimp.org. Gimp is a freeware competitor to advanced image editors such as Photoshop.
-
2
Open the Gimp. After a brief loading period, a large vertical toolbar should appear. Halfway down should be two colors, one on top of the other.
-
-
3
Click on the first color. A dialog box should pop up allowing you to select any color you want. When you've found a color to your liking, press "OK."
-
4
Click on the second color and repeat the process. The goal is to create a starting color and an ending color for the gradient.
-
5
Click on the "Blend" tool on the toolbar, an icon that looks like a grayish gradient. It's next to the Paint Bucket icon.
-
6
Click on the "File" button and then select "New." Select a width and height and press "OK." A new, blank image file should open.
-
7
Click and hold somewhere on the blank image, then drag your mouse to a different point on the image. Release your mouse. The image should turn into a color gradient; the mouse's starting point will be where the first color starts turning into the second color; the mouse's ending point will be where the second color is reached and the gradient ends.
-
8
Save the file and upload it to your web server.
-
9
Open your website's style sheet and add the following rule:
body { background-image:url('YourSite.com/YourImageUrl.jpg'); }
If you don't have a style sheet, open your homepage and add the following code in the <head> section:
<style type="text/css">
body { background-image:url('YourSite.com/YourImageUrl.jpg'); }
</style>Make sure to change the URL to your website and image's address.
-
10
Save the file and check your website in a browser. The gradient should now appear as your website's background.
-
1
