DEV Community

Cover image for CSS Color Gradients
Chris Jarvis
Chris Jarvis

Posted on

CSS Color Gradients

Color Gradients.

This post sprang from an idea I had while writng the CSS Eggs post. I started that post right before the holiday. I wanted to do more but din't have the time. I can go deeper into the topic if I use general shapes and don't limit my time to a holiday.

These examples use a stripped down version of the HTML used for the ugly sweater posts. The structure is the same I removed much of the styling.

<div>

    <div class="character">

        <div class="box box_purple_first_R"></div>

        <div class="box box_L"></div>

        <div class="box box_purple_first"> </div>

        <div class="box box_to_Top"></div>

    </div>
   </div>
Enter fullscreen mode Exit fullscreen mode

Linear Gradients

A gradient is a blending of two or more colors. You can do some creative things with them. Linear gradients are The most common.

Four vertical rectangles. They are purple and blue
Figure 1 Gradients 1.Top to bottom (default), 2. color midpoint transition at 33%, 3. color midpoint transition at 66%, 4 Blue to Purple.

Here are four boxes with color gradients. The Box class has the size and structure for all boxes. The rest of the classes in this tutorial will only change the gradient used.

First box has normal linear gradient. The color changes evenly from top to bottom. But you can change the ratio of one color to the other with percentages. In the second box the color change at 33%, third one at 66%, last one I reversed the transition by starting with final color first.

.box {
    height: 364px;
    width: 225px;
    border: 4px black solid;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px; 
    margin-top: 10px;
    overflow: hidden;
}

.box_purple_first {
    background: linear-gradient(
      var(--Purple), 
      var(--Blue)
    );
}

.box_33Percent {
    background: 
linear-gradient(
      var(--Purple) 33%, 
      var(--Blue)
    );
}

.box_66Percent {
    background: 
linear-gradient(
      var(--Purple) 66%, 
      var(--Blue)
    );

}

.box_blue_first {
  background: linear-gradient
              (var(--Blue), 
          var(--Purple));
}


Enter fullscreen mode Exit fullscreen mode

Same properties but changing the colors to red and yellow.

four vertical rectangles.
Gradients 1.Top to bottom (default), 2. color midpoint transition at 33%, 3. color midpoint transition at 66%, 4 Yellow to Red.</figcaption.

.box_red_first {
    background: linear-gradient(
      var(--Red), 
      var(--Yellow)
    );
}


.box_red_33Percent {
    background: 
linear-gradient(
      var(--Red) 33%, 
      var(--Yellow)
    );
}

.box_red_66Percent {
    background: 
linear-gradient(
      var(--Red) 66%, 
      var(--Yellow)
    );

}

.box_yellow_first {
  background: linear-gradient(var(--Yellow), 
        var(--Red));
}

Enter fullscreen mode Exit fullscreen mode

A Step to the Right

The direction of gradient can be changed. Default is top to bottom but it can be changed to side to side or bottom to top.

4 colored boxes. colors start purple and slowly change to blue.
Gradients 1. Gradient left to right, 2. color midpoint transition at 33% with to right, 3. color midpoint transition at 66% with to right, 4 Blue to Purple with to right

These use the same property values as figure 1 but with added directions. Notice how adding to right changes the color transition from the default to left to right.

.box_purple_first_R {
    background: linear-gradient(to right,
      var(--Purple), 
      var(--Blue)
    );
}

.box_33Percent_R {
    background: 
linear-gradient(to right,
      var(--Purple) 33%, 
      var(--Blue)
    );
}

.box_66Percent_R {
    background: 
linear-gradient(to right,
      var(--Purple) 66%, 
      var(--Blue)
    );

}

.box_blue_first_R {
  background: linear-gradient( to right, var(--Blue), 
        var(--Purple));
}
Enter fullscreen mode Exit fullscreen mode

4 colored boxes. colors start purple and slowly change to blue.
Gradient Direction: Purple transitioning to Blue in various directions. 1.from left to right. 2. From right to Left, 3. Top to bottom (default), 4 Bottom to top

Here are examples of to right, to left, default and to top.
Notice the last box. The to top version looks the same as the last box in figure 1.

.box_purple_first_R {
    background: linear-gradient(to right,
        var(--Purple), 
        var(--Blue)
    );
}

.box_L {
    background: linear-gradient(to left,
      var(--Purple), 
      var(--Blue)
    );
}

.box_purple_first {
    background: linear-gradient(
      var(--Purple), 
      var(--Blue)
    );

}

.box_To_Top {
  background: linear-gradient( to top,
        var(--Purple), 
    var(--Blue));
}

Enter fullscreen mode Exit fullscreen mode

Diagonals

4 red and yellow boxes
Red to yellow gradients 1.0deg (default), 2. 45deg, 3. 90deg, 4 -45deg.

Gradients can also go in a diagonal direction by using angles. Add the deg This starts at the top of an item with 0deg and moves clockwise. 180deg is Botton center and then its negative numbers till you reach zero at the top.

.box_red_first_angle {
    background: linear-gradient(
      var(--Red), 
      var(--Yellow)
    );
}


.box_red_angle {
    background: 
linear-gradient(45deg,
      var(--Red), 
      var(--Yellow)
    );
}

.box_red_90_angle {
    background: 
linear-gradient(90deg,
      var(--Red), 
      var(--Yellow)
    );

}

.box_yellow_neg45_angle {
  background: linear-gradient( -45deg, var(--Yellow), 
        var(--Red));
}

Enter fullscreen mode Exit fullscreen mode

Wrap up

These are just a few tips to make use of gradients. Hope you enjoyed.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Follow me here or on Twitter.

Top comments (0)