system - CSS: Cascading Style Sheets

system
======

The **`system`** descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a `@counter-style` to define the behavior of the defined style.

If the algorithm specified in the `system` descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided.

Syntax
------

```css
/\* Keyword values \*/
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/\* Other values \*/
system: fixed 3;
system: extends decimal;
system: extends circled-letters;
```

Values
------

This may take one of three forms:

* One of the keyword values `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, or `fixed`.
* The keyword value `fixed` along with an integer.
* The keyword value `extends` along with a `<counter-style-name>` value.

The values include:

`cyclic`

Cycles through the list of symbols provided in the `symbols` descriptor. Once the end of the list is reached, the cycle will loop back to the beginning and start over. This value is useful both for basic bullet styles with just one symbol and for styles with multiple symbols. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid.

`numeric`

Interprets the counter symbols as digits in a place-value numbering system. The numeric system is similar to the `alphabetic` system, described above. The main difference is that in the `alphabetic` system, the first counter symbol given in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. However, in the numeric system, the first counter symbol is interpreted as 0, the next as `1`, then `2`, and so on.

At least two counter symbols must be specified in the `symbols` descriptor or the counter style is not valid.

`alphabetic`

Interprets the specified symbols as digits, to an alphabetic numbering system. If the characters `"a"` to `"z"` are specified as symbols in a counter style, with the `alphabetic` system, then the first 26 counter representations will be `"a"`, `"b"` up to `"z"`. Until this point, the behavior is the same as that of the `symbolic` system, described above. However, after `"z"`, it will continue as `"aa"`, `"ab"`, `"ac"`…

The `symbols` descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. This system is also defined strictly over positive counter values.

`symbolic`

Cycles through the symbols provided in the `symbols` descriptor list repeatedly, doubling, tripling, and so on, the symbols on each successive pass through the list. For example, if two symbols "◽" and "◾" are specified in the `symbols` descriptor, on each successive pass, they will become "◽◽" and "◾◾", then "◽◽◽" and "◾◾◾", and so on in subsequent passes. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid. This counter system works for positive counter values only.

`additive`

Used to represent "sign-value" numbering systems, such as Roman numerals, which rather than reuse digits in different positions to obtain different values, define additional digits for larger values. The value of a number in such a system can be found out by adding the digits in the number.

An additional descriptor called `additive-symbols` must be specified with at least one *additive tuple*, or else the counter style rule will not be valid. An additive tuple is similar to a composite counter symbol, which is made up of two parts: a normal counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights or the system is invalid.

`fixed` or `fixed <integer>`

Defines a finite set of symbols, iterating once through the list of symbols provided in the `symbols` descriptor. Once the specified symbols have been iterated through, the fallback counter style is used. This keyword value is useful in cases where the counter style values are finite. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid. The `fixed` keyword can be followed by an optional `<integer>` value. If specified, the `<integer>` value indicates the item in the list that will get the first symbol from the list of symbols. If omitted, the default value of `integer` is `1`, which gives the first item in the list the first symbol.

`extends`

Extends the algorithm of another browser- or author-defined counter style by allowing the alteration of some aspects of the extended counter style. Any unspecified descriptors and their values are inherited from the extended counter style specified. If the counter style name specified with `extends` is not yet defined, the `decimal` counter style will be extended by default.

It must not contain a `symbols` or `additive-symbols` descriptor, otherwise the counter style rule will be invalid. If one or more counter styles definitions form a cycle with their `extends` values, the browser will treat all the participating counter styles as extending from the `decimal` style.

**Note:** The `symbols` descriptor is required when the value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`. The `additive-symbols` descriptor is required if the `additive` value is set.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `symbolic` |
| Computed value | as specified |

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

system =
  cyclic                            |
  numeric                           |
  alphabetic                        |
  symbolic                          |
  additive                          |
  [ fixed <integer>? ]              |
  [ extends <counter-style-name> ]

```

Examples
--------

### Cyclic counter

The `cyclic` value iterates through the list of symbols, repeating the list as necessary:

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
```

```css
@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}
```

#### Result

### Fixed counter

The `fixed` value iterates through the list of symbols only once, starting the single cycle at the list item number indicated by the `integer` value:

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
```

```css
@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}
```

#### Result

### Symbolic counter

The `symbolic` value loops through the list defined in the `symbols` descriptor, doubling and tripling the number of symbols for the second and third cycles through the list, respectively:

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### Result

### Alphabetic counter

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### Result

### Numeric counter

The first symbol provided in the `symbols` descriptor is interpreted as `0` here.

#### CSS
```

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>
```

```css
@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}
```

#### Result

### Numeric counter with numeric symbols

As shown in the following example, if digits from `0` to `9` are specified as symbols, this counter style will render symbols same as the decimal counter style.

#### CSS
```

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
```

```css
@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}
```

#### Result

### Additive counter

This example renders a list using Roman numerals. Notice that a `range` is specified. This is because the representation will produce correct Roman numerals only until the counter value of `3999`. Once outside of the range, the rest of the counter representations will be based on the `decimal` style, which is the fall back. If you need to represent counter values as Roman numerals, you could use either one of the predefined counter styles, `upper-roman` or `lower-roman`, rather than recreating the rule yourself.

#### HTML

We use the `start` attribute on the `<ol>` element to demonstrate that counting doesn't need to start at `1`. Additionally, we use the `value` attribute on the fifth `<li>` element to demonstrate that the counters you define using `@counter-style` behave just like native counters.

```html
<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
  <ol></ol>
</ol>
```

#### CSS

```css
@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}
```

#### Result

### Extending a counter

This example uses the algorithm, symbols, and other properties of `lower-alpha`, one of the several native `list-style-type` counter values, but extends it by removing the period (`'.'`) after the counter representation and enclosing the characters in parentheses, as in `(a)` and `(b)`.

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

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

See also
--------

* Other `@counter-style` descriptors, including `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, the functional notation creating anonymous counter styles.


pad - CSS: Cascading Style Sheets

pad
===

The **`pad`** descriptor of the `@counter-style` at-rule is used to set a minimum length for marker representations.

Syntax
------

```css
pad: 3 "0";
pad: "+" 5;
```

### Values

The descriptor accepts the following two values, which are separated by a space and can be specified in any order:

`<integer>`

Specifies the minimum length that all marker representations must reach. The value must be non-negative. In the case of the `pad` descriptor, this value is also known as the *pad length*.

`<symbol>`

Specifies the symbol to be used for padding if the minimum length defined by the `<integer>` is not reached. In the case of the `pad` descriptor, this value is also known as the *padding symbol*.

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

Use the `pad` descriptor when you need the marker representations to be of a minimum length. If a marker representation is shorter than the specified pad length, then the marker representation will be padded with the specified padding symbol. Marker representations longer than the pad length are displayed without any additional padding.

