Learn CSS radial-gradient by Building Background Patterns

CSS radial gradients are a powerful but often overlooked tool for creating engaging, textured, and even three-dimensional-looking backgrounds. While they may seem intimidating at first glance, a solid understanding of the core concepts and a bit of creative experimentation will unlock a world of possibilities.

In this in-depth tutorial, we‘ll dive under the hood of radial-gradient(), exploring its many options and parameters. But rather than just discussing dry theory, you‘ll learn by doing—building out a variety of real-world patterns and designs. By the end, you‘ll have the knowledge and confidence to use radial gradients in your own unique ways.

The History and Theory of Radial Gradients

Before we jump into the code, let‘s set the stage with a bit of background. CSS gradients were first introduced in 2011 as part of the CSS Images Module Level 3 specification. The goal was to provide a way to create smooth color transitions directly in CSS, without needing to rely on images.

Radial gradients in particular were designed to solve a common design problem—creating the illusion of light radiating from a central point. This effect is often used to add depth, highlights, and shadows to UI elements like buttons.

Under the hood, the browser generates an image according to the parameters we provide in the radial-gradient() function. This gives us a high degree of control and flexibility, but it also means there‘s a bit of a learning curve. Let‘s break down the syntax.

Radial Gradient Syntax

The basic syntax for a radial gradient looks like this:

