Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the CSS repeating-radial-gradient() function?

Gutha Vamsi Krishna

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The repeating-radial-gradient() function creates gradients in a repeated fashion, as shown in the image below.

  • It is an in-built CSS function.
  • It can be only used where images are used because this function returns a gradient data typeThis is a special kind of image.

Syntax

background-image: repeating-radial-gradient(shape extent-keyword at position, 
color stops...); 

or

background: repeating-radial-gradient(shape extent-keyword at position, 
color stops...); 

Parameters

repeating-radial-gradient function accepts following parameters:

  • Shape: The default shape is an ellipse, which can be replaced with only a circle.

  • Extent-Keyword: It is used to specify the size of the ending shape . farthest-corner (default), closest-side, closest-corner, farthest-side.

  • Position: It specifies the position where the gradient originates. The default is center.

repeating-radial-gradient(circle at center, red 0, blue, green 30px);

We can provide the position in percentages too.

repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
  • Color stops: These are used to specify the colors in the gradient. They also follow an optional stop position.

Example 1

In the following code snippet:

  • We created a div element which has a gradient to apply repeating-radial-gradient.

  • We passed the repeating-radial-gradient function to a background CSS property to gradient div in style tag.

repeating-radial-gradient(circle at center, red 0, blue, green 30px);
  • Here we passed the parameters to make the shape circle, the position center and color stops as red, blue, green.

  • The gradient starts with red, changes to blue, and ends with green.

Switch to output tab to view gradient

Example 2

In this example, we will try to animate the gradient. We will take the advantage of optional color-stop positions.

  • In the following gradient, we used two shades of color stops, pink and white.

  • We provided color-stops positions to white and pink as 0 and 100.

  • We will change the color stop position of pink from 100 to 0 and animate it using CSS animations.

Switch to html tab to view code

RELATED TAGS

css
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring