CSS Linear Gradients

Subject: css

CSS Linear Gradients

Linear gradients in CSS allow you to create a smooth transition between two or more colors along a straight line. They are commonly used for backgrounds, overlays, buttons, and borders, replacing the need for image files.

Syntax

🚀 Try it in Compiler
  • direction: Defines the direction of the gradient (e.g., to right, 45deg)
  • color-stops: Points where the gradient changes from one color to another

You can also use angles like 45deg, 90deg for more control.

Example 1: Horizontal Gradient

🚀 Try it in Compiler

Example 2: Diagonal Gradient with Multiple Colors

🚀 Try it in Compiler

Customizing Color Stops

You can control where each color starts by adding percentage or length values:

🚀 Try it in Compiler

This means red covers the first 10% and blue the remaining 90%.

Transparent Gradients

Use transparency to create fade-out or overlay effects:

🚀 Try it in Compiler

Best Practices

  • Use for decorative backgrounds, buttons, and highlights
  • Combine with background-size and background-position for advanced effects
  • Ensure contrast for readability when placing text on gradients
  • Pair with images to enhance legibility (e.g., gradient overlay on banner)

Key Takeaways

  • linear-gradient creates color transitions along a direction or angle
  • Accepts multiple color stops and supports percentage positioning
  • Allows transparency for overlays and soft transitions
  • Useful for buttons, full-page backgrounds, and modern UI design
Next: CSS Radial Gradients