CSS Gradients

CSS Gradients

Gradients in CSS allow you to create smooth transitions between colors without using images. You can create linear, radial, and conic gradients.

1. Types of Gradients in CSS

✅ A. Linear Gradient

A linear gradient transitions colors in a straight line.

background: linear-gradient(direction, color1, color2, ...);

Example:

div {
  background: linear-gradient(to right, red, blue);
}

✅ Creates a left-to-right red-to-blue gradient.

🔹 Direction Options

Keyword	Effect
to right	Left → Right
to left	Right → Left
to top	Bottom → Top
to bottom	Top → Bottom (default)
45deg	Diagonal (45 degrees)

Example with angle:

background: linear-gradient(45deg, orange, purple);

✅ Creates a diagonal gradient from orange to purple.

✅ B. Radial Gradient

A radial gradient spreads from the center outward.

background: radial-gradient(shape size, color1, color2, ...);

Example:

div {
  background: radial-gradient(circle, yellow, green);
}

✅ Creates a circular yellow-to-green gradient.

🔹 Radial Gradient Shapes

Shape	Effect
circle	Perfect circle gradient.
ellipse	Oval shape (default).

Example with position:

background: radial-gradient(circle at top, pink, blue);

✅ Starts from the top instead of the center.

✅ C. Conic Gradient (CSS3)

A conic gradient creates a color wheel effect.

background: conic-gradient(color1, color2, color3, ...);

Example:

div {
  background: conic-gradient(red, yellow, blue, red);
}

✅ Creates a circular gradient like a pie chart.

Example with angle stops:

background: conic-gradient(from 45deg, red, yellow 50%, blue);

✅ Starts at 45 degrees with 50% yellow.

2. Adding More Colors

You can add multiple colors:

background: linear-gradient(to right, red, orange, yellow, green, blue);

✅ Creates a rainbow-like gradient.

3. Using Transparency (RGBA)

You can use semi-transparent colors:

background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.3));

✅ Creates a gradient with transparency.

4. Repeating Gradients

If you need a striped effect, use repeating-linear-gradient():

background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

✅ Repeats a red & blue striped pattern every 20px.

5. Applying Gradients to Text

You can make text gradient-colored:

h1 {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

✅ The text will have a gradient fill instead of a solid color.

6. Browser Support

✅ All modern browsers support linear and radial gradients.
🔸 Conic gradients require CSS3 and may not work in older browsers.