repeating-radial-gradient() CSS Function
Description
The repeating-radial-gradient()
CSS function is similar to a radial gradient, which is done by the radial-gradient() function, and has a similar syntax with it. But the colors of the gradient endlessly repeat in all directions, forming a pattern that fills the background of the element.
Syntax
repeating-radial-gradient( [[ circle || <length> ] [at <position>]? , | [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | at <position> , <color-stop-list> ) ---------------------------------------------------------------/-----------------/ Contour, size and position of the ending shape List of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ]
Values
- <position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
- <shape>The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
- <extent-keyword>A keyword describing how big the ending shape must be. The possible values are:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
- <color-stop>A color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the virtual gradient ray.
Example
<div class="example">Repeating radial gradient example.</div>
.example {
background: repeating-radial-gradient(green 20%, red 40%);
padding: 30px;
margin: 10px;
height: 200px;
font-size: 1.5em;
text-align: center;
}
Browser Support
Desktop | |||||
10 | 12 | 26 | 16 | 12.1 | 6.1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 26 | 16 | 12.1 | 6.1 | Yes |
Last updated by CSSPortal on: 1st December 2019
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL
Sidebar
CSS & HTML References
- CSS At-Rules
- CSS Data Types
- CSS Functions
- attr
- blur
- brightness
- calc
- circle
- contrast
- drop-shadow
- ellipse
- grayscale
- hsl
- hsla
- hue-rotate
- inset
- invert
- linear-gradient
- matrix
- matrix3d
- opacity
- perspective
- polygon
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- saturate
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sepia
- skew
- skewX
- skewY
- translate
- translate3d
- translateX
- translateY
- translateZ
- CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- CSS Pseudo Elements
- HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr
Convert your website into an app for Android and iOS. Updates automatically. Unicode Characters & Emojis
Search all Unicode characters and emojis plus other tools. Learn Wordpress
Wordpress hosting. Theme and plugin reviews. Wordpress development tips. Templatic
Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips. A2 Web Hosting
Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting. Online Password Manager
Access your passwords from any computer, no need to remember all of your passwords. Advertise Here
Advertise your company and products here!