border-style - CSS: Cascading Style Sheets

border-style
============

The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-style`
* `border-left-style`
* `border-right-style`
* `border-top-style`
Syntax
------

```css
/\* Keyword values \*/
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/\* top and bottom | left and right \*/
border-style: dotted solid;

/\* top | left and right | bottom \*/
border-style: hidden double dashed;

/\* top | right | bottom | left \*/
border-style: none solid dotted dashed;

/\* Global values \*/
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;
```

The `border-style` property may be specified using one, two, three, or four values.

* When **one** value is specified, it applies the same style to **all four sides**.
* When **two** values are specified, the first style applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first style applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the styles apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).

Each value is a keyword chosen from the list below.

### Values

`<line-style>`

Describes the style of the border. It can have the following values:

`none`

Like the `hidden` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the *lowest* priority: if any other conflicting border is set, it will be displayed.

`hidden`

Like the `none` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the *highest* priority: if any other conflicting border is set, it won't be displayed.

`dotted`

Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's `border-width`.

`dashed`

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

`solid`

Displays a single, straight, solid line.

`double`

Displays two straight lines that add up to the pixel size defined by `border-width`.

`groove`

Displays a border with a carved appearance. It is the opposite of `ridge`.

`ridge`

Displays a border with an extruded appearance. It is the opposite of `groove`.

`inset`

Displays a border that makes the element appear embedded. It is the opposite of `outset`. When applied to a table cell with `border-collapse` set to `collapsed`, this value behaves like `ridge`.

`outset`

Displays a border that makes the element appear embossed. It is the opposite of `inset`. When applied to a table cell with `border-collapse` set to `collapsed`, this value behaves like `groove`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-style`: `none`
* `border-right-style`: `none`
* `border-bottom-style`: `none`
* `border-left-style`: `none`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-bottom-style`: as specified
* `border-left-style`: as specified
* `border-right-style`: as specified
* `border-top-style`: as specified
 |
| Animation type | discrete |

Formal syntax
-------------
```

border-style =
  <line-style>{1,4}

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

Examples
--------

### All property values

Here is an example of all the property values.

#### HTML

```html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
```

#### CSS

```css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/\* border-style example classes \*/
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The border-related shorthand CSS properties: `border`, `border-width`, `border-color`, `border-radius`


<relative-size> - CSS: Cascading Style Sheets

<relative-size>
===============

The **`<relative-size>`** CSS data type describes relative size keywords. The `<relative-size>` keywords define a size relative to the computed size of the parent element. This data type is used in the `font` shorthand and `font-size` properties.

Syntax
------
```

<relative-size> = smaller | larger
```

### Values

The `<relative-size>` data type is defined using a keyword value chosen from the list below.

`smaller`

A relative size one size smaller than the inherited size.

`larger`

A relative size one size larger than the inherited size.

Description
-----------

The `<relative-size>` keywords are relative to the current size of the element. If the inherited size is defined using an `<absolute-size>` keyword, the `<relative-size>` value equates to the adjacent size in the `<absolute-size>` table. Otherwise, the relative increase or decrease in size is between 120% and 150%.

Examples
--------

### Comparing the keyword values

```html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size is not specified</li>
  <li class="larger">font-size: larger;</li>
</ul>
```

```css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-relative-size |

See also
--------

* CSS `<absolute-size>` data type
* CSS `font` and `font-size` properties
* CSS fonts module


animation-range - CSS: Cascading Style Sheets

animation-range
===============

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`animation-range`** CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `animation-range-start`
* `animation-range-end`
Syntax
------

```css
/\* single keyword or length percentage value \*/
animation-range: normal; /\* Equivalent to normal normal \*/
animation-range: 20%; /\* Equivalent to 20% normal \*/
animation-range: 100px; /\* Equivalent to 100px normal \*/

/\* single named timeline range value \*/
animation-range: cover; /\* Equivalent to cover 0% cover 100% \*/
animation-range: contain; /\* Equivalent to contain 0% contain 100% \*/
animation-range: cover 20%; /\* Equivalent to cover 20% cover 100% \*/
animation-range: contain 100px; /\* Equivalent to contain 100px cover 100% \*/

/\* two values for range start and end \*/
animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /\* Equivalent to entry 0% exit 100% \*/
animation-range: cover cover 200px; /\* Equivalent to cover 0% cover 200px \*/
animation-range: entry 10% exit; /\* Equivalent to entry 10% exit 100% \*/
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;
```

The `animation-range` shorthand property can be applied to a container element as a combination of the `<animation-range-start>` and `<animation-range-end>` values. If both the values are specified, they will be interpreted in the order `<animation-range-start>` then `<animation-range-end>`.

As shown by the comments in the syntax block above, if only a single value is provided there are a couple of possible interpretations:

* If the value is a `<length-percentage>` or `normal`, `<animation-range-start>` will take that value, and `<animation-range-end>` will equal `normal`.
* If the value is a named timeline range without a `<length-percentage>` following it, the range will be between that named timeline range at 0% and 100%.
* If the value is a named timeline range with a `<length-percentage>` following it, the range will start at that named timeline range and percentage, and end at that named timeline range and 100%.
### Values

One or two values representing the `animation-range-start` and/or `animation-range-end`. These values can be one of the following:

`normal`

