Web Development

CSS3 Rainbow Background

CSS3 Rainbow Background is the section 4 of Basics of CSS3.

As we have promised in the previous section, throughout this article we are going to describe about the coloring techniques to make your background looks cool. If you can remember we have talked about the usage of images in the background in the previous section. If you prefer of having a image on your background, just click there.

So what we are actually going to do is learning to make a rainbow colored background. Just not a solid colored as we know how to do that already.

CSS3 gradients let you display smooth transitions between two or more specified colors. So now on you do not need Photoshop to create gradient images for your background, because CSS3 can support to make just the same thing in a simple code.  This grants you to reduce download time and the bandwidth usage of the web page. And the other advantage is, elements with gradients look better when zoomed, because the gradient is generated by the browser.

There are two ways to add gradients in CSS3.

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

CSS3 Linear Gradients

Here is the syntax of defining a linear gradient background.

background: linear-gradient(direction, color-stop1, color-stop2, …, last-color);
Using Direction Name

To create a linear gradient you must define at least two color stops. Also you can add more than two color stops too. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Following describes direction names such as to bottom, to top, to right, to left, to bottom right, to bottom left, to top right, to top left with just a two color gradient.

This is the default direction which is top to bottom that do not need the direction name.

This linear gradient starts at the top. It starts red, transitioning to blue.
[code language=”css”] #my_grad1 {
background: linear-gradient(red, blue);

Let’s look at all the directions CSS3 supports.

[code language=”css”] #my_grad2 {
background: linear-gradient(to right, red, blue);
#my_grad3 {
background: linear-gradient(to bottom right, red, blue);
This linear gradient starts at the left. It starts red, transitioning to blue.

Special thing about the diagonal direction is you can make a gradient diagonally by specifying both the horizontal and vertical starting positions. If you want to flow your first color starting from top left and end color transition to bottom right, you must mention the “to bottom right” direction value in the code snippet.

This linear gradient starts at top left. It starts red, transitioning to blue.
Using Direction Angle

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined direction names. The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a bottom to top gradient, while 90deg generates a left to right gradient.

Using Multiple colors

As we said earlier, this is not just a two color thing. We can have a rainbow of colors in there. Also we can define what percentage of the color should apply there. For example having more redish than bluish on the background.

Red, Green, Blue – evenly distributed
Red, Green, Blue – distributed by percentage
My Rainbow of Colors

Just think about having something like this.

My Gradient Background
Using Transparency

CSS3 gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

Left side is Transparent
[code language=”css”] div{
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Repeating a linear-gradient

Using this value function we can repeat our rainbow colored pattern repeatedly on the background.

[code language=”css”] div{
background: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 Radial Gradients

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops same as the linear gradients.

Here is the syntax of defining a radial gradient background.

background: radial-gradient(shape size at position, start-color, …, last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

default ellipse
[code language=”css”] div {
background: radial-gradient(red, green, yellow);

As the linear gradient we can evenly distribute the colors on the radial or use a percentage to define how much of color should apply.

Shape Parameter

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

[code language=”css”] div {
background: radial-gradient(circle, red, green, yellow);
Size Parameter

The size parameter defines the size of the gradient. It can take four values:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
closest-side at 60% 55%
farthest-side at 60% 55%
closest-corner at 60% 55%
farthest-corner at 60% 55%

Repeating a radial-gradient

Like as the linear gradient, we can repeat the circles again and again repeatedly on the background using this value function. code snippet is goes as follows.

[code language=”css”] div{
background: repeating-radial-gradient(red, yellow 10%, green 15%);

So in this tutorial what we basically learned was varying coloring techniques on a background. So here after we can have shaded backgrounds on our web site. This is the end of the background business and in the next section we are going to look at what are the text and font effects that CSS3 has offers.



Explore CSS3 Text Effect.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.