The `pad` descriptor takes an `<integer>` for the minimum marker length and a `<symbol>` for the padding. A common use case of the `pad` descriptor is when you need a list to start numbering from `01` and go through `02`, `03`, `04`, and so on, instead of just `1`, `2`, `3`, and `4`. By specifying the `pad` descriptor as `pad: 2 "0"` in this case, the browser ensures to make the counter at least two characters long and adds a padding with `0` to reach the minimum two-character length where needed. Counters that are already two or more characters long in this example will be displayed normally, without padding.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `0 ""` |
| Computed value | as specified |

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

pad =
  <integer [0,∞]>  &&
  <symbol>

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Padding a counter

This example extends the `decimal` `system` to create a counter that is at least three characters long, padding shorter counters with `0` to reach that minimum length. A `suffix` descriptor has been added to make the output more legible.

#### HTML

```html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li value="40">Forty</li>
  <li>Forty-one</li>
  <li value="200">Two hundred</li>
  <li value="3000">Three thousand</li>
  <li>and so on</li>
</ul>
```

#### CSS

```css
@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-pad |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-image`, `list-style-position`
* `symbols()` function to create anonymous counter styles
* CSS counter styles module
* CSS lists and counters module


suffix - CSS: Cascading Style Sheets

suffix
======

The **`suffix`** descriptor of the `@counter-style` rule specifies content that will be added to the end of the marker representation.

Syntax
------

```css
/\* <symbol> value: string, image, or identifier \*/
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
```

### Values

The **`suffix`** descriptor takes as its value a single `<symbol>`:

`<symbol>`

Specifies a `<symbol>` that is appended to the marker representation. It may be a `<string>`, `<image>`, or `<custom-ident>`.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | ". " (full stop followed by a space) |
| Computed value | as specified |

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

suffix =
  <symbol>

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Setting a suffix for a counter

#### HTML

```html
<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>
```

#### CSS

```css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-suffix |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `range`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles
* CSS counter styles module
* CSS lists and counters module


negative - CSS: Cascading Style Sheets

negative
========

The **`negative`** descriptor of the `@counter-style` at-rule lets you define how negative counter values are represented when defining custom counter styles. The value of the `negative` descriptor defines the symbols to be added before and after the counter representation when the counter's value is negative.

Syntax
------

```css
/\* One <symbol> value \*/
negative: "--"; /\* Adds '--' before if counter value is negative \*/

/\* Two <symbol> values \*/
negative: "(" ")"; /\* Adds '(- before and ')' after if counter value is negative \*/
```

### Values

The `negative` descriptor accepts up to two `<symbol>` values.

`<symbol>`

If only one value is specified, it is added before the counter representation when the counter is negative. If two values are specified, the first one is added before and the second one is added after the counter representation when the counter is negative.

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

If the counter value is negative, the specified `<symbol>` for the `negative` descriptor is added before the counter representation, replacing the default `-` for negative values. The second `<symbol>`, if specified, is added after the counter representation.

The `negative` descriptor is relevant in two cases: if counter styles have the `system` value of `symbolic`, `alphabetic`, `numeric`, and `additive` and the count is negative; and if `system` value is `extends` and the extended counter style itself uses a negative sign. For systems that don't support negative counter values, specifying the `negative` descriptor has no effect and is ignored.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `"-" hyphen-minus` |
| Computed value | as specified |

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

negative =
  <symbol> <symbol>?

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Rendering negative counters

This example extends the `decimal` list style. The `negative` descriptor is used to add `(-` and `)` before and after negative counter values.

#### HTML

```html
<ol start="-3">
  <li>Negative three</li>
  <li>Negative two</li>
  <li>Negative one</li>
  <li>Zero</li>
  <li>One</li>
</ol>
```

#### CSS

```css
@counter-style neg {
  system: extends decimal;
  negative: "(-" ")";
  suffix: ": ";
}

ol {
  list-style: neg;
}
```

#### Result

The prefix and suffix listed as the value of the `negative` descriptor are only added to the marker when the counter value is less than zero.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-image`, `list-style-position`
* `symbols()` function to create anonymous counter styles
* CSS counter styles module
* CSS lists and counters module


range - CSS: Cascading Style Sheets

range
=====

The **`range`** descriptor lets the author specify one or more ranges of counter values for which the style is applied when defining custom counter styles with the `@counter-style` at-rule. When the `range` descriptor is included, the defined counter will only be used for values in the set ranges. If the counter value is outside the specified range, the fallback style will be used to construct the representation of that marker.

Syntax
------

```css
/\* Keyword value \*/
range: auto;

/\* Range values \*/
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/\* Multiple range values \*/
range:
  2 5,
  8 10;
range:
  infinite 6,
  10 infinite;
```

### Values

The value is a comma-separated list of ranges each including a lower and upper limit or the keyword `auto`.

`auto`

The entire set of numbers representable by the counter `system`. Those range values depends on the counter system:

* For `cyclic`, `numeric`, and `fixed` systems, the range is negative `infinity` to positive `infinity`.
* For `alphabetic` and `symbolic` systems, the range is `1` to positive `infinity`.
* For `additive` systems, the range is `0` to `positive` infinity.
* When using `extend` to extend a system, the range is whatever `auto` would produce for the system being extended, including extensions of complex predefined styles, such as some Japanese, Korean, Chinese, and Ethiopian counter styles.

`[ [ <integer> | infinite ]{2} ]#`

Each range within the comma separated list of ranges includes two values, each being either an `<integer>` or the keyword `infinite`. If `infinite` is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The first value of each range is the lower bound for the range and the second value is the upper bound, inclusive. If the lower bound of any range in the list is higher than the upper bound, the entire `range` descriptor is invalid and will be ignored.

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

The value of the `range` descriptor can be either `auto` or a comma separated list of lower and upper bound ranges specified using negative or positive integers or the keyword `infinite`.

### Understanding `auto`

When the value is set to `auto`, the range is the default range for the counter system. If the `system` is `cyclic`, `numeric`, or `fixed`, the range will be from negative infinity to positive infinity. If the `system` is `alphabetic` or `symbolic`, the range will be from `1` to positive `infinity`. For `system: additive`, `auto` results in the range `0` to positive `infinity`.

When extending a counter, if `range` is set to `auto`, the range value will be the range of the `system` of the counter that is being extended, not the `range` value, if any, of that counter. For example, if counter "B" has the `system: extends A` set, with counter being an `alphabetic` counter, setting `range: auto` on "B" sets the range of "B" from `1` to `infinity`. This is the range of the `alphabetic` system, not necessarily the range set in the "A" counter style definiton. With `range: auto` set on "B", the `range` is set to the default range of the `alphabetic` system, not the `range` value set in counter A's descriptor list.

### `infinite` explained

When range is specified as integers (versus `auto`), the value `infinite` can be used to denote infinity. If *infinite* is specified as the first value in a range, then it is interpreted as negative infinity. If used as the upper bound, the second value in the range pair, it is taken as positive infinity.