Represents the start of the timeline in the case of `animation-range-start` and the end of the timeline in the case of `animation-range-end`. This is the default value.

`<length-percentage>`

A length or percentage value measured from the beginning of the timeline.

`<timeline-range-name>`

A specific named timeline range inside the overall timeline. Possible values are:

`cover`

Represents the full range of a *named view progress timeline* (see CSS scroll-driven animations for more details), from the point where the subject element first starts to enter the scroll port's view progress visibility range (0% progress) to the point where it has completely left it (100% progress).

`contain`

Represents the range of a *named view progress timeline* where the subject element is fully contained by, or fully contains, the scroll port's view progress visibility range.

* If the subject element is smaller than the scrollport, it ranges from the point where the subject element is first completely contained by the scroll port (0% progress), to the point where it is no longer completely contained by the scroll port (100% progress).
* If the subject element is larger than the scrollport, it ranges from the point where the subject element first completely covers the scroll port (0% progress), to the point where it no longer completely covers the scroll port (100% progress).

`entry`

Represents the range of a *named view progress timeline* from the point where the subject element first starts to enter the scroll port (0% progress), to the point where it has completely entered the scroll port (100%).

`exit`

Represents the range of a *named view progress timeline* from the point where the subject element first starts to exit the scroll port (0% progress), to the point where it has completely exited the scroll port (100%).

`entry-crossing`

Represents the range of a *named view progress timeline* from the point where the subject element first starts to cross the scroll port's starting edge (0% progress), to the point where it has completely crossed the scroll port's starting edge (100%).

`exit-crossing`

Represents the range of a *named view progress timeline* from the point where the subject element first starts to cross the scroll port's end edge (0% progress), to the point where it has completely crossed the scroll port's end edge (100%).

In the case of `<timeline-range-name>` values that do not include a `<length-percentage>`, the percentage defaults to `0%` if it is an `animation-range-start` value, and `100%` if it is an `animation-range-end` value.

**Note:** It is quite hard to visualize what these values mean from the descriptions above. Fortunately, the View Timeline Ranges Visualizer shows exactly what they mean in an easy visual format.

`<timeline-range-name> <length-percentage>`

A combination value that equals the specified percentage or distance through the specified named timeline range, measured from the start of that timeline range.

**Note:** The scroll port (see Scroll container for more details) area known as the view progress visibility range is the area inside which the subject element of a *named view progress timeline* animation is deemed to be visible. By default, this is the full range of the scrollport, but it can be adjusted using the `view-timeline-inset` property.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `animation-range-start`: `normal`
* `animation-range-end`: `normal`
 |
| Applies to | all elements |
| Inherited | no |
| Percentages | Relative to the specified named timeline range if specified, otherwise relative to the entire timeline |
| Computed value | as each of the properties of the shorthand:* `animation-range-start`: A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage
* `animation-range-end`: A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage
 |
| Animation type | as each of the properties of the shorthand:* `animation-range-start`: Not animatable
* `animation-range-end`: Not animatable
 |

Formal syntax
-------------
```

animation-range =
  [ <'animation-range-start'> <'animation-range-end'>? ]#

```

Examples
--------

### View Timeline Ranges Visualizer

See the View Timeline Ranges Visualizer for a nice easy visual explanation of what all the value types mean.

### Creating a named view progress timeline with range

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`.
 This is then set as the timeline for the same element using `animation-timeline: --subjectReveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.

An `animation-range` declaration is also set to make the animation begin later than expected, and finish earlier.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range` declaration to make the animation begin later than expected, and finish earlier.

Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range: entry 10% contain 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### Result

Scroll to see the subject element being animated.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # animation-range |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `animation-timeline`
* `animation-range-end`, `animation-range-start`
* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope`
* `view-timeline-inset`
* CSS scroll-driven animations


Comments - CSS: Cascading Style Sheets

Comments
========

A CSS **comment** is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.

Syntax
------

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

```css
/\* Comment \*/
```

Examples
--------

```css
/\* A one-line comment \*/

/\*
A comment
which stretches
over several
lines
\*/

/\* The comment below is used to
 disable specific styling \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

Notes
-----

The `/* */` comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets. However, when using the `<style>` element, you may use `<!-- -->` to hide CSS from older browsers, although this is not recommended. As with most programming languages that use the `/* */` comment syntax, comments cannot be nested. In other words, the first instance of `*/` that follows an instance of `/*` closes the comment.

Specifications
--------------

* CSS 2.1 Syntax and basic data types #comments
See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


animation-play-state - CSS: Cascading Style Sheets

animation-play-state
====================

The **`animation-play-state`** CSS property sets whether an animation is running or paused.

Try it
------

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Syntax
------

```css
/\* Single animation \*/
animation-play-state: running;
animation-play-state: paused;

/\* Multiple animations \*/
animation-play-state: paused, running, running;

/\* Global values \*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
```

### Values

`running`

The **animation** is currently **playing**.

`paused`

The **animation** is currently **paused**.

**Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `running` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

animation-play-state =
  <single-animation-play-state>#

<single-animation-play-state> =
  running  |
  paused

```

Examples
--------

### Pausing an animation

This animation is paused, but runs when you hover over it.

#### HTML

```html
<div class="box"></div>
```

#### CSS

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

#### Result

Hover over the rectangle to play the animation.