.element {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

• shape: The shape of the gradient, either circle or ellipse (the default).
• size: The size of the gradient. This can be a length, a percentage, or a keyword like closest-side, farthest-corner, etc.
• position: The center of the gradient, defined as a length, percentage, or keyword like top, left, center, etc.
• start-color, ..., last-color: The color stops of the gradient. These can be any valid CSS color value, and each can optionally be followed by a percentage or length to set its position along the gradient.

Here‘s a simple example:

.button {
  background: radial-gradient(circle at center, #f7df1e, #1a1a1a);
}

This creates a circular gradient centered in the element, transitioning from a bright yellow at the center to a dark gray at the edges.

Browser Support and Usage

Before we dive into more complex examples, let‘s address the question of browser support. The good news is that radial gradients have been supported in all major browsers since 2013, according to Can I Use:

Browser	Version
Chrome	26+
Firefox	16+
Safari	6.1+
Opera	12.1+
IE	10+

However, some newer features and options may have more limited support. For example, the at keyword for positioning the center of the gradient was only added in 2014. Always test in your target browsers and provide fallbacks for critical styles.

In terms of usage, a study of over 4 million websites found that around 35% use some form of CSS gradient. Linear gradients are more common, being used on 32% of sites, while radial gradients are used on 11%. This suggests that while radial gradients are a bit more niche, they‘re still a significant part of the modern web design toolset.

Building Background Patterns

Now that we‘ve covered the basics, let‘s put radial gradients to use building out some real-world background patterns. We‘ll start simple and build up to more complex designs.

Example 1: Polka Dots

Polka dots are a classic pattern that can add a playful touch to any design. With radial gradients, we can create them with just a few lines of CSS:

.polka-dots {
  --size: 80px;  
  background: radial-gradient(circle at center, #000 30%, #0000 31%), 
              radial-gradient(circle at top left, #000 30%, #0000 31%);
  background-size: var(--size) var(--size);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
}

Let‘s break this down:

• We define a CSS variable --size to set the size of our grid. This makes the code more readable and easier to adjust later.
• The first radial-gradient creates solid black circles 30% the size of the background, centered within each grid cell. The sharp color stop at 31% creates a hard edge.
• The second radial-gradient does the same, but positioned at the top left corner of each grid cell.
• background-size sets the size of one "tile" of the pattern.
• background-position shifts the second gradient a half tile right and down, interleaving the circles.

By layering two gradients and precisely positioning them, we get our polka dot effect! Adjusting the --size variable lets you scale the pattern up or down.

Example 2: Checkerboard

Checkerboards are another classic pattern, often used for backgrounds or even game boards. Here‘s how we can create one with radial gradients:

.checkerboard {
  --size: 100px;
  --bg: #7986CB; 
  --fg: #9FA8DA;
  background: radial-gradient(var(--fg) 20%, var(--bg) 0, var(--bg) 80%, var(--fg) 0), 
              radial-gradient(var(--bg) 20%, var(--fg) 0, var(--fg) 80%, var(--bg) 0);
  background-size: calc(var(--size) * 2) calc(var(--size) * 2);
  background-position: calc(var(--size) / 2) 0, 0 calc(var(--size) / 2);
}

This follows similar principles to the polka dots, but with some key differences:

• We‘re using CSS variables for both the colors and size, making the code more readable and adjustable.
• The gradients transition between the two colors, with 20% of color A, an immediate transition to color B, 60% of color B, then back to color A.
• The background size is doubled, as our "tile" is now a 2×2 grid of squares.
• The gradients are offset by half the tile size vertically and horizontally.

The alternating color stops in each gradient, combined with the precise offsets, interleave to create the checkerboard effect. Try adjusting the colors and size for different looks!

Example 3: Ripples

For a more organic, textured look, we can use radial gradients to create a ripple effect:

.ripple {
  --size: 600px;
  background: radial-gradient(circle at 50% 12.5%, #0007, #0000 50%), 
              radial-gradient(circle at 50% 12.5%, #0007, #0000 50%), 
              linear-gradient(#33f, #0000), linear-gradient(#33f, #0000);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
  background-size: var(--size) var(--size), var(--size) var(--size), 
                   100% 100%, 100% 100%;
  background-blend-mode: overlay;
}

This example introduces a few new techniques:

• Two identical radial gradients are layered, one offset by half the size. The circles are positioned 12.5% from the top center and fade out to transparent halfway through.
• Two full-size linear gradients provide the base blue color. The overlay blend mode allows the radial gradients to interact with this base color.
• The large --size value of 600px means the circles are quite large relative to the element, creating the soft ripple shapes.

Background blend modes are a powerful way to combine gradients and solid colors in creative ways. Experiment with different modes and opacity values for a variety of effects!

Example 4: Starburst

Radial gradients are perfect for creating starburst patterns that radiate from a central point:

.starburst {
  --inner-radius: 20%;
  --ring-width: 5%;
  --color-1: #FFC107;
  --color-2: #FF9800;
  --bg: #FFECB3;
  background: repeating-radial-gradient(var(--color-1) 0 var(--inner-radius), 
                                        var(--color-2) calc(var(--inner-radius) + var(--ring-width)) calc(var(--inner-radius) + var(--ring-width) * 2)), 
              var(--bg);
  background-size: 240px 240px;
  background-position: center;
}

This pattern uses repeating-radial-gradient() to create concentric rings:

• CSS variables define the inner radius of the starburst, the width of each "ring", the ring colors, and the background color.
• The gradient alternates between --color-1 and --color-2, with sharp transitions at the inner radius and ring width values.
• repeating-radial-gradient() automatically repeats this pattern until it fills the element.
• The background size and center position create a single large starburst in the middle.

repeating-radial-gradient() is a variant of radial-gradient() that‘s perfect for creating concentric circular patterns. Adjust the inner radius, ring width, and colors for different starburst effects!

Example 5: Spheres

Finally, let‘s push our radial gradient skills to create a pattern that looks like three-dimensional spheres:

.spheres {
  --bg: #c7d2fe;
  --size: 80px;
  --offset: calc(var(--size) + 20px);

  background:
    radial-gradient(closest-corner circle at 75% 25%, white, #0000 50%), 
    radial-gradient(closest-corner circle at 25% 75%, #0007, #0000 50%), 
    var(--bg);
  background-size: var(--size) var(--size);
  background-position: 0 0, var(--offset) var(--offset);
}

The illusion of 3D spheres comes from layering two gradients:

• The first gradient creates white highlights in the top-right corner of each sphere. closest-corner sizes the gradient to perfectly meet the edges, and positioning it at 75% 25% puts the highlight in the top right.
• The second gradient adds a subtle shadow at the bottom-left of each sphere, using a dark transparent color.
• The gradients cut off sharply at 50%, creating a hard circular edge.
• Offsetting the backgrounds creates the alternating pattern.

By carefully placing highlights and shadows, we can create convincing 3D effects with pure CSS. This is a powerful technique for adding depth to flat designs.

Tips and Best Practices

As you experiment with radial gradients, keep these tips and best practices in mind:

1. Use CSS variables: As demonstrated in the examples, CSS variables can make your gradient code much more readable and easier to adjust. Define your colors, sizes, and other parameters as variables at the top of your CSS.

2. Leverage the at keyword: The at keyword makes it easy to position the center of your gradient. Use percentages, lengths, or keywords like top, left, center, etc.

3. Experiment with color stops: Color stops are what give radial gradients their power and flexibility. Try sharp transitions for hard edges, gradual transitions for soft blends, and semi-transparent colors for subtle effects.

4. Layer multiple gradients: As we‘ve seen, layering gradients is key to creating complex patterns. Use background-size and background-position to precisely control the placement of each layer.

5. Explore blend modes: CSS blend modes like overlay, multiply, and screen can create interesting interactions between gradient layers and solid colors. Don‘t be afraid to experiment!

6. Provide fallbacks: While radial gradient support is quite good, it‘s always a good idea to provide a solid color fallback for older browsers. Use a tool like Autoprefixer to automatically add vendor prefixes.

Conclusion

Radial gradients are a versatile and powerful tool in any web developer‘s arsenal. By understanding the core concepts and experimenting with different parameters and techniques, you can create an endless variety of engaging backgrounds and patterns.

Remember, the examples in this article are just a starting point. Take these ideas and run with them—try different color schemes, sizes, and layering techniques. And don‘t forget to share your creations with the community!

Resources

• MDN Web Docs: Radial gradients
• CSS-Tricks: A Complete Guide to CSS Gradients
• web.dev: Radial Gradient Recipes
• Can I Use: CSS Gradients

Happy coding, and may your backgrounds be beautiful!