How to Create a Gradient in CSS

What You’ll Build or Solve

You’ll create linear and radial gradients using CSS and apply them to elements as background styles. By the end, you’ll control direction, color order, and placement so the gradient looks correct at different screen sizes.

When This Approach Works Best

Use this approach when you:

• Add a hero background that scales cleanly on any screen.
• Style buttons or cards with smooth color transitions.
• Add a subtle spotlight effect behind a section.

Avoid this approach when you need photographic detail. Gradients handle color transitions, not complex imagery.

Prerequisites

• Basic HTML and CSS
• A CSS file or <style> block

No additional setup is required.

Step-by-Step Instructions

Step 1: Create Linear Gradients with linear-gradient()

Use linear-gradient() for directional transitions. Apply it with background or background-image.

Basic Vertical Gradient

.hero {
  background:linear-gradient(blue,purple);
}

This creates a top-to-bottom gradient from blue to purple.

Change Direction

.hero {
  background:linear-gradient(toright,blue,purple);
}

The gradient now flows from left to right.

Use an Angle

.hero {
  background:linear-gradient(45deg,blue,purple);
}

Angles give you precise control over direction.

Add More Colors

.hero {
  background:linear-gradient(red,orange,yellow);
}

You can include as many colors as needed.

Control Color Stops

.hero {
  background:linear-gradient(red0%,orange50%,yellow100%);
}

Color stops let you define exactly where transitions happen.

What to look for: If the gradient does not appear, confirm you used linear-gradient() inside background or background-image. It cannot stand alone as a value.

Step 2: Create Radial Gradients with radial-gradient()

Use radial-gradient() for circular or oval transitions.

Basic Radial Gradient

.card {
  background:radial-gradient(circle,white,lightblue);
}

This creates a circular gradient from the center outward.

Move the Center Point

.card {
  background:radial-gradient(circleattopleft,white,lightblue);
}

You can reposition the focal point anywhere inside the element.

What to look for: Radial gradients may look stretched if the element is much wider than it is tall. Add height or padding for better proportions.

Examples You Can Copy

Example 1: Full-Page Background Gradient

body {
  min-height:100vh;
  margin:0;
  background:linear-gradient(tobottom, #4e73df, #1cc88a);
}

Example 2: Angled Gradient Button

<buttonclass="cta">Sign Up</button>

.cta {
  background:linear-gradient(45deg, #ff6b6b, #f06595);
  color:white;
  border:none;
  padding:10px18px;
  border-radius:8px;
}

Example 3: Spotlight Section with a Radial Gradient

<sectionclass="spotlight">
<h2>Featured</h2>
<p>Soft focus behind the content.</p>
</section>

.spotlight {
  padding:40px;
  background:radial-gradient(circleatcenter, #ffffff0%, #d6d6d6100%);
}

Common Mistakes and How to Fix Them

Mistake 1: Forgetting the Gradient Function

You might write:

.hero {
  background:blue,purple;
}

Why it breaks: CSS requires linear-gradient() or radial-gradient() to generate a gradient.

Correct approach:

.hero {
  background:linear-gradient(blue,purple);
}

Mistake 2: Applying a Gradient to an Element with No Height

You might set a gradient on an empty <div> and see nothing.

Why it breaks: The element collapses without content, height, or padding.

Correct approach:

.box {
  height:240px;
  background:linear-gradient(toright,blue,purple);
}

Mistake 3: Layering Order Hides Your Gradient

You might try to overlay a gradient on an image and list the image first.

Why it breaks: In layered backgrounds, the first background is drawn on top. If the image is first, it covers the gradient.

Correct approach:

.hero {
  background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url("banner.jpg");
  background-size:cover;
  background-position:center;
}

The gradient appears first, so it overlays the image.

Troubleshooting

If you see no gradient, confirm you used linear-gradient() or radial-gradient() inside background or background-image.

If the gradient looks cut off, add padding or height so the element has area to paint.

If your gradient overlay does not show on an image, place the gradient first in the background list.

If the gradient looks banded, increase color contrast or add an extra middle color stop.

Quick Recap

• Use linear-gradient() for directional gradients.
• Use radial-gradient() for circular gradients.
• Control direction with to right or an angle like 45deg.
• Control transitions with extra colors and stop percentages.
• Layer gradients over images by listing the gradient first.