See CSS animations for examples.

Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timeline`, `animation-timing-function`


:defined - CSS: Cascading Style Sheets

:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`:defined`** CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the `CustomElementRegistry.define()` method).

```css
/\* Selects any defined element \*/
:defined {
  font-style: italic;
}

/\* Selects any instance of a specific custom element \*/
simple-custom:defined {
  display: block;
}
```

Syntax
------

```css
:defined {
  /\* ... \*/
}
```

Examples
--------

### Hiding elements until they are defined

The following snippets are taken from our defined-pseudo-class demo (see it live also).

In this demo we define a very simple trivial custom element:

```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```

Then insert a copy of this element into the document, along with a standard `<p>`:

```html
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>
```

In the CSS we first include the following rules:

```css
/\* Give the two elements distinctive backgrounds \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* Both the custom and the built-in element are given italic text \*/
:defined {
  font-style: italic;
}
```

Then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements:

```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```

This is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page

Specifications
--------------

| Specification |
| --- |
| HTML Standard # selector-defined |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web components


font-kerning - CSS: Cascading Style Sheets

font-kerning
============

The **`font-kerning`** CSS property sets the use of the kerning information stored in a font.

Try it
------

*Kerning* defines how letters are spaced. In *well-kerned* fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.

In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do:

![Example of font-kerning](/en-US/docs/Web/CSS/font-kerning/font-kerning.png)

Syntax
------

```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/\* Global values \*/
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;
```

### Values

`auto`

The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.

`normal`

Font kerning information stored in the font must be applied.

`none`

Font kerning information stored in the font is disabled.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

font-kerning =
  auto    |
  normal  |
  none

```

Examples
--------

### Enabling and disabling kerning

#### HTML

```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

#### CSS

```css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}
```

#### JavaScript

```js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const nokern = document.getElementById("nokern");

