Using Color Gradients in CSS3

Using Color Gradients in CSS3

Since the introduction of CSS3, it has been possible to use color gradients as a background, with 2 or more colors gradually fading into each other. Previously, creating gradients had to be done using Photoshop or other image editing software. Used effectively, this is a great way to add interest and even texture to webpage designs, beyond just static background colors. While legacy versions of Internet Explorer do not support this feature, you can safely add them to a project, as all modern browsers do support it. This post will take a look at using gradient backgrounds, and the available customization options.

Basic Linear Gradients

To set the background of an element (whether it be the body, a div, or other element), the background property is used, typically with a color value:

body {
  background: #fffbed;
}

 

To use a linear gradient instead of a solid color, include at least two colors (using either hex, rgb, hsl, or named colors values), separated by commas, inside of the linear-gradient() value:

body {
  background: linear-gradient(#fffbed, #45add3);
}

CSS3 Color Gradients

Vendor prefixes

Since different browsers handle the linear-gradient value differently, it is highly recommended to use vendor prefixes along with it. This will ensure that the value is understood by Safari, Firefox, Chrome, and Opera. To use vendor prefixes, simply add 2 additional background rules with the linear-gradient value prefixed with -webkit- and -moz-. They should also appear before the regular rule without any vendor prefix:

body {
  background: -webkit-linear-gradient(#fffbed, #45add3);
  background:    -moz-linear-gradient(#fffbed, #45add3);
  background:         linear-gradient(#fffbed, #45add3);
}

 

It’s a bit extra typing, but it ensures that your gradients will be supported across all major browsers.

Controlling direction

By default, gradients will transition from top to bottom, with the first color included in the linear-gradient value being the top color.

You can change the direction of the gradient, though, by adding some direction keywords before the colors (i.e. to top, to bottom, to right, to left, to right top, etc.)

body {
  background: linear-gradient(to right bottom, #fffbed, #45add3);
}

 

When setting the direction to a corner, either the x- or y- axis can be stated first (i.e. to right bottom and to bottom right are the same).

Multiple colors

You can utilize more than two colors in a gradient, simply by comma separating them:

body {
    background: linear-gradient(#eaecee, #abebc6, #45add3);  
}

or

body {
  background: linear-gradient(#eaecee, #ebdef0, #f4f6f7, #abebc6, #4eb39d, #45add3);
}

 

Color Stops

Sometimes you will want to control where a certain color begins, allowing for certain colors to take up more space or have a wider space to transition. To add these “color stops”, just add a percentage value after a given color, to designate where that color should begin:

body {
    background: linear-gradient(#eaecee, #abebc6 30%, #45add3 %80);
}

 

This is great for having finer control over your transitions, and can be used for interesting effects.

Radial Gradients

One available variation on linear gradients are radial gradients. Radial gradients will transition from the center of the element, transitioning outward like a circle. They use almost the exact same syntax as linear gradients, just with the radial-gradient value instead:

body {
  background: radial-gradient(#eaecee, #45add3);
}

CSS3 Color Gradients

 

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC