CSS Gradients

Gradients in CSS allow you to apply smooth color transitions as background styles. Instead of using solid colors, gradients blend two or more colors to create visually appealing transitions. You don’t need any image—CSS can generate these effects dynamically.

Linear Gradient

A linear gradient creates a background that changes color in a straight line—either top to bottom, left to right, or at any custom angle.

Syntax

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

Example:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Linear Gradient – Learn With Arshyan</title>
  <style>
    .linear-gradient-box {
      width: 100%;
      height: 200px;
      background-image: linear-gradient(120deg, #2e86de, #f39c12, #c0392b);
      color: white;
      font-size: 24px;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>

  <div class="linear-gradient-box">Linear Gradient Background</div>

</body>
</html>

Angle (120deg) controls the direction of the gradient.
Add more colors for a richer effect.

Repeating Linear Gradient

Use repeating-linear-gradient() to repeat a gradient pattern across an element.

				
					background-image: repeating-linear-gradient(45deg, #3498db, #3498db 20px, #ffffff 20px, #ffffff 40px);

This creates diagonal stripes by repeating the colors.

Radial Gradient

Radial gradients start from a central point and spread outward in a circular or elliptical shape.

Syntax:

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

Example:

				
					<style>
  .radial-box {
    width: 300px;
    height: 300px;
    background-image: radial-gradient(circle, #1abc9c 20%, #f1c40f 50%, #e74c3c 80%);
    border: 2px solid black;
    margin: 20px auto;
  }
</style>

<div class="radial-box"></div>

The gradient starts with green in the center and expands outward.
circle forces the shape to be a perfect circle (default is ellipse).

Different Sizes in Radial Gradient

You can control how far each color expands:

				
					background-image: radial-gradient(ellipse at center, skyblue 30%, orange 50%, red 70%);

Percentages control how quickly each color appears in the gradient spread.

Conic Gradient

A conic gradient creates a cone-like effect by rotating colors around a central point—like a pie chart or color wheel.

Example:

				
					<style>
  .conic-box {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(#8e44ad, #f39c12, #2ecc71, #e74c3c);
    border-radius: 50%;
    margin: 20px auto;
  }
</style>

<div class="conic-box"></div>

Summary Table

Gradient Type	Description
`linear-gradient()`	Creates straight color blends (top, left, angle)
`radial-gradient()`	Circular or elliptical color transitions
`conic-gradient()`	Rotates colors around a center point
`repeating-*`	Repeats the pattern across the background

Learn With Arshyan Tip:

CSS gradients are not just backgrounds—you can use them on buttons, cards, text, and even for loading indicators. They improve your visual design without increasing page load time.