input.addEventListener("keyup", () => {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-variant`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `letter-spacing`


padding-inline-start - CSS: Cascading Style Sheets

padding-inline-start
====================

The **`padding-inline-start`** CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------

```css
/\* <length> values \*/
padding-inline-start: 10px; /\* An absolute length \*/
padding-inline-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-start: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;
```

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block. Must be nonnegative.

Description
-----------

The `padding-inline-start` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-start`, `padding-block-end`, and `padding-inline-end`, which define the other paddings of the element.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

Formal syntax
-------------
```

padding-inline-start =
  <'padding-top'>

```

Examples
--------

### Setting inline start padding for vertical text

#### HTML

```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`


<display-inside> - CSS: Cascading Style Sheets

<display-inside>
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
These keywords specify the element's inner `display` type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the `<display-outside>` keywords.

Syntax
------

Valid `<display-inside>` values:

`flow`
Experimental

The element lays out its contents using flow layout (block-and-inline layout).

If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

Depending on the value of other properties (such as `position`, `float`, or `overflow`) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its contents or integrates its contents into its parent formatting context.

`flow-root`

The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.

`table`

These elements behave like HTML `<table>` elements. It defines a block-level box.

`flex`

The element behaves like a block element and lays out its content according to the flexbox model.

`grid`

The element behaves like a block element and lays out its content according to the grid model.

`ruby`
Experimental

The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML `<ruby>` elements.

**Note:** Browsers that support the two value syntax, on finding the inner value only, such as when `display: flex` or `display: grid` is specified, will set their outer value to `block`. This will result in expected behavior; for example if you specify an element to be `display: grid`, you would expect that the box created on the grid container would be a block level box.

Formal syntax
-------------
```

<display-inside> =
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

```

Examples
--------

In this example the parent box has been given `display: flow-root` and so establishes a new BFC and contains the floated item.

### HTML

```html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
```

### CSS

```css
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-inside |

Browser compatibility
---------------------

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Basic Concepts of Flexbox
* Basic Concepts of Grid Layout


<color-interpolation-method> - CSS: Cascading Style Sheets

<color-interpolation-method>
============================

The **`<color-interpolation-method>`** CSS data type represents the color space used for interpolation between `<color>` values. It can be used to override the default interpolation color space for color-related functional notations such as `color-mix()` and `linear-gradient()`.

When interpolating `<color>` values, the interpolation color space defaults to Oklab.

Syntax
------

The `<color-interpolation-method>` specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method:
```

in <rectangular-color-space>
// or
in <polar-color-space>[ <hue-interpolation method>]
```

### Values

`<rectangular-color-space>`

One of the keywords `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, or `xyz-d65`.

`<polar-color-space>`

One of the keywords `hsl`, `hwb`, `lch`, or `oklch`.

`<hue-interpolation-method>` Optional

The algorithm for hue interpolation. It defaults to `shorter hue`.

Formal syntax
-------------
```

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

Examples
--------

### Comparing interpolation color spaces using gradients

The following example shows the effect of using different interpolation color spaces for `linear-gradient()`.

#### HTML

```html
<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>
```

#### CSS
```

/\* Fallback styles \*/
.srgb {
  background-image: linear-gradient(
    to right,
    rgb(0% 0% 100%),
    rgb(20% 0% 80%),
    rgb(40% 0% 60%),
    rgb(60% 0% 40%),
    rgb(80% 0% 20%),
    rgb(100% 0% 0%)
  );
}
.oklab {
  background-image: linear-gradient(
    to right,
    oklab(45.2% -0.032 -0.312),
    oklab(48.7% 0.019 -0.224),
    oklab(52.2% 0.07 -0.137),
    oklab(55.8% 0.122 -0.049),
    oklab(59.3% 0.173 0.038),
    oklab(62.8% 0.225 0.126)
  );
}
.oklch-longer {
  background-image: linear-gradient(
    to right,
    oklch(45.2% 0.313 264),
    oklch(46.8% 0.308 243),
    oklch(48.4% 0.303 221),
    oklch(50% 0.298 200),
    oklch(51.6% 0.293 179),
    oklch(53.2% 0.288 157),
    oklch(54.8% 0.283 136),
    oklch(56.4% 0.278 115),
    oklch(58% 0.273 93),
    oklch(59.6% 0.268 72),
    oklch(61.2% 0.263 51),
    oklch(62.8% 0.258 29)
  );
}
```

```css
.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Color Module Level 4 # interpolation-space |

Browser compatibility
---------------------

### css.types.color.color-mix

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.conic-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.linear-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.radial-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.repeating-conic-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.repeating-linear-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.image.gradient.repeating-radial-gradient.interpolation\_color\_space

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<color>`, `<gradient>`
* `<hue-interpolation-method>`


border-end-start-radius - CSS: Cascading Style Sheets

border-end-start-radius
=======================

The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

Try it
------

This property affects the corner between the block-end and the inline-start sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-bottom-left-radius` property.

Syntax
------

```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-start-radius: 1em 2em;

/\* Global values \*/
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;
```

### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

border-end-start-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Border radius with vertical text

#### HTML

```html
<div>
  <p class="exampleText">Example</p>
</div>
```

#### CSS

```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}
```

#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-radius-properties |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* The mapped physical property: `border-top-right-radius`
* `writing-mode`, `direction`, `text-orientation`


text-decoration-style - CSS: Cascading Style Sheets

text-decoration-style
=====================

The **`text-decoration-style`** CSS property sets the style of the lines specified by `text-decoration-line`. The style applies to all lines that are set with `text-decoration-line`.

Try it
------

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like `<del>` or `<s>`. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead.

Syntax
------

```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/\* Global values \*/
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
```

### Values

solid

Draws a single line.

double

Draws a double line.

dotted

Draws a dotted line.

dashed

Draws a dashed line.

wavy

Draws a wavy line.

-moz-none
Non-standard

Draws no line. Use `text-decoration-line``: none` instead.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `solid` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

text-decoration-style =
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

```

Examples
--------

### Setting a wavy underline

The following creates a red wavy underline:

#### CSS

```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

#### HTML

```html
<p class="wavy">This text has a wavy red line beneath it.</p>
```

#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead.
* `text-decoration-line`
* `text-decoration-color`
* `text-decoration-thickness`
* `text-underline-offset`


minmax() - CSS: Cascading Style Sheets

minmax()
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The **`minmax()`** CSS function defines a size range greater than or equal to *min* and less than or equal to *max*. It is used with CSS Grids.

Try it
------

Syntax
------

```css
/\* <inflexible-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> values \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```

A function taking two parameters, *min* and *max*.

Each parameter can be a `<length>`, a `<percentage>`, a `<flex>` value, or one of the keyword values `max-content`, `min-content`, or `auto`.

If *max* < *min*, then *max* is ignored and `minmax(min,max)` is treated as *min*. As a maximum, a `<flex>` value sets the flex factor of a grid track; it is invalid as a minimum.

### Values

`<length>`

A non-negative length.

`<percentage>`

A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `<percentage>` must be treated as `auto`. The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

`<flex>`

A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

`max-content`

Represents the largest max-content contribution of the grid items occupying the grid track.

`min-content`

Represents the largest min-content contribution of the grid items occupying the grid track.

`auto`

 As `min`, it represents the largest minimum size (as specified by `min-width`/`min-height`) of the grid items occupying the grid track.
 As `max`, it is identical to `max-content`. However, unlike `max-content`, it allows expansion of the track by the `align-content` and `justify-content` property values like `normal` and `stretch`.

### Formal syntax
```

<minmax()> =
  minmax( min , max )

```

### CSS properties

`minmax()` function can be used within:

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-columns`
* `grid-auto-rows`
Examples
--------

### CSS

```css
#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML

```html
<div id="container">
  <div>Item as wide as the content, but at most 300 pixels.</div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Grid Layout Guide: *Basic concepts of grid layout - track sizing with minmax()*
* CSS grids, logical values and writing modes
* Video tutorial: *Introducing minmax()*


Basic concepts of scroll snap - CSS: Cascading Style Sheets

Basic concepts of scroll snap
=============================

The properties in the CSS scroll snap module enable you to define how scrolling snaps to specific points as a user scrolls through a document.

The scroll snap feature lets you define the snap positions where a scroll container's scrollport may end or "snap to" after a scrolling operation has completed.

Key properties for CSS scroll snap
----------------------------------

Before you can define scroll snapping, you need to enable scrolling on a scroll container. You can do this by ensuring that the scroll container has a defined size and that it has `overflow` enabled.

You can then define scroll snapping on the scroll container by using the following two key properties:

* `scroll-snap-type`: Using this property, you can define whether or not the scrollable viewport can be snapped to, whether snapping is required or optional, and the axis on which the snapping should occur.
* `scroll-snap-align`: This property is set on every child of the scroll container and you can use it to define each child's snap position or lack thereof.
* `scroll-snap-stop`: This property ensures that a child is snapped to during scrolling and not passed over.
* `scroll-margin`: This property can be set on child elements that are snapped to during scrolling to create an outset from the defined box.
* `scroll-padding`: This property can be set on the scroll container to create a snapping offset.

The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` applies on all the children of the `<section>` element, dictating the point where the scrolling of each child should stop.

Using scroll-snap-type
----------------------

The `scroll-snap-type` property needs to know the direction in which scroll snapping happens. This can be `x`, `y`, or the logical mappings `block` or `inline`. You can also use the keyword `both` to have scroll snapping work along both axes.

You can also pass in the keywords `mandatory` or `proximity`. The `mandatory` keyword tells the browser whether the content *has* to snap to a certain point, no matter where the scroll is. The `proximity` keyword means that the content may snap to the point, but does not have to.

Using `mandatory` creates a very consistent scrolling experience — you know the browser will always snap to each defined point. This means that you can be confident that something you expect to be at the top of the screen will be there when scrolling finishes. However, it can cause problems if the content is larger than you expect — users may find themselves in the frustrating position of never being able to scroll and view a certain point in the content. Therefore, the use of `mandatory` should be carefully considered and only used in situations where you know how much content is on the screen or scrollable section at any time.

**Note:** Never use `mandatory` if the content inside one of your child elements will overflow the parent container because user will not be able to scroll the overflowing content into view.

The `proximity` value only snaps child elements to a position when it is close by, with the browsers determining the exact distance.

In the example below, you can change the value between `mandatory` and `proximity` to see the effect this has on the scroll experience.

In the above example, both `height: 300px;` and `overflow-y: scroll;` are set on the scroll container.

If the content doesn't overflow its container, there is nothing to scroll.

Using scroll-snap-align
-----------------------

The valid values for the `scroll-snap-align` property include `start`, `end`, `center`, and `none`. These values are used to indicate the point in the scroll container to which the content should snap. In the example below, you can change the value of `scroll-snap-align` to see how this changes the scroll behavior.

If `scroll-snap-type` is `mandatory` and `scroll-snap-align` on a child is either set to `none` or not set (in which case, it defaults to `none`), the user will be unable to scroll that element into view.

Using scroll-padding
--------------------

When using `start` or `end`, if you do not want the content to snap right to the edge of the scroll container, or if you want the snap position to be slightly offset from center when using `center`, use the `scroll-padding` property or its equivalent longhand values to add some padding.

In the example below, `scroll-padding` is set to `40px`. When the content snaps to the start of the second and third sections, scrolling stops 40 pixels away from the start of the section. Try changing the `scroll-padding` value to see how this changes the distance.

This is potentially useful if you have a fixed element such as a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve space for the fixed element, as shown in the example below, where the `<h1>` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.

Using scroll-margin
-------------------

The `scroll-margin` property or the longhand scroll margin values can be set on child elements, defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.

Using scroll-snap-stop
----------------------

Using the `scroll-snap-stop` property, you can specify whether the scrolling must snap to the defined snap points. In the above examples, this would mean that the scrolling would stop at the start of each section or be able to skip past sections.

With this property definition, you can ensure that users see each section of the scroller and don't accidentally scroll past them. However, this setting can also negatively affect user experience by preventing the user from quickly scrolling to their desired content.

See also
--------

* CSS scroll snap module
* Well-controlled scrolling with CSS scroll snap on web.dev (2021)
* Practical CSS scroll snapping on CSS-Tricks (2020)
* CSS scroll snap on 12 Days of Web (2019)
* Scroll snap examples on Codepen


repeating-radial-gradient() - CSS: Cascading Style Sheets

repeating-radial-gradient()
===========================

The **`repeating-radial-gradient()`** CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to `radial-gradient()` and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to `repeating-linear-gradient()`. The function's result is an object of the `<gradient>` data type, which is a special kind of `<image>`.

Try it
------

With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color.

As with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `repeating-radial-gradient()` won't work on `background-color` and other properties that use the `<color>` data type.

Syntax
------

```css
/\* A gradient at the center of its container,
 starting red, changing to blue, and finishing green,
 with the colors repeating every 30px \*/
repeating-radial-gradient(circle at center, red 0, blue, green 30px)

/\* An elliptical gradient near the top left of its container,
 starting red, changing to green and back again,
 repeating five times between the center and the bottom right corner,
 and only once between the center and the top left corner \*/
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)
```

### 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:

| Keyword | Description |
| --- | --- |
| `closest-side` | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
| `closest-corner` | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
| `farthest-side` | Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
| `farthest-corner` | The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |

**Note:** Early implementations of this function included other keywords (`cover` and `contain`) as synonyms of the standard `farthest-corner` and `closest-side`, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

`<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.

### Formal syntax
```

<repeating-radial-gradient()> =
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<radial-shape> =
  circle   |
  ellipse

<radial-size> =
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<radial-extent> =
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side

<length-percentage> =
  <length>      |
  <percentage>

<linear-color-stop> =
  <color> <length-percentage>?

<linear-color-hint> =
  <length-percentage>

```

Examples
--------

### Black and white gradient
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 120px;
  height: 120px;
}
```

```css
.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}
```

### Farthest-corner
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}
```

The elliptical gradient will be centered 20% from the top left, and will repeat 10 times between the center and the farthest corner (the bottom right corner). Browsers supporting multi position color stops will display a red and green striped ellipse. Browsers not supporting the syntax yet will see a gradient that goes from red to black and then from blue to green.

### Interpolating with hue
```

<div class="shorter"></div>
<div class="longer"></div>
```

```
div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}
```

In this example for interpolation, hsl color system is being used and hue is being interpolated.

```css
.shorter {
  background-image: repeating-radial-gradient(
    circle at center in hsl shorter hue,
    red 30px,
    blue 60px
  );
}

.longer {
  background-image: repeating-radial-gradient(
    circle at center in hsl longer hue,
    red 30px,
    blue 60px
  );
}
```

The box on the left uses shorter interpolation, meaning the color goes from red to blue using the shorter arc on color wheel. The box on the right uses longer interpolation, meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.

**Note:** Please see Using CSS gradients for more examples.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3 # repeating-gradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS gradients
* Other gradient functions: `radial-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`
* `<hue-interpolation-method>`
* `<color-interpolation-method>`
* `<image>`
* `image()`
* `element()`
* `image-set()`
* `cross-fade()`


conic-gradient() - CSS: Cascading Style Sheets

conic-gradient()
================

The **`conic-gradient()`** CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the `conic-gradient()` function is an object of the `<gradient>` data type, which is a special kind of `<image>`.

Try it
------

Syntax
------

```css
/\* A conic gradient rotated 45 degrees,
 starting blue and finishing red \*/
conic-gradient(from 45deg, blue, red)

/\* A bluish purple box: the gradient goes from blue to red,
 but only the bottom right quadrant is visible, as the
 center of the conic gradient is at the top left corner \*/
conic-gradient(from 90deg at 0 0, blue, red)

/\* Interpolation in polar color space
 with longer hue interpolation method \*/
conic-gradient(in hsl longer hue, red, blue, green, red)

