Explain linear and radial gradient backgrounds

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

ait(26) • 797  views

CSS gradients let you display smooth transitions between two or more specified colors.

  • CSS defines two types of gradients:
    1. Linear Gradients (goes down/up/left/right/diagonally)
    2. Radial Gradients (defined by their center)

CSS Linear Gradients

  • To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.


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

- Linear Gradient - Top to Bottom (this is default) - Linear Gradient - Left to Right

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

- Linear Gradient - Diagonal

     background: linear-gradient(to bottom right, color-stop1, color-stop2, ...);

- Using Angles

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

- Using Multiple Color Stops

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

- Using Transparency

     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

- Repeating a linear-gradient

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

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.


     background: radial-gradient(shape size at position, start-color, ..., last-color);
  • By default, shape is ellipse, size is farthest-corner, and position is center.

- Radial Gradient - Evenly Spaced Color Stops (this is default)

        background: radial-gradient(red, yellow, green);

Radial Gradient - Differently Spaced Color Stops

        background: radial-gradient(red 5%, yellow 15%, green 60%);
Please log in to add an answer.

Continue reading

Find answer to specific questions by searching them here. It's the best way to discover useful content.

Find more