### List of ranges

The value of `range` is either `auto`, discussed above, or a comma separated list of one or more ranges. The range of the counter style is the union of all the ranges defined in the list.

Each range in the list of ranges takes two values. Those values are either an `<integer>` or the keyword `infinite`. The first value is the *lower bound*, inclusive. The second value is the *upper bound*, inclusive. For two integer values, the lower value must come first. If the lower bound of any range in the list is higher than the upper bound, the entire `range` descriptor is invalid and will be ignored. The `infinite` keyword will not invalidated the range as it's position determines it's value; either negative or positive infinity based on whether it's the lower bound or upper bound, respectively.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `auto` |
| Computed value | as specified |

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

range =
  [ [ <integer> | infinite ]{2} ]#  |
  auto

```

Examples
--------

### Setting counter style over a range

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
```

#### CSS

```css
@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}
```

#### Result

The first range is the list of ranges includes 2, 3, and 4. The second includes 7, 8, and 9. The range is the union of these two ranges, or 2, 3, 4, 7, 8, and 9.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-range |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles.
* CSS counter styles module
* CSS lists and counters module


additive-symbols - CSS: Cascading Style Sheets

additive-symbols
================

The **`additive-symbols`** descriptor of the `@counter-style` at-rule is used to specify counter symbols when the `@counter-style` `system` descriptor value is set as `additive`. The additive system is used to construct sign-value numbering systems such as Roman numerals.

Syntax
------

```css
/\* Single tuple \*/
additive-symbols: 3 "\*";

/\* Comma-separated list of tuples \*/
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url(symbol.png);

/\* Binary counter \*/
additive-symbols:
  2 "1",
  1 "0";

/\* Etruscan (a civilization in ancient Italy) counter \*/
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";
```

### Values

The descriptor accepts a comma-separated list of *additive tuples* with each tuple consisting of the following two values separated by a space:

`<integer>`

A non-negative integer values specifying the integer weight of the associated symbol value of the tuple.

`<symbol>`

Specifies the counter symbol to be used for the weight value defined by the associated `<integer>` weight value of the tuple.

**Note:** The additive tuples must be specified in order of descending weight; otherwise, the descriptor declaration isn't valid and is ignored.

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

The `additive-symbols` descriptor defines a comma-separated list of *additive tuples*. Each *additive tuple* contains a space-separated non-negative integer and counter symbol. To be valid, the list must be in the descending order of integer. The integer and symbol are concatenated together to form the counter symbol.

When the `system` descriptor value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, use the `symbols()` descriptor instead of `additive-symbols`.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

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

additive-symbols =
  [ <integer [0,∞]> && <symbol> ]#

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Specifying additive symbols

#### HTML

In this example, `system: additive` along with the `additive-symbols` descriptor values specify how numbers should be represented as Roman numerals. The value of each `<li>` element in the list is converted to a Roman numeral according to the rules defined in `@counter-style`.

```html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>
```

#### CSS

```css
@counter-style uppercase-roman {
  system: additive;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: uppercase-roman;
  padding-left: 5em;
}
```

#### Result

For the list item with the value of `109`, the numeral `C` represents `100`, and `IX` represents `9`. This generates `CIX` counter for the list item `109`. The next list item automatically gets a value of `110`. The roman numeral `CX` is derived from `C` for `100` and `X` for `10`.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-image`, `list-style-position`
* `symbols()` function to create anonymous counter styles
* CSS counter styles module


speak-as - CSS: Cascading Style Sheets

speak-as
========

The **`speak-as`** descriptor specifies how a counter symbol constructed with a given `@counter-style` will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.

Syntax
------

```css
/\* Keyword values \*/
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/\* @counter-style name value \*/
speak-as: <counter-style-name>;
```

### Values

`auto`

If the value of `speak-as` is specified as `auto`, then the effective value of `speak-as` will be determined based on the value of the `system` descriptor:

* If the value of `system` is `alphabetic`, the effective value of `speak-as` will be `spell-out`.
* If `system` is `cyclic`, the effective value of `speak-as` will be `bullets`.
* If `system` is `extends`, the value of `speak-as` will be the same as if `speak-as: auto` is specified on the extended style.
* For all other cases, specifying `auto` has the same effect as specifying `speak-as: numbers`.

`bullets`

A phrase or an audio cue defined by the user agent for representing an unordered list item will be read out.

`numbers`

The numerical value of the counter will be read out in the document language.

`words`

The user agent will generate a counter value as normal and read it out as a word in the document language.

`spell-out`

The user agent will generate a counter representation as normal and would read it out letter by letter. If the user agent doesn't know how to read out a particular counter symbol, the user agent might read it out as if the value of `speak-as` was `numbers`.

`<counter-style-name>`

The name of another counter style, specified as a `<custom-ident>`. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the `fallback` descriptor. If the specified style does not exist, `speak-as` defaults to `auto`.

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

Assistive technology support is very limited for the `speak-as` property. Do not rely on it to convey information critical to understanding the page's purpose.

Let's Talk About Speech CSS | CSS Tricks (2017)

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `auto` |
| Computed value | as specified |

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

speak-as =
  auto                  |
  bullets               |
  numbers               |
  words                 |
  spell-out             |
  <counter-style-name>

```

Examples
--------

### Setting the spoken form for a counter

In this example, the counter system is fixed with unintelligible symbols used for the visual markers. However, the `speak-as` descriptor is used to set the list item markers as numbers in the accessibility tree. When supported, numbers rather than visual markers will be read out by screen readers.

To experience the result of the `speak-as` descriptor, use assistive technology such as VoiceOver or another screen reader or view the accessibility panel in the developer tools of a browser that supports `speak-as`.

#### HTML

```html
<ul class="list">
  <li>I had one apple</li>
  <li>I ate two bananas</li>
  <li>I devoured three oranges</li>
  <li>I am not hungry for dinner</li>
  <li>But I'll have five scopps of ice cream for desert</li>
</ul>
```

#### CSS

```css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-speak-as |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles.
* CSS counter styles module
* CSS lists and counters module


prefix - CSS: Cascading Style Sheets

prefix
======

The `@counter-style` rule's **`prefix`** descriptor specifies content that will be added to the beginning of the counter's marker representation.

When the counter value is negative, the `prefix` comes before the negative sign and any other `<symbol>`s added by the `negative` descriptor.

Syntax
------

```css
/\* <symbol> value: string, image, or identifier \*/
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
```

### Values

The **`prefix`** descriptor takes as its value a single `<symbol>`:

`<symbol>`

Specifies a `<symbol>` — a `<string>`, `<image>`, or `<custom-ident>` — that is prepended to the marker representation.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | "" (the empty string) |
| Computed value | as specified |

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

prefix =
  <symbol>

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Adding a prefix to a counter

In this example, each counter number is prefixed by "Book " (with a space) and followed by a colon (`:`). The colon is added with the `suffix` descriptor.

#### HTML

```html
<ol class="books">
  <li>Flamer, by Mike Curato</li>
  <li>Gender Queer: A Memoir, by Maia Kobabe</li>
  <li>Tricks, by Ellen Hopkins</li>
  <li>The Handmaid’s Tale: The Graphic Novel, by Margaret Atwood</li>
  <li>Crank, by Ellen Hopkins</li>
