Radial Gradient Recipes

Celý článek

Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable. But it's also not that easy to remember if you don't use it often, and it's more complicated than linear-gradient().

I figured I'd put together a page of reference examples, so if you know what you need but forget the syntax, it's easy to find that starter code example here.

Centered Bursts

The simplest possible syntax places the first color in the center of the element and the second color on the outside and that's that:

See the Pen Radial Gradient - Centered by Chris Coyier (@chriscoyier) on CodePen.

That will stretch the gradient into an ellipse on a non-square element though. If you don't like that, you can force the shape into a circle, like the second example here demonstrates:

See the Pen Radial Gradient - Circle vs. Ellipse by Chris Coyier (@chriscoyier) on CodePen.

You can also control the size by literally saying how large the circle/ellipse should be (the final color will still stretch to cover the element) by:

• Using a keyword closest-side, farthest-side, closest-corner, farthest-corner
• Explicitly saying like radial-gradient(circle 100px, ...)
• Using color stops like radial-gradient(#56ab2f, #a8e063 150px)

See the Pen Radial Gradient - Sizing by Chris Coyier (@chriscoyier) on CodePen.

Here's some of that stuff in use:

See the Pen Usage of Radial Gradients by Chris Coyier (@chriscoyier) on CodePen.

See the Pen Lit text by Chris Coyier (@chriscoyier) on CodePen.

Positioned

Besides controlling the size and shape of the gradient, the other big trick to know with radial gradients is that you can position the center of them.

This is one of the shortcomings, I find, with gradient generators. They help you pick colors and color stops and stuff, but they usually punt on the positioning stuff.

The center of a radial gradient doesn't have to be in the center! For example, you can position the center in the top left like this:

.element {
  background: radial-gradient(
    at top left,
    var(--light), var(--dark) /* using variables just for fun! */
  )
}

Here's all the four corners:

See the Pen Positioned Radial Gradients by Chris Coyier (@chriscoyier) on CodePen.

You can also be very specifically positioned. Here's an example of a gradient positioned exactly 195px from the left along the bottom of the element. It also has a specific size, but otherwise does the default ellipse shape:

.element {
  background: radial-gradient(
    150px 40px at 195px bottom,
    #666, #222
  );
}

See the Pen Specifically positioned gradient by Chris Coyier (@chriscoyier) on CodePen.

Another little thing to know is that you can use transparent in the gradients to expose the color behind if that's needed, or partially transparent colors like rgba(255, 255, 255, 0.5) to do the same at a colorized color stop.

Also, radial gradients can be used with multiple backgrounds, applying multiple of them to a single element, even overlapping!

.element {
  background: 
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      at bottom left,
      rgba(255, 0, 255, 0.5), 
      transparent 400px
    ),
    radial-gradient(
      at bottom right,
      rgba(255, 100, 100, 0.5), 
      transparent 400px
    );
}

See the Pen Multiple Gradients by Chris Coyier (@chriscoyier) on CodePen.

To highlight the idea that the center of the gradient can be anywhere, here's a gradient that follows the mouse:

See the Pen Radial Gradient Move With Mouse by Leo Sammarco (@lsammarco) on CodePen.

Resources

People tend to think about browser support, and rightfully so, but don't think too hard about it in this case. We're at pretty much across the board support even without any prefixes.

• There is also repeating-linear-gradient() and here Ana Tudor gets into some detail and use cases.
• Need some colors that go nicely togehter in a gradient? uiGradients is nice.
• MDN on radial-gradient
• See our complete guide to all gradients here!

OK bye!

See the Pen CSS Sunset Sunrise by Marty Saetre (@msaetre) on CodePen.

The post Radial Gradient Recipes appeared first on CSS-Tricks.