How to Create a CSS Gradient Background

CSS Guide · 5 min read

Quick Answer

Use background: linear-gradient(color1, color2); in CSS. For example, background: linear-gradient(#667eea, #764ba2); creates a vertical gradient from blue to purple. Use a CSS gradient generator to create and preview gradients visually.

The Basics

CSS gradients let you create smooth color transitions without using images. They're lightweight, scalable, and work in all modern browsers. Here's the simplest gradient you can create:

background: linear-gradient(#667eea, #764ba2);

This creates a vertical gradient from blue to purple. Let's break down how to customize it.

CSS Gradient Generator

Create beautiful gradients with instant CSS output

Try Free Tool →

Linear Gradients

Linear gradients transition colors along a straight line. You control the direction with an angle or keywords.

Direction Options

background: linear-gradient(to right, #667eea, #764ba2);

Direction keywords: to top, to right, to bottom, to left, to top right, etc.

Using Angles

For precise control, use degrees (0-360):

background: linear-gradient(135deg, #667eea, #764ba2);

Tip: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left

Multiple Color Stops

Add more colors for complex gradients:

background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);

Positioning Color Stops

Control where each color starts and ends:

background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

Radial Gradients

Radial gradients emanate from a center point outward:

background: radial-gradient(circle, #667eea, #764ba2);

Shape Options

background: radial-gradient(ellipse, #667eea, #764ba2);

Common Use Cases

Hero Section Background

                        .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}
                    

Button Gradient

                        .btn {
    background: linear-gradient(90deg, #ff512f, #f09819);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
}
                    

Text Gradient

                        .gradient-text {
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
                    

Tips for Better Gradients

Use similar saturation levels — Colors with matching intensity create smoother transitions
Test on different screens — Gradients can look different on various displays
Consider accessibility — Ensure text remains readable over gradient backgrounds
Add a fallback color — Include a solid color before the gradient for older browsers

                        background: #764ba2; /* fallback */
background: linear-gradient(135deg, #667eea, #764ba2);
                    

Ready to Create Your Gradient?

Use our free CSS gradient generator with 50+ presets

Create Gradient →