</ol>
```

#### CSS

```css
@counter-style books {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Book ";
  suffix: ": ";
}

.books {
  list-style: books;
  padding-left: 15ch;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-prefix |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `suffix`, `range`, `pad`, `speak-as`, and `fallback`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles
* CSS counter styles module
* CSS lists and counters module


symbols - CSS: Cascading Style Sheets

symbols
=======

The **`symbols`** CSS descriptor of the `@counter-style` at-rule is used to specify the symbols for creating counter representations in the specified counter system. Specifying this descriptor is mandatory when the value of the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`.

Syntax
------

```css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;
```

### Values

The `symbols` descriptor is specified as a list of one or more space-separated `<symbol>` values.

`<symbol>`

Specifies the symbol to use within the counter system. Each symbol in the list can be either a `<string>`, an `<image>`, or a `<custom-ident>`. The `<image>` value can, in turn, be specified as a `<url>()` or `<gradient>`.

**Note:** When using an identifier for a symbol, note that ASCII non-letters such as `*`, `"`, and `\` are not considered identifiers. They must be either quoted as a string or escaped.

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

A symbol can be a string, image, or identifier. It is used within the `@counter-style` at-rule.

When the value of the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, the `symbols` descriptor must be specified. For the `additive` system, use the `additive-symbols` descriptor instead to specify the symbols.

While a space between quoted symbols is not required, it makes CSS more readable. To use a quote as a symbol, either escape the quote character or enclose the character within different quotes, such as `"'"`.

When defining symbols with identifiers instead of strings, be sure to use identifier syntax rules. For example, as noted above, ASCII non-letters such as `*` are not identifiers and must be either quoted or escaped. Hex escape characters are followed by a space. This space may look like the space separating two identifiers, but it enables digits to follow hex-escaped characters. This means that two spaces must be included after a hex-escaped identifier to separate it from the next identifier. For example, it is better to use the string `"\2A 1"` instead of `\2A 1` with two spaces, as your code tools might remove double spaces. It is generally safer to quote identifiers that need to be escaped or use strings.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

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

symbols =
  <symbol>+

<symbol> =
  <string>        |
  <image>         |
  <custom-ident>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Setting counter symbols

In this example, the list of values for the `symbols` descriptor include letters (`A`, `D`, `E`), a number within quotes (`"1"`), and a hex-escape identifier within quotes (`"\24B7"`) for the character `Ⓑ`.

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-image`, `list-style-position`
* `symbols()` function
* `url()` function
* CSS counter styles module


fallback - CSS: Cascading Style Sheets

fallback
========

The **`fallback`** descriptor of the `@counter-style` at-rule can be used to specify a counter style to fall back to if the counter style being defined cannot create a marker representation for a particular counter value.

Syntax
------

```css
/\* Keyword values \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;
```

Value
-----

The descriptor takes a single `<counter-style-name>` as its value:

`<counter-style-name>`

Provides the name of the counter style to be used as the fallback, which is either the case-sensitive `<custom-ident>` of a custom CSS counter style (without quotes) or a case-insensitive `list-style-type` property value such as `decimal`, `disc`, and so on.

If omitted, the counter fallback defaults to `decimal`.

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

The counter style provided as the value of the `fallback` descriptor is used when a `range` descriptor is specified for a counter style; the `fallback` style is used to represent all the values that fall outside the range. The `fallback` style is also used when the `fixed` `system` is used and there are not enough symbols to cover all the list items; the `fallback` style is used to represent all the values beyond the scope of the fixed system. In both these cases, and any other time the defined counter cannot create a specific counter value, the `fallback` style is used.

If the specified fallback style is also unable to construct a representation, then the `fallback` value of that fallback counter is used. If that fallback style's fallback is also unable to construct a representation, then that fallback's fallback is used. This falling back continues until a fallback is found that can construct the counter-representation. If no fallback `fallback` value is able to construct a representation―if a fallback style doesn't have a `fallback` value set, or if a `fallback` value is not specified or invalid―the `fallback` defaults to `decimal`.

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

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Initial value | `decimal` |
| Computed value | as specified |

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

fallback =
  <counter-style-name>

```

Examples
--------

### Specifying a fallback counter style

#### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

#### CSS

```css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}
```

#### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-fallback |

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

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

See also
--------

* Other `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `negative`, `prefix`, `suffix`, `range`, `pad`, and `speak-as`
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: the functional notation for creating anonymous counter styles


Implementing image sprites in CSS - CSS: Cascading Style Sheets

Implementing image sprites in CSS
=================================

**Image sprites** are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

**Note:** When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.

Implementation
--------------

Suppose an image is given to every item with class `toolbtn`:

```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```

A background position can be added either as two x, y values after the `url()` in the background, or as `background-position`. For example:

```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```

This would slide the starting point of the background image for the element with the ID `btn1` 20 pixels to the left and the element with the ID `btn2` 40 pixels to the left (assuming they have the class `toolbtn` assigned and are affected by the image rule above).

Similarly, you can also make hover states with:

```css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}
```

See also
--------

* Full working demo at CSS Tricks


Using CSS gradients - CSS: Cascading Style Sheets

Using CSS gradients
===================

**CSS gradients** are represented by the `<gradient>` data type, a special type of `<image>` made of a progressive transition between two or more colors. You can choose between three types of gradients: *linear* (created with the `linear-gradient()` function), *radial* (created with the `radial-gradient()` function), and *conic* (created with the `conic-gradient()` function). You can also create repeating gradients with the `repeating-linear-gradient()`, `repeating-radial-gradient()`, and `repeating-conic-gradient()` functions.

Gradients can be used anywhere you would use an `<image>`, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.

We'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients

Using linear gradients
----------------------

A linear gradient creates a band of colors that progress in a straight line.

### A basic linear gradient

To create the most basic type of gradient, all you need is to specify two colors. These are called *color stops*. You must have at least two, but you can have as many as you want.
```

<div class="simple-linear"></div>
```

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

```css
.simple-linear {
  background: linear-gradient(blue, pink);
}
```

### Changing the direction

By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction.
```

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

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

```css
.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}
```

### Diagonal gradients

You can even make the gradient run diagonally, from corner to corner.
```

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

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

```css
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}
```

### Using angles

If you want more control over its direction, you can give the gradient a specific angle.
```

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

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

```css
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}
```

When using an angle, `0deg` creates a vertical gradient running bottom to top, `90deg` creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

