How to Make a Radial Gradient Background in CSS: A Complete Guide

A well-designed background can transform an ordinary website into a visually appealing experience. While solid colors are simple and effective, gradients add depth, contrast, and visual interest without requiring image files or complicated design tools. One particularly useful option is a radial gradient, which creates a smooth transition between colors that spreads outward from a central point.

If you want to learn how to make a radial gradient background in CSS, you can achieve it with the built-in radial-gradient() function. This CSS feature allows you to create everything from subtle background highlights and glowing effects to colorful hero sections and modern landing page designs.

In this guide, you'll learn how radial gradients work, how to create them with practical CSS examples, how to control their shape and position, and how to combine multiple gradients for more advanced effects. You'll also discover common mistakes to avoid and useful tips for creating attractive, responsive backgrounds.

Whether you're a beginner learning CSS or an experienced developer refining a website's design, these examples will help you use radial gradients confidently.

What Is a Radial Gradient in CSS?

A radial gradient is a CSS background effect in which colors transition outward from a central point. Unlike a linear gradient, which follows a straight line, a radial gradient expands in a circular or elliptical pattern.

For example, you can create a background that starts with a bright blue color in the center and gradually transitions to dark navy around the edges. This effect is useful for drawing attention to a heading, highlighting a product, or adding depth to a website section.

CSS provides the radial-gradient() function to create this effect directly in the browser.

Here are some common uses for radial gradients:

• Creating colorful website hero backgrounds.
• Adding a soft glow behind headings or buttons.
• Designing modern landing pages.
• Highlighting product images or illustrations.
• Creating decorative backgrounds for cards.
• Building abstract backgrounds without external images.

One major advantage is that CSS generates the gradient dynamically. You don't need to download an image, and you can easily change its colors, size, and position by editing a few CSS properties.

Basic Syntax of the CSS Radial Gradient Function

To create a radial gradient background, use the radial-gradient() function inside the CSS background or background-image property.

The basic syntax is:

background: radial-gradient(
    shape size at position,
    color-stop1,
    color-stop2,
    ...
);

Each part controls a different aspect of the gradient.

• Shape: Determines whether the gradient is circular or elliptical.
• Size: Controls how far the gradient extends from its center.
• Position: Specifies where the gradient originates.
• Color stops: Define the colors and where transitions between them occur.

The shape, size, and position are optional. If you leave them out, CSS uses its default radial gradient settings.

For example:

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(
        #74ebd5,
        #3a7bd5
    );
}

This creates a smooth gradient that begins with a light turquoise color near the center and transitions to blue toward the outside.

You can replace these colors with your own hex codes, RGB values, HSL values, or supported CSS color names.

How to Make a Simple Radial Gradient Background in CSS

The easiest way to create a radial gradient is to specify two or more colors.

Step 1: Create an HTML element

Start with a basic HTML document.

    
    
    


    
Welcome to My Website

Step 2: Apply the radial gradient

Add the following CSS to the document's