linear-gradient

by

Linear-gradient creates a gradient that transitions smoothly between multiple colors along a straight line. It can be applied to various elements like backgrounds, borders, and text shadows. It offers customizable parameters for direction, colors, and stops.

Basic Syntax

background-image: linear-gradient(direction, color1, color2, ...);
  • direction: Specifies the direction of the gradient (e.g., to top, to bottom, to left, to right, to top left, etc.).
  • color1, color2, …: The colors to be used in the gradient, separated by commas.

Example

.gradient-element {
  background-image: linear-gradient(to right, #ff0000, #00ff00);
}

This creates a horizontal gradient that transitions from red to green.

Customizing the Gradient

  • Multiple Colors: Add more colors to create a multi-color gradient.
  • Stops: Specify the positions where the colors transition using percentages.
  • Angle: Use degrees (e.g., 45deg) to define the gradient’s angle.
  • Keyword Directions: Use keywords like to top left, to bottom right, etc. for specific directions.

Example with Stops

.gradient-element {
  background-image: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

This creates a gradient with red at the start, green at 50%, and blue at the end.

Additional Tips

  • Combine linear-gradient with other background properties like background-color and background-repeat.
  • Use CSS variables for dynamic gradient customization.
  • Explore other gradient types like radial-gradient and conic-gradient for different effects.

Example with CSS Variables

:root {
  --gradient-color1: #ff0000;
  --gradient-color2: #00ff00;
}

.gradient-element {
  background-image: linear-gradient(to right, var(--gradient-color1), var(--gradient-color2));
}

By modifying the CSS variables, you can easily change the gradient colors.