![Four boxes listing angle and showing associated gradient from red to white. 0deg starts at the bottom and goes up. 90deg starts at left and goes right. 180deg starts at the top and goes down. -90deg starts at right and goes left.](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients/linear_red_angles.png)

Declaring colors & creating effects
-----------------------------------

All CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:

### Using more than two colors

You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.
```

<div class="auto-spaced-linear-gradient"></div>
```

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

```css
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}
```

### Positioning color stops

You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, `0%` represents the starting point, while `100%` represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at `0%` and the last color stop being at `100%`, and any other color stops being half way between their adjacent color stops.
```

<div class="multicolor-linear"></div>
```

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

```css
.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
```

### Creating hard lines

To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the `50%` mark, halfway through the gradient:
```

<div class="striped"></div>
```

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

```css
.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}
```

### Gradient hints

By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.
```

<div class="color-hint"></div>
<div class="simple-linear"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
}
```

```css
.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}
```

### Creating color bands & stripes

To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.
```

<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}
```

```css
.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}
```

In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.

In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.

### Controlling the progression of a gradient

By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:
```

<div class="colorhint-gradient"></div>
<div class="regular-progression"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}
```

```css
.colorhint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}
```

### Overlaying gradients

Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.
```

<div class="layered-image"></div>
```

```
div {
  width: 300px;
  height: 150px;
}
```

```css
.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}
```

### Stacked gradients

You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.
```

<div class="stacked-linear"></div>
```

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

```css
.stacked-linear {
  background: linear-gradient(
      217deg,
      rgb(255 0 0 / 80%),
      rgb(255 0 0 / 0%) 70.71%
    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
}
```

Using radial gradients
----------------------

Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

### A basic radial gradient

As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of its box:
```

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

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.simple-radial {
  background: radial-gradient(red, blue);
}
```

### Positioning radial color stops

Again like linear gradients, you can position each radial color stop with a percentage or absolute length.
```

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

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

```css
.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}
```

### Positioning the center of the gradient

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.
```

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

```
div {
  width: 120px;
  height: 240px;
}
```

```css
.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}
```

### Sizing radial gradients

Unlike linear gradients, you can specify the size of radial gradients. Possible values include `closest-corner`, `closest-side`, `farthest-corner`, and `farthest-side`, with `farthest-corner` being the default. Circles can also be sized with a length, and ellipses a length or percentage.

#### Example: `closest-side` for ellipses

This example uses the `closest-side` size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.
```

<div class="radial-ellipse-side"></div>
```

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

```css
.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### Example: `farthest-corner` for ellipses

This example is similar to the previous one, except that its size is specified as `farthest-corner`, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.
```

<div class="radial-ellipse-far"></div>
```

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

```css
.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### Example: `closest-side` for circles

This example uses `closest-side`, which makes the circle's radius to be the distance between the center of the gradient and the closest side. In this case the radius is the distance between the center and the bottom edge, because the gradient is placed 25% from the left and 25% from the bottom, and the div element's height is smaller than the width.
```

<div class="radial-circle-close"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### Example: length or percentage for ellipses

For ellipses only, you can size the ellipse using a length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use a percentage this corresponds to the size of the box in that dimension. In the below example I have used a percentage for the horizontal radius.
```

<div class="radial-ellipse-size"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### Example: length for circles

For circles the size may be given as a `<length>`, which is the size of the circle.
```

<div class="radial-circle-size"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-circle-size {
  background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);
}
```

### Stacked radial gradients

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.
```

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

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

```css
.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgb(255 0 0 / 50%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgb(0 0 255 / 50%),
      rgb(0 0 255 / 0%) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgb(0 255 0 / 50%),
        rgb(0 255 0 / 0%) 70.71%
      ) beige;
  border-radius: 50%;
}
```

Using conic gradients
---------------------

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, but they can also be used for creating checker boards and other interesting effects.

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, and the color-stops are percentages or degrees: absolute lengths are not valid.

In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.

### A basic conic gradient

As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:
```

<div class="simple-conic"></div>
```

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

```css
.simple-conic {
  background: conic-gradient(red, blue);
}
```

### Positioning the conic center

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"
```

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

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

```css
.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}
```

### Changing the angle

By default, the different color stops you specify are spaced equidistantly around the circle. You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them.
```

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

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

```css
.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}
```

Using repeating gradients
-------------------------

The `linear-gradient()`, `radial-gradient()`, and `conic-gradient()` functions don't support automatically repeated color stops. However, the `repeating-linear-gradient()`, `repeating-radial-gradient()`, and `repeating-conic-gradient()` functions are available to offer this functionality.

The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.

### Repeating linear gradients

This example uses `repeating-linear-gradient()` to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.
```

<div class="repeating-linear"></div>
```

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

```css
.repeating-linear {
  background: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
}
```

### Multiple repeating linear gradients

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

In this case the gradient lines are 300px, 230px, and 300px long.
```

<div class="multi-repeating-linear"></div>
```

```
div {
  width: 600px;
  height: 400px;
}
```

```css
.multi-repeating-linear {
  background: repeating-linear-gradient(
      190deg,
      rgb(255 0 0 / 50%) 40px,
      rgb(255 153 0 / 50%) 80px,
      rgb(255 255 0 / 50%) 120px,
      rgb(0 255 0 / 50%) 160px,
      rgb(0 0 255 / 50%) 200px,
      rgb(75 0 130 / 50%) 240px,
      rgb(238 130 238 / 50%) 280px,
      rgb(255 0 0 / 50%) 300px
    ), repeating-linear-gradient(
      -190deg,
      rgb(255 0 0 / 50%) 30px,
      rgb(255 153 0 / 50%) 60px,
      rgb(255 255 0 / 50%) 90px,
      rgb(0 255 0 / 50%) 120px,
      rgb(0 0 255 / 50%) 150px,
      rgb(75 0 130 / 50%) 180px,
      rgb(238 130 238 / 50%) 210px,
      rgb(255 0 0 / 50%) 230px
    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
        200px, blue 250px, indigo 300px, violet 350px, red 370px);
}
```

### Plaid gradient

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:
```

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

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

```css
.plaid-gradient {
  background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ), repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
          143 77 63 / 25%
        ) 5px, rgb(143 77 63 / 25%) 10px);

  background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ), repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 77 63 / 25%) 5px
        10px);
}
```

### Repeating radial gradients

This example uses `repeating-radial-gradient()` to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.
```

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

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

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

### Multiple repeating radial gradients
```

