Comprehend color gradient variations

A color gradient, often simply referred to as a gradient, is a gradual transition between two or more colors. It involves blending or interpolating colors in a way that creates a smooth progression from one color to another. Gradients can be seen in various design contexts, including art, graphic design, user interfaces, and more.

Gradients are background image

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.(it’s not true if we specify clearly how each color should behave) we will see it later on. Its result is an object of the data type, which is a special kind of <img>

.gradient {
      background: linear-gradient(#e66465, #9198e5);
      /* same syntax as background image */
}
/** Note: linear-gradient itself is an image **/

💡

Thebackground-color property is indeed meant for specifying a solid color, and you cannot directly use the linear-gradient or radial-gradient functions with background-color. Gradients should be used with the background-image property.

Linear gradient

In a linear gradient, the colors transition in a straight line from one point to another. This can be from left to right, top to bottom, diagonally, or at any custom angle.

In this example, we display two background images. The first one is landscape.png and the second is linear-gradient :) if you haven't checked out my article about background images, you can click here

article {
background: url('landscape.png') no-repeat bottom / 100% ,
            linear-gradient(
            black,
            rgb(0,0,200),
            rgb(211,0,55),
            orange,
            yellow)
}
/** Note : landscape will be the first image to user,bgi is the second **/

We can also change the direction of gradients

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

DEMO :

Customizing Gradients

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color-stop, with the midpoint between the colors being the halfway point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabeled % color hint between the two colors to indicate where the middle of the color transition should be.

article { 
   background: url(landscape.png) no-repeat bottom/100%, 
            linear-gradient(black,
            rgb(0,0,200) 70%,
            rgb(211,0,55) 80%,
            orange 85%,
            yellow 87%
            )                             
}

Radial gradient

In a radial gradient, the colors transition from a central point outward in a circular or elliptical pattern

article { 
background: radial-gradient(white,
  rgba(255, 255, 128, 0.8),
  rgba(80, 20, 0, 0.8)),
  url(body.png) no-repeat bottom right/ 75% 
}

We can also change the position and the size of the radial gradient

We can also change the shape and color stop of the radial gradient

Repeating Linear Gradients

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions to cover its entire container

background: 
         repeating-linear-gradient(#e66465, 
         #e66465 20px,
         #9198e5 20px, 
         #9198e5 25px);

This can be complicated at first, but let's break it down step by step

(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px): This part defines the actual gradient. It consists of four color stops, separated by commas:

#e66465: This is the first color stop, and it's a shade of red (#e66465).
#e66465 20px: This is the second color stop, specifying that the red color should continue for the first 20 pixels of the gradient.
#9198e5: This is the third color stop, and it's a shade of blue (#9198e5).
#9198e5 25px: This is the fourth color stop, specifying that the blue color should continue for the next 25 pixels of the gradient. (The total height of the blue color is 25-20=5px since it starts at 20px after the second stop)

With percentages

background: 
   repeating-linear-gradient(#3f87a6, 
              #ebf8e1 15%, 
              #f69d3c 20%);

Let's discover how it works

#3f87a6: This is the starting color of the gradient, a shade of blue (#3f87a6).
#ebf8e1 15%: This is the second color stop, specifying that the color changes to a shade of greenish-white (#ebf8e1) at 15% of the gradient's length. In other words, the transition from blue to greenish-white occurs relatively quickly, covering the first 15% of the gradient.
#f69d3c 20%: This is the third color stop, indicating that the color changes to a shade of orange (#f69d3c) at 20% of the gradient's length. This means that there's a relatively short transition from greenish-white to orange, covering the next 5% of the gradient. In short, we will have a total 5 gradients

background: 
   repeating-linear-gradient(#3f87a6,
              #3f87a6 10%, (Specify the color stop of blue)
              #ebf8e1 15%, 
              #f69d3c 20%);

Repeat Radial Gradients

background: repeating-radial-gradient
            (circle at left,rgb(128,0,64),rgb(240,0,128)10%);

Gradients as background images

Given this CSS code

  .box { 
    width: 350px;
    height: 250px;
    line-height: 3.3em;
    position: absolute;
    top: 20px;
    left: 121px;
    outline: 1px solid gray;
    background: linear-gradient(25deg, red, green)
}

This article covers the concept of color gradients, including linear and radial gradients, and their usage in CSS for designing backgrounds and user interfaces. Learn how to create and customize gradients, use repeating gradients, and apply them as background images with various examples and demos provided throughout the article.

Understand color gradients

Exploring color transitions

Table of contents