CssHow-ToBeginner · 3 min read

How to Create Gradient in CSS: Simple Guide with Examples

To create a gradient in CSS, use the background-image property with functions like linear-gradient() or radial-gradient(). These functions let you blend two or more colors smoothly across an element's background.

📐

Syntax

The basic syntax for gradients in CSS uses the background-image property with gradient functions.

linear-gradient(direction, color-stop1, color-stop2, ...): Creates a gradient along a straight line.
radial-gradient(shape size at position, color-stop1, color-stop2, ...): Creates a gradient radiating from a center point.

Each color-stop is a color and optional position where the color changes.

css

background-image: linear-gradient(to right, red, blue);
background-image: radial-gradient(circle, yellow, green);

💻

Example

This example shows a simple linear gradient from red to blue and a radial gradient from yellow to green on two boxes.

css

html {
  height: 100%;
  margin: 0;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  border-radius: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

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

.radial {
  background-image: radial-gradient(circle, yellow, green);
  color: black;
}

Output

<div style="display:flex;gap:2rem;align-items:center;justify-content:center;font-family:Arial,sans-serif;"> <div style="width:150px;height:150px;border-radius:1rem;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;background-image:linear-gradient(to right, red, blue);">Linear Gradient</div> <div style="width:150px;height:150px;border-radius:1rem;color:black;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;background-image:radial-gradient(circle, yellow, green);">Radial Gradient</div> </div>

⚠️

Common Pitfalls

Common mistakes when creating gradients include:

Forgetting to use background-image property, which means the gradient won't show.
Using invalid color names or missing commas between colors.
Not specifying direction or shape properly, causing unexpected gradient direction or shape.
Overlapping gradients without proper layering or fallback colors.

css

/* Wrong: missing commas between colors */
background-image: linear-gradient(to right red, blue);

/* Correct: commas separate colors */
background-image: linear-gradient(to right, red, blue);

📊

Quick Reference

Here is a quick cheat sheet for CSS gradients:

Property / Function	Description	Example
background-image	Sets the gradient as background	background-image: linear-gradient(to right, red, blue);
linear-gradient()	Creates a gradient along a line	linear-gradient(to bottom, yellow, green)
radial-gradient()	Creates a circular or elliptical gradient	radial-gradient(circle, pink, purple)
color stops	Colors and positions in gradient	linear-gradient(to right, red 0%, blue 100%)
direction	Gradient angle or side	linear-gradient(45deg, red, blue)

✅

Key Takeaways

Use background-image with linear-gradient() or radial-gradient() to create gradients.

Separate colors with commas and specify direction or shape clearly.

Test gradients in different browsers to ensure consistent appearance.

Gradients can replace images for smooth color transitions and better performance.