CSS Gradients: An Introduction
Tags: css, html, codenewbie
Published: 2021-05-14 21:04:12

<!-- wp:paragraph {"style":{"typography":{"fontSize":10}}} -->
<p style="font-size:10px">This article will cover CSS gradients and take a took at some real-life uses for them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Most of the time we use solid background colors to style our web application, using the <code>background</code> property. There is actually more to the <code>background</code> property, as it is a shorthand for many different properties including:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>background-image</code> - can set a background image or generate a color gradient (we will talk about this!)</li><li><code>background-position</code> - can set the position of the background image</li><li><code>background-size</code> - sets the size of the rendered background image</li><li><code>background-repeat</code> - can set the 'repeat' property of the image in order to fill the entire element</li><li><code>background-origin</code> - can set the background positioning, being relative to the element's <code>border-box</code>, <code>padding-box</code> or <code>content-box</code></li><li><code>background-color </code>- sets a specific background color which will render behind any set background image</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>While using some of these single properties, we should also keep in mind that if we at a later time style elements with the <code>background</code> property, we will <a href="https://thedukh.com/2021/04/on-css-shorthand-properties/" target="_blank" rel="noreferrer noopener">reset all the others back to their initial value</a>. We should instead write individual properties unless we are definitely sure that we won't override them later.</p>
<!-- /wp:paragraph -->

# Background-image and CSS gradients

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

```html
  <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>
```

```css
.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 */
}
```

<!-- wp:paragraph -->
<p>The two listing above would produce the following two images:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2578,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://thedukh.com/wp-content/uploads/2021/05/gradients1.png" alt="CSS Gradients Example - Using Two-Color Linear Gradients" class="wp-image-2578"/><figcaption>CSS Gradients Example - Using Two-Color Linear Gradient</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The <code>linear-gradient</code> 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 <em>top to bottom angle</em>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <code>to top</code>, <code>to bottom</code>, or even a corner such as <code>to bottom right</code>. In each of these cases, the gradient would start from the top, from the bottom, or from the bottom-right corner of the element. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the second example above, using a precise angle, we used <em>degrees</em> as the unit. <code>0deg</code> 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 <code>rad</code> (or radians), <code>turn</code> (turns) or <code>grad</code> (gradians). For more information about angles, please click <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle" target="_blank" rel="noreferrer noopener">here</a>.</p>
<!-- /wp:paragraph -->

# Multiple color stops

<!-- wp:paragraph -->
<p>Now let us take a look at this:</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:paragraph -->
<p>Which would produce the following (<code>.wrapper-3</code> is the left image, while <code>.wrapper-4</code> is the right image in the listing):</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2588,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://thedukh.com/wp-content/uploads/2021/05/gradients2.png" alt="CSS Gradients Example -Multi colored gradients" class="wp-image-2588"/><figcaption>CSS Gradients Example -Multi colored gradients</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Above we defined gradients using more than two colors, each of which are called <em>color stops.</em> The listing above has a gradient function that accepts four colors. New colors can be simply inserted by adding them to the <code>linear-gradient</code> 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.</p>
<!-- /wp:paragraph -->


# Hard stops and repeating linear gradients

```css
.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
  );
}
```

<!-- wp:paragraph -->
<p>Above inside the <code>.wrapper-5</code> block we set the colors inside the <code>linear-gradient()</code> function at the same position. This will have the effect of instant switch between colors, rather than a smooth transition.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2596,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://thedukh.com/wp-content/uploads/2021/05/gradient3.png" alt="CSS Gradients - Linear gradient with a hard stop and repeating linear gradient" class="wp-image-2596"/><figcaption>CSS Gradients - Linear gradient with a hard stop and repeating linear gradient</figcaption></figure></div>
<!-- /wp:image -->

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

# Radial and repeating radial gradients

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

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

<!-- wp:image {"align":"center","id":2599,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://thedukh.com/wp-content/uploads/2021/05/gradient4.png" alt="CSS Gradients - Radial and Repeating radial gradient" class="wp-image-2599"/><figcaption>CSS Gradients - Radial and Repeating radial gradient</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We have created some really cool effects above, using a new type of gradient or the <code>radial-gradient</code>. 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 <code>repeating-radial-gradient()</code> function in order to repeat the pattern in concentric rings.</p>
<!-- /wp:paragraph -->

# Final Words

<!-- wp:paragraph -->
<p>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 for<code>linear-gradient()</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()" target="_blank" rel="noreferrer noopener">here</a>, for <code>radial-gradient()</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()" target="_blank" rel="noreferrer noopener">here</a>, and from there you can start exploring the concepts more deeply.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here we have our codepen for this article:</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/brachika/pen/bGqdOLo %}

<!-- wp:paragraph -->
<p>Please check other blog posts on <a href="http://thedukh.com" target="_blank" rel="noreferrer noopener">thedukh.com</a>.</p>
<!-- /wp:paragraph -->