<div class="multi-target"></div>
```

```
div {
  width: 250px;
  height: 150px;
}
```

```css
.multi-target {
  background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 15px,
        rgb(255 255 255 / 50%) 15px,
        rgb(255 255 255 / 50%) 30px
      ) top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 10px,
        rgb(255 255 255 / 50%) 10px,
        rgb(255 255 255 / 50%) 20px
      ) top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;
}
```

See also
--------

* Gradient functions: `linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`
* Gradient-related CSS data types: `<gradient>`, `<image>`
* Gradient-related CSS properties: `background`, `background-image`
* CSS Gradients Patterns Gallery, by Lea Verou
* CSS Gradients Library, by Estelle Weyl
* Gradient CSS Generator


Using filter effects - CSS: Cascading Style Sheets

Using filter effects
====================

Have you ever hovered over a black-and-white or sepia image and the full-color image came into view instantly? Have you ever encountered a background image with a small blurred-out section that makes the text on top more legible? In the past, these manipulations required image editing software, time, and additional HTTP requests.

Advantages of using CSS filter effects
--------------------------------------

The Filter effects module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable.

The CSS filter effects module provides the `filter` and `backdrop-filter` properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the `<filter-function>` data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create.

Filter effect properties
------------------------

The following two filter properties of the CSS filter effects module enable you to apply zero, one, or more graphical effects to an element:

* Using the `filter` property, you can apply filter effects such as blur, drop-shadow, and sepia to an element before the element is rendered. The filters effects are applied directly on the element, including the element's contents, borders, and padding.
* Using the `backdrop-filter` property, you can apply graphical effects to the area behind an element (the element's "backdrop"). The `backdrop-filter` property is often used to make the foreground content more legible, especially when the larger area on which the content is placed otherwise does not provide enough contrast for the content. The filter effects are applied only to the background of the element and not to the element's content.

The `filter` and `backdrop-filter` properties accept a space-separated list of filters, which are applied in the order declared.

Filter functions
----------------

The CSS filter effects module provides 10 `<filter-function>` functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a `url()` reference.

The following table lists the 10 filter functions, along with their value types, the minimum valid value if applicable, the largest value that creates an effect, and the initial value used for interpolation.

| Filter function | Parameter type | Min value | Max effect | Interpolation value | Default value (no effect) |
| --- | --- | --- | --- | --- | --- |
| `blur()` | `<length>` | `0` |  | `0` | `blur(0)` |
| `brightness()` | `<number>` or `<percentage>` | `0` |  | `1` | `brightness(1)` or `brightness(100%)` |
| `contrast()` | `<length>` | `0` |  | `1` | `contrast(1)` or `contrast(100%)` |
| `drop-shadow()` | `<shadow>` |  |  | `0 0 0 currentcolor` | `drop-shadow(0 0 0 currentcolor)` |
| `grayscale()` | `<number>` or `<percentage>` | `0` | `100%` | `0` | `grayscale(0)` or `grayscale(0%)` |
| `hue-rotate()` | `<angle>` |  |  | `0` | `hue-rotate(0deg)` |
| `invert()` | `<number>` or `<percentage>` | `0` | `100%` | `0` | `invert(0)` or `invert(0%)` |
| `opacity()` | `<number>` or `<percentage>` | `0` | `100%` | `1` | `opacity(1)` or `opacity(100%)` |
| `saturate()` | `<number>` or `<percentage>` | `0` | `100%` | `1` | `saturate(100%)` |
| `sepia()` | `<number>` or `<percentage>` | `0` | `100%` | `0` | `sepia(0%)` |

The minimum value allowed is included for filter functions that have a minimum value. Including a value less than the minimum value for any filter function invalidates the entire property declaration, not just the offending filter function in the comma-separated list.

The maximum effect value can be exceeded. Including a value greater than the listed maximum value is valid, but it does not increase the effect over the listed maximum value. In other words, the effect on the element will look the same as when the maximum effect value is set. For example, setting `sepia(400%)` in the sepia example will produce the same effect as `sepia(100%)`, the maximum value.

The default value is a value that creates no effect. While these values create no effect, they provide the initial interpolation values and offer an example of how the value can be set. These default values provide a gauge between the minimum value allowed and the maximum effect value.

Applying filter effects
-----------------------

The `filter` and `backdrop-filter` properties accept a filter function list, which may contain one or more `<filter-function>`s, the default keyword `none`, or an SVG filter as a `url()` value.

### Applying sepia filter effect

If you hover over the sepia image below, you'll see the full-color image come into view instantly.

The image is set to be sepia by specifying the value of the `filter` property as the `sepia()` filter function. The filter is removed on `:hover` and `:focus` by setting `filter: none`.

```html
<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />
```

```css
img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}
```

In the `<img>` element, `tabindex` is set to `0` to enable focus without altering the tabbing order for keyboard users because `<img>` is not an interactive element.
```

img {
  max-width: 100%;
  height: 100%;
}
```

### Applying filter effects to other elements

While generally applied to images, the `filter` and `backdrop-filter` properties can be applied to any element or pseudo-element.

In this example, a glow effect is added using a `drop-shadow()` filter with a `3px` blur and `0` offset.

```css
h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}
```

```
h1 {
  font-family: sans-serif;
  font-size: 2rem;
}
```

```
<h1>Glow created with CSS filter</h1>
```

### Applying multiple filters

While the sepia `filter` example included only a single filter function, you can set multiple filters. The `filter` and `backdrop-filter` properties accept a space-separated list of filters, which are applied in the order declared.

This example applies two filters — `hue-rotate()` and `blur()` — via the `backdrop-filter` property. The backdrop, the area behind the `<p>` element, has a color shift and a blur applied.

```css
.container {
  background: url(image.jpg) no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 10%);
  text-shadow: 2px 2px black;
}
```

```
.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}
```

```
<div
 class="container"
 style="background-image: url(listen\_to\_black\_women.jpg);">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>
```

### Applying repeated filters

As filters are applied in sequential order, you can use filter functions more than once. In this example, the `drop-shadow()` filter has been used four times, each time with a different `<shadow>` value.

```html
<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />
```

```
img {
  width: 49%;
}
```

```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
    )
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
img + img {
  filter: none;
}
```

In the first Mandala example, four drop shadows are applied to a line-drawn SVG. The same SVG, with the filter removed with `filter: none`, is included for comparison.

### Specifying filter function order

When creating filter effects, the `filter` or `backdrop-filter` property is provided a space-separated list of filters. These filter effects are applied in the order in which they appear.

In this example, both `magenta` drop shadow and `180deg` hue rotation are applied on the level-one heading. The example shows the effect when these filters are applied in different orders.

```css
h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}
```

```
h1 {
  font-family: sans-serif;
  font-size: 2rem;
}
```

```
<h1 id="hueFirst">Hue change happens before drop shadow.</h1>
<h1 id="shadowFirst">Drop shadow applied before hue change.</h1>
<h1>No filter effects applied.</h1>
```

The same filters are applied to both the lines of text but in a different order. In the first line, the hue of the text is altered before the shadow is applied, so the shadow is `magenta`. In the second line, the drop shadow is added to the dark blue text, and then the hue of both the text and the shadow are altered.

No filter effect is applied to the third line to show the original effect as a comparison. So the third line stays as `midnightblue` or `#191970`. The `hue-rotate(180deg)` filter changes the text in the first two lines to `#252500`.