/\* Color wheel \*/
conic-gradient(
  hsl(360 100% 50%),
  hsl(315 100% 50%),
  hsl(270 100% 50%),
  hsl(225 100% 50%),
  hsl(180 100% 50%),
  hsl(135 100% 50%),
  hsl(90 100% 50%),
  hsl(45 100% 50%),
  hsl(0 100% 50%)
)
```

### Values

`<angle>`

Preceded by the `from` keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.

`<position>`

Using the same length, order, and keyterm values as the `background-position` property, the `position` value defines center of the gradient. If not specified, the value used for `position` by default is `center`, meaning the gradient will be centered.

`<angular-color-stop>`

A color-stop's `<color>` value, followed by one or two optional stop positions, (an `<angle>` along the gradient's circumference axis).

`<color-hint>`

An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

**Note:** Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Description
-----------

As with any gradient, a conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or the size of the `<image>` if it is set to something other than the element size.

To create a conic gradient that repeats so as to fill a 360 degree rotation, use the `repeating-conic-gradient()` function instead.

Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `conic-gradient()` won't work on `background-color` and other properties that use the `<color>` data type.

**Note:** Why is it called a "conic" gradient? If the color stops are much lighter on one side than the other, it can look like a cone from above.

### Composition of a conic gradient

The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions.

![color stops along the circumference of a conic gradient and the axis of a radial gradient.](/en-US/docs/Web/CSS/gradient/conic-gradient/screenshot_2018-11-29_21.09.19.png)

A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a `<length>`, the color-stops of a conic gradient are specified with an angle. Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

Similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position.

The gradient arc is the circumference of the gradient. The *starting point* of the gradient or arc is north, or 12:00pm. The gradient is then rotated by the *from* angle. The colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. The transitions between colors can be altered with color hints between adjacent colors' color stops.

#### Customizing gradients

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an `<angle>`. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent:

```css
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
```

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

```css
conic-gradient(red 40grad, 80grad, blue 360grad);
```

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts — which is NOT the correct way to create pie charts as background images are not accessible — use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multiple position colors stops. The following two declarations are equivalent:

```css
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
```

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient:

```css
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
```

There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

```css
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;
```

And, yes, you can mix and match different angle units, but don't. The above is hard to read.

Formal syntax
-------------
```

<conic-gradient()> =
  conic-gradient( [ <conic-gradient-syntax> ] )

<conic-gradient-syntax> =
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#

<length-percentage> =
  <length>      |
  <percentage>

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

<angular-color-stop> =
  <color> <color-stop-angle>?

<angular-color-hint> =
  <angle-percentage>

<color-stop-angle> =
  <angle-percentage>{1,2}

<angle-percentage> =
  <angle>       |
  <percentage>

```

Accessibility concerns
----------------------

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Examples
--------

### Gradient at 40-degrees
```

div {
  width: 100px;
  height: 100px;
}
```

```
<div></div>
```

```css
div {
  background-image: conic-gradient(from 40deg, #fff, #000);
}
```

### Off-centered gradient
```

div {
  width: 100px;
  height: 100px;
}
```

```
<div></div>
```

```css
div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}
```

### Gradient pie-chart

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
```

