Colors and Gradients In CSS

Selectors in CSS

Colors and Gradients

color can be added in 4 ways:

  • rgb,a (red, green, blue, alpha) -
    contains values from 0 - 255, or 0 - 100%
    rgb(183, 21, 64, 50%)
    rgb(183 21 64 / 50%)
  • hex code - (any rgb,a color is converted to hex code)
    hexa-decimal: base 16, [0-9 + A-F]
    Eg: (b7 15 40)
    b = 11*16+7 = 183
    rgb(183, 21, 64)

Selectors in CSS

Colors and Gradients

  • hsl,a
    (hue, saturation, lightness, alpha):-
    saturation is how vibrant the selected hue is, 0% is grayscale
    lightness is the parameter which describes the scale from black to white

Selectors in CSS

Colors and Gradients

  • keywords

Selectors in CSS

Colors and Gradients

  1. Linear Gradients,
  2. Radial gradients,
  3. Conic gradients,
  4. Repeating gradients

Selectors in CSS

Linear Gradient

Simple Gradient with Default Direction (Bottom to Top)

This is the most basic form of the gradient, with a default direction (from top to bottom) and two colors:

.gradent-box {
  border: 2px solid black;
  height: 200px;
  width: 200px;
  background: linear-gradient(red, blue);
}

Selectors in CSS

Linear Gradient

Angle-based Gradient

Here’s a gradient transitioning between three colors at an angle of 45 degrees:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red 10%, yellow 30%, blue 80%);
}

Selectors in CSS

Linear Gradient

Side and Corner-based Gradient

A gradient going from the top-right corner to the bottom-left corner, with precise color stops:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(to bottom left, red 20%, yellow 50%, blue 90%);
  }

Selectors in CSS

Linear Gradient

Side and Corner-based Gradient

A gradient going from the top-right corner to the bottom-left corner, with precise color stops:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(to bottom left, red 20%, yellow 50%, blue 90%);
}

Selectors in CSS

Linear Gradient

Using Color Hints for Smooth Transitions

Color hints are used to indicate where the color should change more abruptly or more gradually. Here’s an example:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(red 20%, 40%, blue);
  }

Selectors in CSS

Linear Gradient

Gradient with Length Units for Color Stops

Instead of using percentages, you can use length units (like px) to control where the color stops happen:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(to right, red 50px, yellow 100px, blue 200px);
}

Selectors in CSS

Linear Gradient

Using Different Directions with Color Stops

A gradient that moves vertically from bottom to top with precise color stops:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(to top, red 0%, yellow 50%, blue 100%);
}

Selectors in CSS

Linear Gradient

Angle-based Gradient with Color Hints and Stops

Here’s an example of a more complex gradient with an angle, color stops, and hints for smooth transitions:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(135deg, red 10%, 25%, yellow 50%, 75%, blue 90%);
  }

Selectors in CSS

Linear Gradient

Combining Multiple Stops with Smooth Transitions

A gradient with multiple color stops and hints for smooth changes between colors:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:linear-gradient(to right, red 0%, yellow 30%, green 60%, blue 100%);
  }

Selectors in CSS

Linear Gradient

Complex Gradient with Lengths, Percentages, and Hints

You can mix both percentages and lengths to achieve very precise control over the gradient:

.linear-gradent{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red 10%, yellow 50px, green 70%, blue 90%);
}

Selectors in CSS

radial-gradient()

Using Circle Shape:

.radial-gradient-basic {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, red, blue);
}

.radial-gradient-WithPosition {
  border: 1px solid black;
  width: 200px;
  height: 200px;
/*   background: radial-gradient(circle at center, green, yellow); */
      background:  radial-gradient(circle at left top, orange, pink);
  /*     background:  radial-gradient(circle at 75% 25%, purple, cyan); */
}

.radial-gradient-withsize{
   border: 1px solid black;
  width: 200px;
  height: 200px;
/*   background: radial-gradient(circle closest-corner, #ff5733, #33ff57); */
      background: radial-gradient(circle farthest-side, #ff0000, #0000ff)


  
}

Selectors in CSS

radial-gradient()

Using Ellipse Shape

.radial-gradient-basic {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse, black, white)

}

.radial-gradient-WithPosition {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse at right bottom, teal, lime);
  /*     background: radial-gradient(ellipse at 40% 60%, gold, silver) */
}

.radial-gradient-withsize{
   border: 1px solid black;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse closest-side, #ffcc00, #00ccff)
  /*     background:radial-gradient(ellipse farthest-corner, #9900cc, #cc0099);
}

Selectors in CSS

radial-gradient()

Using Radial Size with Length

.radial-gradient-circle-with-Length {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle 50px, red, blue);

}

.radial-gradient-Ellipse-with-Length {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:radial-gradient(ellipse 30px 50px, orange, purple);
/* background:radial-gradient(ellipse 25% 40%, #123456, #654321) */
}

Selectors in CSS

radial-gradient()

With Color Stops and Hints

.radial-gradient-circle{
  border: 1px solid black;
  width: 200px;
  height: 200px;
/*   background: radial-gradient(circle, red 0%, blue 50%, green 100%) */
  background: radial-gradient(circle, #ff0000 10%, #00ff00 40%, #0000ff 70%);
/* background: radial-gradient(circle, #ff5733 0%, #33ff57 50%, #f0f0f0 90%); */
}

.radial-gradient-Ellipse {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:radial-gradient(ellipse, rgba(255, 0, 0, 0.5) 0%, rgba(0, 255, 0, 0.5) 100%);
/* background: radial-gradient(ellipse, rgba(0, 0, 255, 0.3) 20%, rgba(255, 255, 0, 0.5) 80%) */
}

Selectors in CSS

radial-gradient()

Complex Combinations with Position and Color Stops

.radial-gradient-circle{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:radial-gradient(circle at 10% 20%, red 20%, yellow 60%, green 100%);
/* background: radial-gradient(circle at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) */
}

.radial-gradient-Ellipse {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background:radial-gradient(ellipse at 50% 50%, #ffffff 30%, #000000 70%);
/* background: radial-gradient(ellipse at 25% 75%, #cccccc 40%, #ffcc00 90%) */

}

CSS: Colors and Gradients

By Yash Priyam

Made with Slides.com

CSS: Colors and Gradients

  • 295

More from Yash Priyam