CSS — Part-6

Gradients

• lets you display smooth transitions between two or more specified colors.

There are three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

CSS Linear Gradients

• You must define at least two color stops
• You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

Examples

1. Direction — Top to Bottom (this is default)

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
//html
<div id="grad1"></div>

2. Direction — Left to Right

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

3. Direction — Diagonal

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Using Angles

• You can also define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
• A value of 0deg is equivalent to “to top”.
• A value of 90deg is equivalent to “to right”.
• A value of 180deg is equivalent to “to bottom”

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Using Multiple Color Stops

#grad {
  background-image: linear-gradient(red, yellow, green);
}

To create a linear gradient (from left to right) with the color of the rainbow and some text:-

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Using Transparency

• can be used to create fading effects.
• we use the rgba() function to define the color stops.
• 0 indicates full transparency, 1 indicates full color (no transparency).

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Repeating a linear-gradient

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS Radial Gradients

• A radial gradient is defined by its center.
• To create a radial gradient you must also define at least two color stops.
• By default, shape is ellipse, size is farthest-corner, and position is center.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

1. Evenly Spaced Color Stops (this is default)

#grad {
  background-image: radial-gradient(red, yellow, green);
}

2. Differently Spaced Color Stops

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Set Shape

• It can take the value circle or ellipse. The default value is ellipse.

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
#grad3 {
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}
#grad4 {
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}

Repeating a radial-gradient

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

CSS Conic Gradients

• A conic gradient is a gradient with color transitions rotated around a center point.
• you must define at least two colors.
• By default, angle is 0deg and position is center.
• If no degree is specified, the colors will be spread equally around the center point.

Syntax

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Three Colors and Degrees

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

With five colors:-

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Create Pie Charts

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Pie chart with defined degrees for all the colors

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

With Specified Angle

The [from angle] specifies an angle that the entire conic gradient is rotated by.

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

With Specified Center position

The [at position] specifies the center of the conic gradient.

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

Repeating a Conic Gradient

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

With specified color starts adn stops

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

Sources:-

https://www.w3schools.com/css