**Note:** The hexadecimal rgb color `#191970` is equal to `hsl(240deg 63.5% 26.9%)`, while `#252500` is `hsl(60deg 100% 7.3%)`. The color rotation takes place in the sRGB color space, which is why the hue has been changed as expected while not maintaining the same values for saturation and lightness.

Using SVG filters
-----------------

In addition to the 10 defined `<filter-function>`s, the CSS filter effects support `url()`, with the parameter being an SVG filter, which may be embedded in an internal or external SVG file.

A single SVG can be used to define several filters, each with an `id`:

```html
<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>
```

The filter's `id` is referenced in the `url()` for both inline and external SVGs:

```css
filter: url(#blur3);
filter: url("https://example.com/svg/filters.svg#blur3");
```

### Blurring an image

Just like the `blur()` filter function applies a Gaussian blur to the elements on which it is applied, the SVG `<feGaussianBlur>` filter element can also be used to blur content.

In both the cases, the blur radius value, specified as a `<length>` in CSS and as a pixel equivalent `<number>` in SVG, defines the value of the standard deviation to the Gaussian function. In other words, it defines the number of pixels on the screen that blend into each other; a larger value creates more blur.

The `<filter>`'s `stdDeviation` attribute accepts up to two values enabling creating more complex blur values. To create an equivalent blur, we include one value for `stdDeviation`:
```

<table cellpadding="5">
  <thead>
    <tr>
      <th>CSS example</th>
      <th>SVG example</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img class="filter" src="flag.jpg" alt="Pride flag" />
      </td>
      <td>
        <img src="flag.jpg" alt="Pride flag" class="svgFilter" />
      </td>
      <td>
        <img src="flag.jpg" alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>
```

```html
<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image xlink:href="asset/flag.jpg" filter="url(#blur)" />
</svg>
```

The SVG `url()` filter value can be included as the value of the SVG `<image>` element's `filter` attribute or as part of the value of the CSS `filter` and `backdrop-filter` properties.

```css
.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}
```

See also
--------

* `mask`
* `background-blend-mode`, `mix-blend-mode`
* CSS filter effects
* SVG `<filter>` element, SVG `filter` attribute in SVG
* Applying SVG effects to HTML content


Sticky footers - CSS: Cascading Style Sheets

Sticky footers
==============

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
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