div {
  width: 100px;
  height: 100px;
}
```

```
<div></div>
```

```css
div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}
```

### Checkerboard
```

div {
  width: 100px;
  height: 100px;
}
```

```
<div></div>
```

```css
div {
  background: conic-gradient(
      #fff 0.25turn,
      #000 0.25turn 0.5turn,
      #fff 0.5turn 0.75turn,
      #000 0.75turn
    ) top left / 25% 25% repeat;
  border: 1px solid;
}
```

### Interpolating with hue
```

<div class="shorter"></div>
<div class="longer"></div>
```

```
div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}
```

In this example for interpolation hsl color system is being used and hue is being interpolated.

```css
.shorter {
  background-image: conic-gradient(in hsl shorter hue, red, blue);
}

.longer {
  background-image: conic-gradient(in hsl longer hue, red, blue);
}
```

The box on the left uses shorter interpolation, meaning color goes straight from red to blue using the shorter arc on the color wheel. The box on the right uses longer interpolation, meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.

### More conic-gradient examples

Please see Using CSS gradients for more examples.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 4 # conic-gradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS gradients
* Other gradient functions: `repeating-conic-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`
* `<hue-interpolation-method>`
* `<color-interpolation-method>`
* `<image>`
* `image()`
* `element()`
* `image-set()`
* `cross-fade()`


radial-gradient() - CSS: Cascading Style Sheets

radial-gradient()
=================

The **`radial-gradient()`** CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the `<gradient>` data type, which is a special kind of `<image>`.

Try it
------

Syntax
------

```css
/\* A gradient at the center of its container,
 starting red, changing to blue, and finishing green \*/
radial-gradient(circle at center, red 0, blue, green 100%)

/\* hsl color space with longer hue interpolation \*/
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)
```

A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the *ending shape* (the 100% ellipse).

### Values

`<position>`

The position of the gradient, interpreted in the same way as `background-position` or `transform-origin`. If unspecified, it defaults to `center`.

`<ending-shape>`

The gradient's ending-shape. The value can be `circle` (meaning that the gradient's shape is a circle with a constant radius) or `ellipse` (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to `ellipse`.

`<size>`

Determines the size of the gradient's ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments.

Both circle and ellipse gradients accept the following keywords for their `<size>`:

| Keyword | Description |
| --- | --- |
| `closest-side` | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
| `closest-corner` | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
| `farthest-side` | Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
| `farthest-corner` | The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |

If `<ending-shape>` is specified as `circle`, the size may be given explicitly as a `<length>`, which provides an explicit circle radius. Negative values are invalid.

If `<ending-shape>` is specified as `ellipse`, the size may be given as a `<length-percentage>` with two values to provide an explicit ellipse size. The first value represents the horizontal radius and the second is the vertical radius. Percentage values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

When the `<ending-shape>` keyword is omitted, the gradient shape is determined by the size given. One `<length>` value provides a circle, while two values in `<length-percentage>`units provide an ellipse. A single `<percentage>` value is not valid.

`<linear-color-stop>`

A color-stop's `<color>` value, followed by one or two optional stop positions (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 gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.

`<color-hint>`

The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Description
-----------

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a radial gradient that repeats so as to fill its container, use the `repeating-radial-gradient()` function instead.

Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `radial-gradient()` won't work on `background-color` and other properties that use the `<color>` data type.

### Composition of a radial gradient

![Graph explaining radial gradients: the virtual radiant ray is horizontal starting from the midpoint. The elliptical gradient, and therefore the ending shape, has the same aspect ratio as the box upon which it is declared.](/en-US/docs/Web/CSS/gradient/radial-gradient/radial_gradient.png)

A radial gradient is defined by a *center point*, an *ending shape*, and two or more *color-stop points*.

To create a smooth gradient, the `radial-gradient()` function draws a series of concentric shapes radiating out from the center to the *ending shape* (and potentially beyond). The ending shape may be either a circle or an ellipse.

Color-stop points are positioned on a *virtual gradient ray* that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents `100%`. Each shape is a single color determined by the color on the gradient ray it intersects.

Formal syntax
-------------
```

<radial-gradient()> =
  radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<radial-shape> =
  circle   |
  ellipse

<radial-size> =
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<radial-extent> =
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side

<length-percentage> =
  <length>      |
  <percentage>

<linear-color-stop> =
  <color> <length-percentage>?

<linear-color-hint> =
  <length-percentage>

```

Examples
--------

### Simple gradient
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
```

### Non-centered gradient
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 0%,
    #43e 100%
  );
}
```

### Interpolating with hue
```

<div class="shorter"></div>
<div class="longer"></div>
```

```
div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}
```

In this example for interpolation, hsl color system is being used and hue is being interpolated.

```css
.shorter {
  background-image: radial-gradient(
    circle at center in hsl shorter hue,
    red,
    blue
  );
}

