CSS Gradients: An Introduction

This article will cover CSS gradients and take a took at some real-life uses for them.

Most of the time we use solid background colors to style our web application, using the background property. There is actually more to the background property, as it is a shorthand for many different properties including:

• background-image – can set a background image or generate a color gradient (we will talk about this!)
• background-position – can set the position of the background image
• background-size – sets the size of the rendered background image
• background-repeat – can set the ‘repeat’ property of the image in order to fill the entire element
• background-origin – can set the background positioning, being relative to the element’s border-box, padding-box or content-box
• background-color – sets a specific background color which will render behind any set background image

While using some of these single properties, we should also keep in mind that if we at a later time style elements with the background property, we will reset all the others back to their initial value. We should instead write individual properties unless we are definitely sure that we won’t override them later.

Background-image and CSS gradients

We usually use background-image property to accept a path to an image URL (background-image: url(url-to-image.png) in order to set the image as the element’s background. But the background-property actually serves one additional use – we can define gradients, which are actually extremely useful effects. Let us see them in use:

  <div class="image-wrapper wrapper-1">
    <span>Two-Color linear gradient</span>
    <img
      src="https://i.pinimg.com/originals/02/c5/13/02c5130828505d0365ca6afdb047c888.png"
    />
  </div>
  <div class="image-wrapper wrapper-2">
    <span>Two-Color linear gradient with an angle</span>
    <img
      src="https://i.pinimg.com/originals/02/c5/13/02c5130828505d0365ca6afdb047c888.png"
    />
  </div>

.image-wrapper {
  position: relative;
  border-radius: 12px;
  border: 1px solid black;
  height: 300px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

span {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  font-size: 14px;
  color: white;
}

.wrapper-1 {
  background: linear-gradient(#e66465, #9198e5); /* linear gradient example */
}

.wrapper-2 {
  background: linear-gradient(45deg, #e66465, #9198e5); /* linear gradient example */
}

The two listing above would produce the following two images:

The linear-gradient function used above consists of three basic parameters that define its behavior: angle, starting color, and ending color. In the first example (the basic two-color linear gradient) we omitted the angle so the style was automatically reverted to the default top to bottom angle.

The second example actually has a set angle of 45 degrees, and it visually appears to be different than the first – even though they use the same colors! We can set gradient angles using several different controls. For example, by using predefined keywords such as to top, to bottom, or even a corner such as to bottom right. In each of these cases, the gradient would start from the top, from the bottom, or from the bottom-right corner of the element.

In the second example above, using a precise angle, we used degrees as the unit. 0deg would be equivalent to the to top command, and by increasing the degree value we would move the gradient clockwise around the circle. We can also use rad (or radians), turn (turns) or grad (gradians). For more information about angles, please click here.

Multiple color stops

Now let us take a look at this:

.wrapper-3 {
  background: linear-gradient(45deg, #e66465, #9198e5, #12045b, #1afe49);
}

.wrapper-4 {
  background: linear-gradient(
    45deg,
    #e66465 0%,
    #9198e5 20%,
    #12045b 40%,
    #1afe49 80%
  );
}

Which would produce the following (.wrapper-3 is the left image, while .wrapper-4 is the right image in the listing):

Above we defined gradients using more than two colors, each of which are called color stops. The listing above has a gradient function that accepts four colors. New colors can be simply inserted by adding them to the linear-gradient function. We can add any number of colors, separated by a comma, and the function will spread them evenly. We can additionally explicitly set the position of the color stops, and they do not need to be evenly spaced.. Instead of percentages, we could also use pixels, ems, and any other length units.

Hard stops and repeating linear gradients

.wrapper-5 {
  background: linear-gradient(90deg, green 33%, white 33%, white 66%, red 66%);
}

.wrapper-6 {
  background-image: repeating-linear-gradient(
    90deg,
    blue 20px,
    salmon 40px,
    red 80px,
    blue 120px
  );
}

Above inside the .wrapper-5 block we set the colors inside the linear-gradient() function at the same position. This will have the effect of instant switch between colors, rather than a smooth transition.

We created the left image (having the appearance of the Italian flag) using hard stops. The right image is created using a new function – repeating-linear-gradient() in which – wait for it – the pattern repeats, alternating between blue, salmon, and red colors.

Radial and repeating radial gradients

.wrapper-7 {
  background-image: radial-gradient(red, black);
}

.wrapper-8 {
  background-image: repeating-radial-gradient(
    circle,
    red 0,
    red 30px,
    black 30px,
    black 60px
  );
}

We have created some really cool effects above, using a new type of gradient or the radial-gradient. This type of gradients starts at a single point and proceeds outward in all directions. By default, it is centered, and transitions evenly to every corner. We can also change the appearance of the radial gradient, by specifying where the gradient should be centered, or by making the gradient a circle rather than an ellipse. On the right, we used the repeating-radial-gradient() function in order to repeat the pattern in concentric rings.

Final Words

Gradients can be a lot more expressive and complex and in this article, we only mentioned the basics of using them. For a more detailed explanation, you can visit the official developer documentation forlinear-gradient() here, for radial-gradient() here, and from there you can start exploring the concepts more deeply.

Here we have our codepen for this article:

See the Pen CSS Gradients by Mehmed (@brachika) on CodePen.

Please check other blog posts on thedukh.com. For more CSS articles click on one of the links below:

• What is Modular CSS?
• How to use shadows in your CSS
• CSS Gradients: An Introduction
• On CSS Shorthand Properties
• CSS Inheritance in more detail
• How do CSS cascades work?
• Changing states using 2D CSS transformations
• Creating cool CSS button effects using transitions
• App performance is important! Media Queries!
• App performance is important! Shrinking files and optimizing images.