![A sticky footer pushed to the bottom of a box](/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

Requirements
------------

The Sticky footer pattern needs to meet the following requirements:

* Footer sticks to the bottom of the viewport when content is short.
* If the content of the page extends past the viewport bottom, the footer then sits below the content as normal.
The recipe
----------

Download this example

**Note:** In this example and the following one we are using a wrapper set to `min-height: 100%`. You can also achieve this for a full page by setting a `min-height` of `100vh` on the `<body>` and then using it as your grid container.

Choices made
------------

In the above example we achieve the sticky footer using CSS Grid Layout. The `.wrapper` has a minimum height of `100%` which means it is as tall as the container it is in. We then create a single column grid layout with three rows, one row for each part of our layout.

Grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the `1fr` track and the footer into the final auto sized track. The `1fr` track will take up all available space and so grows to fill the gap.

Alternate method
----------------

You can also use Flexbox to create a sticky footer.

The flexbox example starts out in the same way, but we use `display:flex` rather than `display:grid` on the `.wrapper`; we also set `flex-direction` to `column`. Then we set our main content to `flex-grow: 1` and the other two elements to `flex-shrink: 0` — this prevents them from shrinking smaller when content fills the main area.

Resources on MDN
----------------

* CSS properties: `display`, `min-height`, `grid-template-rows`, `flex-direction`, `flex-grow`, `flex-shrink`
* Basic concepts of grid layout
* CSS grid layout module
* Basic concepts of flexbox
* CSS flexible box layout module


Grid wrapper - CSS: Cascading Style Sheets

Grid wrapper
============

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 grid wrapper pattern is useful for aligning grid content within a central wrapper while also allowing items to break out and align to the edge of the containing element or page.

Requirements
------------

Items placed on the grid should be able to align to a horizontally-centered max-width wrapper or the outer edges of the grid, or both.

Recipe
------

Download this example

Choices made
------------

This recipe uses the CSS grid `minmax()` function to define the grid track sizes in the `grid-template-columns` property. For the central columns with a maximum width, we can set a minimum value of `0` or greater and a maximum value that specifies the maximum size the column tracks will grow to. Using relative or absolute `<length>` units (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using `<percentage>` values or viewport units will cause the wrapper to grow or shrink in response to its context.

The outer two columns have a maximum size of `1fr`, meaning that they will each expand to fill the remaining available space in the grid container.

Useful fallbacks or alternative methods
---------------------------------------

To center the grid horizontally on the page you can set a `max-width` along with left and right `auto` `margin`s:

```css
.grid {
  max-width: 96vw; /\* Limits the width to 96% of the width of the viewport \*/
  margin: 0 auto; /\* horizontally centers the container \*/
}
```

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

Although CSS grid enables positioning items anywhere (within reason), ensuring that your underlying markup follows a logical order is important (see CSS Grid layout and accessibility for more details).

See also
--------

* `grid-template-columns` property
* CSS grid layout module
* CSS Grid: More flexibility with minmax() (2018)
* Breaking out with CSS grid (2017)


Column layouts - CSS: Cascading Style Sheets

Column layouts
==============

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
You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Multi-column, Flexbox, or Grid layout will depend on what you are trying to achieve, and in this recipe we explore these options.

![three different styles of layouts which have two columns in the container.](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts/cookbook-multiple-columns.png)

Requirements
------------

There are a number of design patterns you might want to achieve with your columns:

* A continuous thread of content broken up into newspaper-style columns.
* A single row of items arranged as columns, with all heights being equal.
* Multiple rows of columns lined up by row and column.
The recipes
-----------

You need to choose different layout methods in order to achieve your requirements.

### A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the `column-gap` or `gap` properties, and add a rule between columns using `column-rule`.

In this example, we used the `column-width` property to set a minimum width that the columns need to be before the browser adds an additional column. The `columns` shorthand property can be used to set the `column-width` and `column-count` properties, either of which can define the maximum number of columns allowed.

Download this example

Use multicol when:

* You want your text to display in newspaper-like columns.
* You have a set of small items you want to break into columns.
* You do not need to target individual column boxes for styling.
### A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting `display: flex;` to make a parent element a flex-container. Just adding this one property turns all the children (child elements, pseudo-elements, and text nodes) into flex items along a single line. Setting the same `flex` shorthand property with a single numeric value distributes all the available space equally, generally making all the flex items the same size as long as none have non-wrapping content forcing the item to be larger.

Margins or the `gap` property can be used to create gaps between items, but there is currently no CSS property that adds rules between flex items.

Download this example

To create a layout with flex items that wrap onto new rows, set the `flex-wrap` property on the container to `wrap`. Note that each flex line distributes space for that line only. Items in one line will not necessarily line up with items on other lines, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

Download this example

Use flexbox:

* For single rows or columns of items.
* When you want to do alignment on the cross axis after laying out your items.
* When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.
### Lining items up in rows and columns — grid layout

If you want a two-dimensional grid where items line up in rows *and* columns, then you should choose CSS Grid Layout. Similar to how flexbox works on the direct children of the flex container, grid layout works on the direct children of the grid container. Just set `display: grid;` on the container. Properties set on this container — like `grid-template-columns` and `grid-template-rows` — define how the items are distributed along rows and columns.

Download this example

Use Grid:

* For multiple rows or columns of items.
* When you want to be able to align the items on the block and inline axes.
* When you want items to line up in rows and columns.
Resources on MDN
----------------

* Guide to Multi-column Layout
* Guide to Flexbox
* Guide to CSS Grid Layout


Contribute a recipe - CSS: Cascading Style Sheets

Contribute a recipe
===================

If you would like to contribute an example for the Layout Cookbook, then this page explains the steps to take to have your example published.

What makes a good recipe?
-------------------------

**The simplest possible version of any useful web design pattern**. Each line of CSS that you include should be there to help demonstrate the pattern, so leave out anything there purely to make the example look pretty. The idea is that someone can take the pattern and use it in a site with their own styles.

A recipe consists of:

* A live example, stored in the CSS Examples GitHub repo.
* A downloadable version of that example, also stored in the CSS Examples repo.
* A page in the CSS layout cookbook section of the site, which should include the following components:
    1. Introduction
    2. Requirements
    3. Recipe
    4. Decisions
    5. Useful fallbacks or alternative methods (when relevant)
    6. Accessibility concerns
    7. Browser compatibility (only for CSS properties not fully supported)
    8. Additional resources
Steps to publish a recipe
-------------------------

To create a recipe and add it to the CSS Layout Cookbook, follow these steps:

1. Build a pattern
2. Create a live example
3. Create a downloadable version
4. Open a pull request
5. Add your content to MDN
### 1. Build a pattern

Before turning your example into a recipe, start by creating your pattern as a basic HTML page. Think about what you are trying to demonstrate and keep it as simple as possible. Use descriptive words like "container" or "item" if adding class names.

Ensure that you've tested the HTML and CSS across multiple browsers, viewport sizes, and devices. Also ensure that any CSS styling follows accessibility guidelines. While it's okay to use CSS properties with limited support, be sure to include browser support information when creating the page, particularly in the browser compatibility section. In some cases, creating a second version of your example with fallback support can be helpful.

### 2. Create a live example

The live examples on cookbook pages, such as for centering an element, and elsewhere on MDN allow readers to play with the code and change relevant parts without being overwhelmed with all of the code. Your recipe will be demonstrated by way of one or more examples.

Fork the CSS Examples repo and then take a look in the `css-cookbook` folder. There is a cookbook-template.html file. Copy this file and use it as a starting point. Save this in the `css-cookbook` directory with a name that makes sense for your pattern. The template contains comments to guide you in adding various parts at the appropriate places.

The important parts of this template are as follows:

* There is a stylesheet for the editor panels with some basic body styling and a JavaScript file for the editor functionality. Leave these files as they are.
* The `<head>` contains two style blocks. The first style block is for elements that readers do not need to change to play with the example. The second style block contains items that readers might want to play with. We typically add all our CSS to the first block, then choose the rules to move to the second block. The rules in the second block should be those that are fundamental to the pattern, perhaps those where a reader can change a CSS value and see the pattern update.
* You need to add the HTML for your component twice: first inside the section with the class `preview`, and then inside the `<textarea>` with the class `playable-html`.
* The editable CSS from the second `<head>` block must also be copied into the `playable-css` section.

A simple working example is center.html, which is embedded on the page Center an element. You can use this to see how to add the various bits correctly.

If you've forked the repo and have our CSS and JavaScript files with your example, opening your live example in a browser should display everything working exactly as it would appear on an MDN page.

#### Useful tips

* Do not indent the CSS and HTML inside the textareas; instead, align the code with the start of the lines. This will look better when it is rendered.
* If any images are required, put them in the directory with the examples. You are welcome to use any images already present.
* You can adjust the height of the textareas by changing the height in the inline styles.
### 3. Create a downloadable version

As the examples include all of our live example code, we want to provide readers with just the code they need for their example, omitting any unnecessary items. Create a copy of your live example, and add `--download` to its name. For example, the download version of `center.html` is `center--download.html`. This file will be similar to your initial example. It should be a basic version of your pattern as a single HTML page.

It can be handy to include the body CSS rules from our included stylesheet. Take a look at `cookbook-template--download.html` as a guide; these rules are provided as a starting point.

### 4. Open a pull request with your example

Open a pull request (PR) on the CSS Examples repo. This allows us to help you with any changes to the example that may be needed before you create your page. Plus, the example will need to be live to be included. This is why it makes sense to first create the code examples and then the explanatory guide. In your PR, explain the pattern and what you are demonstrating. See our guidelines for opening a pull request.

### 5. Create your page

 After your example PR is merged, open a pull request to create a new page in the Layout Cookbook directory.
 Use our template for Cookbook pages.
 The template explains the requirements of each section, and you can refer to other cookbook examples for more help.

Remember to add a link to your new recipe on the main Layout cookbook page.

If you have any questions or want someone to take a look at your page, get in touch via any of our communication channels.

See also
--------

* Cookbook page template
* CSS Examples repo


Breadcrumb navigation - CSS: Cascading Style Sheets

Breadcrumb navigation
=====================

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
Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page. The items typically display inline, with a separator between each item, indicating the hierarchy between individual pages.

![Links displayed inline with separators](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Requirements
------------

Display the hierarchy of the site by displaying inline links, with a separator between the items, indicating the hierarchy between individual pages, with the current page appearing last.

Recipe
------

Download this example

**Note:** The example above uses a complex selector to insert content before every `li` except the last one. This could also be achieved using a complex selector targeting all `li` elements except the first:

```css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}
```

Feel free to choose the solution that you prefer.

Choices made
------------

To display list items inline, we use flexbox layout, thus demonstrating how a line of CSS can give us our navigation. The separators are added using CSS generated content. You could change these to any separator that you like.

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

We used the `aria-label` and `aria-current` attributes to help assistive technology users understand what this navigation is and where the current page is in the structure. See the related links for more information.

Be aware that the arrows `→` added via `content` are exposed to screen readers and braille displays.

See also
--------

* CSS Flexible Box Layout
* Providing a Breadcrumb Trail
* Using the `aria-current` attribute