CSS Gradients

#css

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>

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));
}

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));
}

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));
}

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));
}

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));
}

Wrap up

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

-$JarvisScript git push

Follow me here or on Twitter.

Chris Jarvis | Fullstack Developer | Documentation

@jarvisscript

"CSS Color Gradients" by @JarvisScript #DEVCommunity dev.to/jarvisscript/c…
A few things you can do with CSS Gradients.

13:29 PM - 25 Apr 2022