CSS3 Gradients

CSS Gradients

CSS gradients allow you to display smooth transitions between two or more specified colors, creating effects previously only possible with image files.

Using CSS gradients instead of images reduces download time and bandwidth usage. Gradients also scale beautifully and look sharp at any zoom level because they are generated by the browser.

CSS defines several types of gradients:

• Linear Gradients: Transitions colors along a straight line (down/up/left/right/diagonally).
• Radial Gradients: Transitions colors radially from a central point.
• Conic Gradients: Transitions colors in a circular pattern around a central point (like a color wheel or pie chart).

Browser Support

CSS gradients (linear-gradient, radial-gradient, conic-gradient, and their repeating versions) are widely supported in all modern web browsers. Vendor prefixes are no longer needed.

CSS Linear Gradients

To create a linear gradient, you must define at least two color stops – the colors you want to transition between. You can also specify the direction or angle of the gradient.

Basic Syntax:

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

Example: Top to Bottom (Default)

If no direction is specified, the gradient defaults to top-to-bottom.

.grad-tb {
  /* Starts red at the top, transitions to blue at the bottom */
  background: linear-gradient(red, blue);
}

Example: Left to Right

Use the to <side> syntax for direction.

.grad-lr {
  /* Starts red at the left, transitions to blue at the right */
  background: linear-gradient(to right, red, blue);
}

Example: Diagonal

Specify both horizontal and vertical sides.

.grad-diag {
  /* Starts red at the top left, transitions to blue at the bottom right */
  background: linear-gradient(to bottom right, red, blue);
}

Using Angles:

For precise control, use angles (deg). 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom, etc. (counter-clockwise).

.grad-angle {
  /* Gradient at a 45-degree angle */
  background: linear-gradient(45deg, red, blue);
}

Multiple Color Stops:

You can include multiple colors. By default, they are spaced evenly.

.grad-multi {
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

You can also specify positions for color stops using percentages or lengths.

.grad-multi-pos {
  /* Red starts immediately, yellow is at 30%, blue ends at 100% */
  background: linear-gradient(to right, red 0%, yellow 30%, blue 100%);
}

Using Transparency:

Use color formats that support alpha channels, like rgba() or modern rgb(r g b / alpha), to create fading effects.

.grad-transparent {
  /* Fades from fully transparent red to fully opaque red */
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* Modern syntax equivalent: */
  /* background: linear-gradient(to right, rgb(255 0 0 / 0), rgb(255 0 0 / 1)); */
}

Repeating Linear Gradients:

Use repeating-linear-gradient() to tile a gradient pattern.

.grad-repeat {
  /* Creates repeating stripes */
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px /* End color position defines the size of the repeating unit */
  );
}

CSS Radial Gradients

A radial gradient transitions colors outwards from a center point. You need at least two color stops.

Basic Syntax:

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

By default, the shape is ellipse, size is farthest-corner, and position is center.

Example: Evenly Spaced Colors (Default)

.radial-grad-even {
  /* Default: Ellipse shape, centered, red center -> green -> blue edge */
  background: radial-gradient(red, green, blue);
}

Example: Differently Spaced Color Stops

.radial-grad-spaced {
  /* Red up to 5%, green at 15%, blue covers the rest to 60% */
  background: radial-gradient(red 5%, green 15%, blue 60%);
}

Setting the Shape:

The shape can be circle or ellipse (default).

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

Setting Size and Position:

The size parameter defines the gradient’s end shape size. Keywords include closest-side, farthest-side, closest-corner, farthest-corner (default). The position is specified using keywords (e.g., center, top left) or lengths/percentages (e.g., 60% 55%).

.radial-grad-size-pos {
  /* Circle shape, ending at the closest side to the center */
  /* Centered at 60% from left, 55% from top */
  background: radial-gradient(circle closest-side at 60% 55%, blue, green, yellow, black);
}

Repeating Radial Gradients:

Use repeating-radial-gradient() to create concentric repeating patterns.

.radial-repeat {
  /* Creates repeating concentric rings */
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    yellow 10px,
    yellow 20px
  );
}

CSS Conic Gradients (Brief Mention)

Conic gradients transition colors around a central point, useful for creating pie charts, color wheels, or angled effects.

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

Learn more about conic gradients on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient

Find comprehensive documentation on MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)