.longer {
  background-image: radial-gradient(
    circle at center in hsl longer hue,
    red,
    blue
  );
}
```

The box on the left uses shorter interpolation, meaning the color goes straight from red to blue using the shorter arc on color wheel. The box on the right uses longer interpolation, meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.

### More radial-gradient examples

Please see Using CSS gradients for more examples.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3 # radial-gradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS gradients
* Other gradient functions: `repeating-radial-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`
* `<hue-interpolation-method>`
* `<color-interpolation-method>`
* `<image>`
* `image()`
* `element()`
* `image-set()`
* `cross-fade()`


repeating-conic-gradient() - CSS: Cascading Style Sheets

repeating-conic-gradient()
==========================

The **`repeating-conic-gradient()`** CSS function creates an image consisting of a repeating gradient (rather than a `single gradient`) with color transitions rotated around a center point (rather than `radiating from the center`).

Try it
------

Syntax
------

```css
/\* Starburst: a blue on blue starburst: the gradient
 is a starburst of lighter and darker blue,
 centered in the upper left quadrant,
 offset by 3degrees so there is no up/down straight line \*/
repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200 100% 50%) 0deg 15deg,
  hsl(200 100% 60%) 10deg 30deg
)

/\* Interpolation in polar color space
 with longer hue interpolation method \*/
repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)
```

### Values

`<angle>`

Preceded by the `from` keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.

`<position>`

Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is `center`, meaning the gradient will be centered.

`<angular-color-stop>`

A color-stop's `<color>` value, followed by one or two optional stop positions, (an `<angle>` along the gradient's circumference axis). The last color stop minus the first color-stop angle defines the size of the repeating gradient.

`<color-hint>`

An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

**Note:** Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Description
-----------

Example repeating conic gradients include starbursts. The result of the `repeating-conic-gradient()` function is an object of the `<gradient>` data type, which is a special kind of `<image>`.

If neither the first nor the last color stops include a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat.

As with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or the size the `<image>` is set to if it's set to something other than the element's size.

Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `repeating-conic-gradient()` won't work on `background-color` and other properties that use the `<color>` data type.

**Note:** To create a conic gradient that does not repeat, make the gradient a full 360 degree rotation, or use the `conic-gradient()` function instead.

### Understanding repeating conic gradients

The repeating-conic-gradient syntax is similar to the `conic-gradient()` and `repeating-radial-gradient()` syntax. Like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. Like the repeating radial gradient, the size of the repeating section is the first color stop subtracted from the angle of the last color stop.

![Comparison of the color stops for repeating and non-repeating conic and radial gradients](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient/repeatingconicgradient.png)

The above gradients are defined as being one third blue, one third red, and one third yellow.

```css
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);
```

For a repeating gradient to repeat we define the first and last color stops. Like in non-repeating gradients, the first and last color stops are assumed to be 0 and either 100% or 360deg if not explicitly declared. When defaulting to these values, the repeating arc is 360 degrees, and therefore doesn't repeat.

Like the non-repeating conic gradient, the color-stops are placed around a gradient arc — the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. The colors transition as if spun around the center of a circle, starting at the top if no `from <angle>` is declared, and going clockwise for the size of the angle that is the different between the largest and smallest color angle, then repeating.

A repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an `<angle>`. Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

Radial and conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value `background-position`.

The gradient arc is part of the circumference of the gradient. 0 degrees is north, or 12:00pm. The colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. The transitions between colors can be altered with color hints between adjacent colors' color stops.

#### Customizing gradients

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an `<angle>`. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. Like the non-repeating gradient counterpart, if you don't specify an angle for the first or last color stop, the values will be 0deg and 360deg. If you don't declare an angle for either, you'll get a non-repeating conic gradient. If you declare a non 0 or 360degree for the first or last respectively, the gradient will repeat based on that value. For example, if you don't declare an angle for the first color, and declare 10% on the last color stop, the arc will repeat 10 times. Rather, the starting point is the first color stop declared, and the last color stop is the last color stop angle declared. The following two gradients are equivalent:

```css
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
```

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be.

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

While you can mix and match different angle units, don't. It makes CSS hard to read.

### Formal syntax
```

<repeating-conic-gradient()> =
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )

<conic-gradient-syntax> =
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#

<length-percentage> =
  <length>      |
  <percentage>

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

<angular-color-stop> =
  <color> <color-stop-angle>?

<angular-color-hint> =
  <angle-percentage>

<color-stop-angle> =
  <angle-percentage>{1,2}

<angle-percentage> =
  <angle>       |
  <percentage>

```

Accessibility concerns
----------------------

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Examples
--------

### Black and white starburst
```

div {
  width: 200px;
  height: 200px;
}
```

```
<div></div>
```

```css
div {
  background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
```

### Off-centered gradient

This gradient repeats 18 times, but since we only see the right half, we only see 9 repeats.
```

div {
  width: 200px;
  height: 200px;
}
```

```
<div></div>
```

```css
div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}
```

### Interpolating with hue
```

<div class="shorter"></div>
<div class="longer"></div>
```

```
div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}
```

In this example for interpolation, hsl color system is being used and hue is being interpolated.

```css
.shorter {
  background-image: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );
}

.longer {
  background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );
}
```

The box on the left uses shorter interpolation, meaning color goes straight from red to blue using the shorter arc on the color wheel. The box on the right uses longer interpolation, meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.

### More repeating-conic-gradient examples

Please see Using CSS gradients for more examples.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 4 # repeating-gradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS gradients
* Other gradient functions: `conic-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`
* `<hue-interpolation-method>`
* `<color-interpolation-method>`
* `<image>`
* `image()`
* `element()`
* `image-set()`
* `cross-fade()`