🎯 What is linear-gradient()?

linear-gradient() creates a gradual color transition in a specific direction.

The colors smoothly blend into each other across the background.

linear-gradient() = creates a smooth linear color transition

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

Defines the direction of the gradient.

You can also use angles:

45deg
90deg
180deg
                

Defines the colors used in the gradient.

At least two colors are required.

You can use:

• named colors
• HEX colors
• RGB/RGBA
• HSL/HSLA

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

👉 The color starts as red on the left and smoothly transitions to blue on the right.

background: linear-gradient(to bottom, yellow, green);

👉 Yellow starts at the top and transitions into green at the bottom.

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

👉 The gradient appears diagonally at a 45-degree angle.

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

👉 Creates a rainbow-style gradient 🌈

You can combine gradients with transparency using rgba().

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

👉 Creates a semi-transparent gradient effect.

.hero {

  height: 400px;

  background: linear-gradient(
    to right,
    #4facfe,
    #00f2fe
  );

}
                

👉 This creates a modern blue gradient background often used in landing pages.

Gradients can also be layered over images.

.hero {

  background-image:
    linear-gradient(
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.5)
    ),
    url("hero.jpg");

}
                

👉 The dark gradient overlays the image, making text easier to read.

• Gradients are treated as background images in CSS.
• They do not require uploading an actual image file.
• Gradients are responsive and scale automatically.

This makes them lightweight and performance-friendly.

linear-gradient() is commonly used for:

• hero sections
• buttons
• banners
• overlays
• cards
• modern UI backgrounds