CSS Gradients

CSS gradients are a feature that allows developers to create smooth transitions between two or more colors. Gradients can be applied to various CSS properties such as backgrounds, borders, and text, enabling designers to create visually appealing effects and backgrounds without relying on images.

There are several types of gradients in CSS:

Linear Gradients

Linear gradients create a smooth transition between two or more colors along a straight line. You can specify the direction of the gradient using keywords like to top, to bottom, to left, to right, or angles.

Example

  

/* Example of a linear gradient */
#example {
    background-image: linear-gradient(to right, red, blue);
}

Output

Radial Gradients:

Radial gradients create a smooth transition between colors radiating outward from a center point. You can control the size and shape of the gradient using keywords like closest-side, farthest-side, closest-corner, farthest-corner, or specific length values.

Example

/* Example of a radial gradient */
#example {
    background-image: radial-gradient(circle, red, blue);
}

Output

Repeating Gradients

Repeating gradients allow you to repeat a gradient pattern multiple times, creating a tiled effect. This can be useful for creating textured backgrounds or patterns.

Example

/* Example of a repeating linear gradient */
#example {
    background-image: repeating-linear-gradient(to right, red, blue 20px);
}

Output

Repeating Linear Gradient

Example

/* Example of a repeating radial gradient */
#example {
    background-image: repeating-radial-gradient(circle, red, blue 20px);
}

Output

Repeating Radial Gradient

Multiple Color Stops:

Gradients can include multiple color stops, allowing for more complex transitions between colors.

Example

/* Example of a linear gradient with multiple color stops */
#example {
    background-image: linear-gradient(to right, red, green 50%, blue);
}

Output

Transparent Gradients:

Gradients can also include transparent color stops, allowing you to create fading effects or overlays.

Example

/* Example of a linear gradient with transparency */
#example {
    background-image: linear-gradient(to right, red, transparent);
}

Output

CSS Conic Gradients

A conic gradient is a gradient with color transitions rotated around a center point.

To create a conic gradient you must define at least two colors.

syntex

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

By default, angle is 0deg and position is center.

If no degree is specified, the colors will be spread equally around the center point.

Conic Gradient: Five Colors

Example

#example {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}