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

repeating-linear-gradient()
===========================

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

Try it
------

The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.

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

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

Syntax
------

```css
/\* A repeating gradient tilted 45 degrees,
 starting blue and finishing red, repeating 3 times \*/
repeating-linear-gradient(45deg, blue, red 33.3%)

/\* A repeating gradient going from the bottom right to the top left,
 starting blue and finishing red, repeating every 20px \*/
repeating-linear-gradient(to left top, blue, red 20px)

/\* A gradient going from the bottom to top,
 starting blue, turning green after 40%,
 and finishing red. This gradient doesn't repeat because
 the last color stop defaults to 100% \*/
repeating-linear-gradient(0deg, blue, green 40%, red)

/\* A gradient repeating five times, going from the left to right,
 starting red, turning green, and back to red \*/
repeating-linear-gradient(to right, red 0%, green 10%, red 20%)

/\* Interpolation in rectangular color space \*/
repeating-linear-gradient(in oklab, blue, red 50px)

/\* Interpolation in polar color space \*/
repeating-linear-gradient(in hsl, blue, red 50px)

/\* Interpolation in polar color space
 with longer hue interpolation method \*/
repeating-linear-gradient(in hsl longer hue, blue, red 50px)
```

### Values

`<side-or-corner>`

The position of the gradient line's starting point. If specified, it consists of the word `to` and up to two keywords: one indicates the horizontal side (`left` or `right`), and the other the vertical side (`top` or `bottom`). The order of the side keywords does not matter. If unspecified, it defaults to `to bottom`.

The values `to top`, `to bottom`, `to left`, and `to right` are equivalent to the angles `0deg`, `180deg`, `270deg`, and `90deg` respectively. The other values are translated into an angle.

`<angle>`

The gradient line's angle of direction. A value of `0deg` is equivalent to `to top`; increasing values rotate clockwise from there.

`<linear-color-stop>`

A color-stop's `<color>` value, followed by one or two optional stop positions, (each being either a `<percentage>` or a `<length>` along the gradient's axis). A percentage of `0%`, or a length of `0`, represents the start of the gradient; the value `100%` is 100% of the image size, meaning the gradient will not repeat.

`<color-hint>`

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

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

### Formal syntax
```

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

<linear-gradient-syntax> =
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> =
  [ left | right ]  ||
  [ top | bottom ]

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

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

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

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

```

Examples
--------

### Zebra stripes
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /\* with multiple color stop lengths \*/
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}
```

### Ten repeating horizontal bars
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(26 198 204),
    rgb(26 198 204) 7%,
    rgb(100 100 100) 10%
  );
}
```

Because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.

### Interpolation in rectangular color space
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}
```

### Interpolating with hue
```

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

```
div {
  height: 50vh;
  color: #330;
  font-weight: bolder;
  padding-left: 1.5rem;
}
```

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

```css
.shorter {
  background: repeating-linear-gradient(
    90deg in hsl shorter hue,
    red,
    blue 300px
  );
}

.longer {
  background: repeating-linear-gradient(
    90deg in hsl longer hue,
    red,
    blue 300px
  );
}
```

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

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

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

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

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

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

See also
--------

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


linear-gradient() - CSS: Cascading Style Sheets

linear-gradient()
=================

The **`linear-gradient()`** CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the `<gradient>` data type, which is a special kind of `<image>`.

Try it
------

Syntax
------

```css
/\* A gradient tilted 45 degrees,
 starting blue and finishing red \*/
linear-gradient(45deg, blue, red)

/\* A gradient going from the bottom right to the top left corner,
 starting blue and finishing red \*/
linear-gradient(to left top, blue, red)

/\* Interpolation in rectangular color space \*/
linear-gradient(in oklab, blue, red)

/\* Interpolation in polar color space \*/
linear-gradient(in hsl, blue, red)

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

/\* Color stop: A gradient going from the bottom to top,
 starting blue, turning green at 40% of its length,
 and finishing red \*/
linear-gradient(0deg, blue, green 40%, red)

/\* Color hint: A gradient going from the left to right,
 starting red, getting to the midpoint color
 10% of the way across the length of the gradient,
 taking the rest of the 90% of the length to change to blue \*/
linear-gradient(.25turn, red, 10%, blue)

/\* Multi-position color stop: A gradient tilted 45 degrees,
 with a red bottom-left half and a blue top-right half,
 with a hard line where the gradient changes from red to blue \*/
linear-gradient(45deg, red 0 50%, blue 50% 100%)
```

### Values

`<side-or-corner>`

The position of the gradient line's starting point. If specified, it consists of the word `to` and up to two keywords: one indicates the horizontal side (`left` or `right`), and the other the vertical side (`top` or `bottom`). The order of the side keywords does not matter. If unspecified, it defaults to `to bottom`.

The values `to top`, `to bottom`, `to left`, and `to right` are equivalent to the angles `0deg`, `180deg`, `270deg`, and `90deg`, respectively. The other values are translated into an angle.

`<angle>`

The gradient line's angle of direction. A value of `0deg` is equivalent to `to top`; increasing values rotate clockwise from there.

`<linear-color-stop>`

A color-stop's `<color>` value, followed by one or two optional stop positions, (each being either a `<percentage>` or a `<length>` along the gradient's axis).

`<color-hint>`

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

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

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

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

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

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

### Composition of a linear gradient

A linear gradient is defined by an axis—the *gradient line*—and two or more *color-stop points*. Each point on the axis is a distinct color; to create a smooth gradient, the `linear-gradient()` function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

![linear-gradient.png](/en-US/docs/Web/CSS/gradient/linear-gradient/linear-gradient.png)

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The *starting point* is the location on the gradient line where the first color begins. The *ending point* is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called *magic corners*: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

#### Customizing Gradients

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using a `<length>` or a `<percentage>`. If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

```css
linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
```

By default, colors transition smoothly from the color at one color-stop to the color at the subsequent color-stop, with the midpoint between the colors being the halfway point between the color transition. You can move this midpoint to any position between two color-stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however, the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

```css
linear-gradient(red 10%, 30%, blue 90%);
```

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

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

```css
linear-gradient(red 40%, yellow 30%, blue 65%);
```

Multi-position color-stops are allowed. A color can be declared as two adjacent color-stops by including both positions in the CSS declaration. The following three gradients are equivalent:

```css
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
```

By default, if there is no color with a `0%` stop, the first color declared will be at that point. Similarly, the last color will continue to the `100%` mark, or be at the `100%` mark if no length has been declared on that last stop.

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

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

<linear-gradient-syntax> =
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> =
  [ left | right ]  ||
  [ top | bottom ]

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

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

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

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

```

Examples
--------

### Gradient at a 45-degree angle
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(45deg, red, blue);
}
```

### Gradient that starts at 60% of the gradient line
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(135deg, orange 60%, cyan);
}
```

### Interpolation in rectangular color space
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(90deg in oklab, blue, red);
}
```

### Interpolating with hue
```

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

```
div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}
```

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

```css
.shorter {
  background: linear-gradient(90deg in hsl shorter hue, red, blue);
}

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}
```

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

### Gradient with multi-position color-stops

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

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}
```

### More linear-gradient examples

Please see using CSS gradients for more examples.

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

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

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

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

See also
--------

* Using CSS gradients
* Other gradient functions: `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`
* `<hue-interpolation-method>`
* `<color-interpolation-method>`
* `<image>`
* `element()`
* `image()`
* `image-set()`
* `cross-fade()`
* CSS images module
* New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)


Color picker tool - CSS: Cascading Style Sheets

Color picker tool
=================

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported.

As you adjust the parameters that define the color, it gets displayed in all three standard Web CSS formats. In addition, based on the currently-selected color, a palette for HSL and HSV, as well as alpha, is generated. The "eyedropper" style color picker box can be toggled between HSL or HSV format. You can also test colors and how they overlap one another by dragging them into the box at the bottom of the tool and moving them over one another. Adjust their relative Z index values to move them forward and behind one another.

This tool will help you identify the perfect CSS colors to apply to your HTML.

The generated colors you create above can be used anywhere color is used in CSS and HTML, unless otherwise noted.

See also
--------

For more on using color, see:

* Applying color to HTML elements using CSS
* Fundamental text and font styling
* Styling borders using CSS
* Changing background styles using CSS
* Color and color contrast

For additional tools, see:

Border-image generator

This interactive tool lets you visually create border images (the `border-image` property).

Border-radius generator

This interactive tool lets you visually create rounded corners (the `border-radius` property).

Box-shadow generator

This interactive tool lets you visually create shadows behind elements (the `box-shadow` property).


Applying color to HTML elements using CSS - CSS: Cascading Style Sheets

Applying color to HTML elements using CSS
=========================================

This article is a primer introducing each of the ways CSS color can be used in HTML.

The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want.

We're going to touch on most of what you'll need to know when using color, including a list of what you can color and what CSS properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts. We'll also take a look at how to let the user pick a color.

Then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.

Things that can have color
--------------------------

At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.

At a fundamental level, the `color` property defines the foreground color of an HTML element's content and the `background-color` property defines the element's background color. These can be used on just about any element.

### Text

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

`color`

The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.

`background-color`

The text's background color.

`text-shadow`

Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See Text drop shadows to learn more.

`text-decoration-color`

By default, text decorations (such as underlines, strikethroughs, etc.) use the `color` property as their colors. However, you can override that behavior and use a different color for them with the `text-decoration-color` property.

`text-emphasis-color`

The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.

`caret-color`

The color to use when drawing the caret (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as `<input>` and `<textarea>` or elements whose HTML `contenteditable` attribute is set.

### Boxes

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

Borders

See the section Borders for a list of the CSS properties you can use to set the colors of a box's borders.

`background-color`

The background color to use in areas of the element that have no foreground content.

`column-rule-color`

The color to use when drawing the line separating columns of text.

`outline-color`

The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.

### Borders

Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element's content. See The box model to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

You can use the `border` shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

`border-color`

Specifies a single color to use for every side of the element's border.

`border-left-color`, `border-right-color`, `border-top-color`, and `border-bottom-color`

Lets you set the color of the corresponding side of the element's border.

`border-block-start-color` and `border-block-end-color`

With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).

`border-inline-start-color` and `border-inline-end-color`

These let you color the edges of the border closest to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the `writing-mode`, `direction`, and `text-orientation` properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the `border-inline-start-color` is applied to the right side of the border.

### Other ways to use color

CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

The HTML Canvas API

Lets you draw 2D bitmapped graphics in a `<canvas>` element. See our Canvas tutorial to learn more.

SVG (Scalable Vector Graphics)

Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in the page using the `<img>` element, just like any other type of image.

WebGL

The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See our WebGL tutorial to find out more.

How to describe a color
-----------------------

In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

For more detailed discussion of each of the color value types, see the reference for the CSS `<color>` unit.

### Keywords

A set of standard color names is defined that lets you use keywords instead of numeric representations if you choose this way of describing colors, although there must be a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors, including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`.

See Named colors for more information on color keywords.

### RGB values

There are three ways to represent an RGB color in CSS.

#### Hexadecimal string notation

Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components *must* be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, `"#D"` becomes `"#DD"` when drawing.

A color in hexadecimal string notation always begins with the character `"#"`. After that come the hexadecimal digits of the color code. The string is case-insensitive.

`"#rrggbb"`

Specifies a fully-opaque color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`.

`"#rrggbbaa"`

Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes.

`"#rgb"`

Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`.

`"#rgba"`

Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes.

As an example, you can represent the opaque color bright blue as `"#0000ff"` or `"#00f"`. To make it 25% opaque, you can use `"#0000ff44"` or `"#00f4"`.

#### RGB functional notation

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function `rgb()`. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

Legal values for each of these parameters are:

`red`, `green`, and `blue`

Each must be an `<integer>` value between 0 and 255 (inclusive), or a `<percentage>` from 0% to 100%.

`alpha`

The alpha channel is specified as a percentage between 0% (fully transparent) and 100% (fully opaque), or a number between 0.0 (equivalent to 0%) and 1.0 (equivalent to 100%).

For example, a bright red that's 50% opaque can be represented as `rgb(255 0 0 / 50%)` or `rgb(100% 0 0 / 0.5)`.

### Color functions with a hue component

 Aside from `rgb()`, you can use `hsl()` and `hwb()` which take a `<hue>` component.
 A `<hue>` is the property that allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc.
 The key concept is that you can specify a hue in an `<angle>` because most of the color models describe hues using a color wheel.
 For more information on classifying these functions, see the Color spaces and color models section.

#### HSL functional notation

 Designers and artists often prefer to work using the HSL (Hue/Saturation/Luminosity) color method.
 The `hsl()` CSS function is similar to the `rgb()` function in usage otherwise.

 The diagram below shows an HSL color cylinder. Hue defines the color as an `<angle>` on a circular color wheel.
 Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue.
 As the value of luminance (or lightness) increases, the color transitions from the darkest to the brightest possible (from black to white).

![HSL color cylinder](/en-US/docs/Web/CSS/CSS_colors/Applying_color/640px-hsl_color_solid_cylinder.png)

Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any `<angle>` unit supported by CSS, including degrees (`deg`), radians (`rad`), gradians (`grad`), or turns (`turn`). But this doesn't control how vivid or dull, or how bright or dark the color is.

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

Think of it like creating the perfect paint color:

1. You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the **hue** (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white (regardless of the saturation or hue). In between values are a literal grey area.
3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.

You can also optionally include an alpha channel, to make the color less than 100% opaque.

Here are some sample colors in HSL notation:
```

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0 0% 75%);
}
```

```html
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg 100% 50%)</code></td>
      <td style="background-color: hsl(90deg 100% 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(90 100% 50%)</code></td>
      <td style="background-color: hsl(90 100% 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 50% 75%)</code></td>
      <td style="background-color: hsl(0.15turn 50% 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 90% 75%)</code></td>
      <td style="background-color: hsl(0.15turn 90% 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 90% 50%)</code></td>
      <td style="background-color: hsl(0.15turn 90% 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(270deg 90% 50%)</code></td>
      <td style="background-color: hsl(270deg 90% 50%);"> </td>
    </tr>
  </tbody>
</table>
```

**Note:** When you omit the hue's unit, it's assumed to be in degrees (`deg`).

#### HWB functional notation

Much like the HSL functional notation above, the hwb() function uses the same hue value. But instead of lightness and saturation you specify whiteness and blackness values in percentages. Values are **not** separated with a comma and an optional alpha value can be included (it must be preceded by a forward slash `/`).

Here are some examples of using HWB notation:

```css
/\* These examples all specify varying shades of a lime green. \*/
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/\* Same lime green but with an alpha value \*/
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
```

### Color spaces and color models

 The hexadecimal, named colors, and the `rgb()` function all use the RGB model and are associated with the sRGB (`srgb`) color space.
 You might see "color model" and "color space" used interchangeably, but there is a difference which is worth noting:

* A color model is the mathematical model that represents colors using numeric values.
 Color models describe how to create the available colors within a color space.
* A color space is a system for grouping colors so that describing any given color is consistent.
 If you transform a color between different color spaces, it will look identical.

 The `hsl()` and `hwb()` functions we've used above use the sRGB color space, and both use *cylindrical* models; this is why a `<hue>` angle lets you control the color's properties like on a color wheel.
 Let's take a look at other color spaces that are available and why you might use them.

#### CIELAB and Oklab color spaces

 The CIELAB and Oklab color spaces are based on human vision experiments and represent the entire range of colors that humans can see.
 The primary purpose of these models is that they are uniform so that a given distance between any two points in the color space should appear equally different to a viewer.

 For the CIELAB color space, you can use the `lab()` and `lch()` functions.
 The `lch()` function uses lightness (L), chroma (C), and hue (H) and the Lab model uses lightness (L), red/green-ness, and yellow/blue-ness along the "a" and "b" axes (rectangular coordinates) in the color space.

 The example below shows the effect of changing component values in the `lab()` and `lch()` functions where each row modifies a single component.
 The first row shows changes to the `lch()` lightness value, while the second row changes the `lch()` hue component.
 The third row changes the `lab()` "b" axis, so we have a different effect than `lch()` as we're gradually adding more yellow to the color rather than cycling through the entire color wheel:
```

/\* Varying shades of purple \*/
.container {
  display: grid;
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.container div {
  border-radius: 8px;
  padding: 0.75rem;
}

#lch-20 {
  background-color: lch(20 40 0);
}
#lch-30 {
  background-color: lch(30 40 0);
}
#lch-40 {
  background-color: lch(40 40 0);
}

#lch-50 {
  background-color: lch(50 40 0);
}
#lch-60 {
  background-color: lch(60 40 0);
}
#lch-70 {
  background-color: lch(70 40 0);
}

#lch-hue-10 {
  background-color: lch(70 40 10);
}
#lch-hue-20 {
  background-color: lch(70 40 20);
}
#lch-hue-30 {
  background-color: lch(70 40 30);
}
#lch-hue-40 {
  background-color: lch(70 40 40);
}
#lch-hue-50 {
  background-color: lch(70 40 50);
}
#lch-hue-60 {
  background-color: lch(70 40 60);
}
#lab-10 {
  background-color: lab(70 40 10);
}
#lab-20 {
  background-color: lab(70 40 20);
}
#lab-30 {
  background-color: lab(70 40 30);
}
#lab-40 {
  background-color: lab(70 40 40);
}
#lab-50 {
  background-color: lab(70 40 50);
}
#lab-60 {
  background-color: lab(70 40 60);
}
```

```
<div class="container">
  <div id="lch-20">lch(20 40 0)</div>
  <div id="lch-30">lch(30 40 0)</div>
  <div id="lch-40">lch(40 40 0)</div>
  <div id="lch-50">lch(50 40 0)</div>
  <div id="lch-60">lch(60 40 0)</div>
  <div id="lch-70">lch(70 40 0)</div>
  <div id="lch-hue-10">lch(70 40 10)</div>
  <div id="lch-hue-20">lch(70 40 20)</div>
  <div id="lch-hue-30">lch(70 40 30)</div>
  <div id="lch-hue-40">lch(70 40 40)</div>
  <div id="lch-hue-50">lch(70 40 50)</div>
  <div id="lch-hue-50">lch(70 40 60)</div>
  <div id="lab-10">lab(70 40 10)</div>
  <div id="lab-20">lab(70 40 20)</div>
  <div id="lab-30">lab(70 40 30)</div>
  <div id="lab-40">lab(70 40 40)</div>
  <div id="lab-50">lab(70 40 50)</div>
  <div id="lab-60">lab(70 40 60)</div>
</div>
```

 Oklab is a color space that uses the same model type as CIELAB but is built using additional numerical optimization steps, so the values are considered to be more accurate than CIELAB.
 Because of this optimization, hues are more perceptually uniform, making Oklab an excellent choice for gradients.
 If you already understand `lab()` and `lch()`, you can use these functions in a similar way:

```css
.oklch-red {
  color: oklch(0.93 0.39 28);
}
.oklab-green {
  color: oklab(0.87 -0.2 0.18);
}
```

#### The `color()` function

 If you want explicit control over color spaces when defining colors, you can use the `color()` function.
 This is useful to describe a color for high-definition devices with wider color gamuts.
 For example, if we wanted to show the `display-p3 0 0 1` color, which is outside of the sRGB gamut, you can use a `@media` at-rule for detecting if the client hardware supports colors in this range:

```css
.vibrant {
  background-color: color(display-p3 0 0 1);
  /\* Equivalent to out-of-gamut rgb(-27 55 153) \*/
}

@media (color-gamut: p3) {
  .vibrant {
    background-color: color(display-p3 0 0 1);
  }
}
```

Using color
-----------

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under Things that can have color, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a stylesheet, and adding and changing color using JavaScript code to alter the styles of elements.

### Specifying colors in stylesheets

The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

Let's take a look at an example, starting by looking at the results we're trying to achieve:

#### HTML

The HTML responsible for creating the above example is shown here:

```html
<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="box boxRight">
    <p>This is the second box.</p>
  </div>
</div>
```

This is pretty simple, using a `<div>` as a wrapper around the contents, which consists of two more `<div>`s, each styled differently with a single paragraph (`<p>`) in each box.

The magic happens, as usual, in the CSS, where we'll apply colors and define the layout for the HTML above.

#### CSS

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

```css
.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}
```

The `.wrapper` class is used to assign styles to the `<div>` that encloses all of our other content. This establishes the size of the container using `width` and `height` as well as its `margin` and `padding`.

Of more interest to our discussion here is the use of the `border` property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color `mediumturquoise`.

Our two colored boxes share a number of properties in common, so next we establish a class, `.box`, that defines those shared properties:

```css
.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

In brief, `.box` establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable `flex` mode using `display: flex`, and set both `justify-content` and `align-items` to `center`. Then we can create a class for each of the two boxes that defines the properties that differ between the two.

```css
.boxLeft {
  float: left;
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}
```

The `.boxLeft` class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

* The box's background color is set by changing the value of the CSS `background-color` property to `rgb(245 130 130)`.
* An outline is defined for the box. Unlike the more commonly used `border`, `outline` doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as `border` does. This outline is a solid, dark red line that's two pixels thick. Note the use of the `darkred` keyword when specifying the color.
* Notice that we're not explicitly setting the text color. That means the value of `color` will be inherited from the nearest containing element that defines it. By default, that's black.

```css
.boxRight {
  float: right;
  background-color: hsl(270deg 50% 75%);
  outline: 4px dashed rgb(110 20 120);
  color: hsl(0deg 100% 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}
```

**Note:** When you try to show it in Safari, it will not show properly. Because Safari doesn't support `text-decoration: underline wavy #88ff88`.

Finally, the `.boxRight` class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

* The `background-color` is set using the HSL value specified using `hsl(270deg 50% 75%)`. This is a medium purple color.
* The box's `outline` is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (`rgb(110 20 120)`).
* The foreground (text) color is specified by setting the `color` property to `hsl(0deg 100% 100%)`. This is one of many ways to specify the color white.
* We add a green wavy line under the text with `text-decoration`.
* Finally, a bit of a shadow is added to the text using `text-shadow`. Its `color` parameter is set to `black`.
Letting the user pick a color
-----------------------------

There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the `<input>` element, by using `"color"` as the value of its `type` attribute.

The `<input>` element represents a color only in the hexadecimal string notation covered above.

### Example: Picking a color

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

**Note:** On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

#### HTML

The HTML here creates a box that contains a color picker control (with a label created using the `<label>` element) and an empty paragraph element (`<p>`) into which we'll output some text from our JavaScript code.

```html
<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>
```

#### CSS

The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color.

```css
#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245 220 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### JavaScript

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the `<input type="color">` element.

```js
const colorPicker = document.getElementById("colorPicker");
const box = document.getElementById("box");
const output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  (event) => {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  (event) => {
    output.innerText = `Color set to ${colorPicker.value}.`;
  },
  false,
);
```

The `input` event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

The `change` event is received when the color picker's value is finalized. We respond by setting the contents of the `<p>` element with the ID `"output"` to a string describing the finally selected color.

Using color wisely
------------------

Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness.

### Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

#### Base color

The first step is to choose your **base color**. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

* A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
* A color that comes from imagery associated with what your content is about. If you're creating a website about a given item or product, choose a color that's physically present on that item.
* Browse websites that let you look at lots of existing color palettes and images to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

**Note:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

#### Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

* MDN's color picker tool
* Paletton
* Adobe Color CC online color wheel

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

**Note:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

### Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)

An online course which introduces concepts such as what color is, how it's perceived, and how to use colors to express ideas. Presented by Pixar artists and designers.

Color theory on Wikipedia

Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color selection process, but is still full of useful information.

### Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

**Note:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

For more information about color blindness, see the following articles:

* Medline Plus: Color Blindness (United States National Institute of Health)
* American Academy of Ophthalmology: What Is Color Blindness?
* Color Blindness & Web Design (Usability.gov: United States Department of Health and Human Services)
### Palette design example

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is `#D79C7A`, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

![Right after loading Paletton.](/en-US/docs/Web/CSS/CSS_colors/Applying_color/paletton1.png)

Next, we enter our color's hex code (`D79C7A`) into the "Base RGB" box at the bottom-left corner of the tool:

![After entering base color](/en-US/docs/Web/CSS/CSS_colors/Applying_color/paletton2.png)

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is `#508D7C`.

![Now with complementary colors included.](/en-US/docs/Web/CSS/CSS_colors/Applying_color/paletton3.png)

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

![Triad color scheme selected](/en-US/docs/Web/CSS/CSS_colors/Applying_color/paletton4.png)

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's `#556E8D`. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

![Triad color scheme selected](/en-US/docs/Web/CSS/CSS_colors/Applying_color/paletton-color-detail.png)

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

### Color, backgrounds, contrast, and printing

 What looks good on screen may look very different on paper.
 In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself.
 Most browsers, by default, remove background images when printing documents.

If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS `print-color-adjust` property to tell the browser that it should not make adjustments to the appearance of content.

The default value of `print-color-adjust`, `economy`, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.

 You can set `print-color-adjust` to `exact` to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are.
 With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.

**Note:** There is no guarantee, though, that `print-color-adjust: exact` will result in your CSS being used exactly as given.
 If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of `print-color-adjust`.

See also
--------

* Drawing graphics
* Graphics on the web
* CSS color module


invert() - CSS: Cascading Style Sheets

invert()
========

The **`invert()`** CSS function inverts the color samples in the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------

```css
invert(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `0`.

Examples
--------

### Examples of correct values for invert()

```css
invert(0)     /\* No effect \*/
invert(.6)    /\* 60% inversion \*/
invert(100%)  /\* Completely inverted \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `opacity()`
* `saturate()`
* `sepia()`


saturate() - CSS: Cascading Style Sheets

saturate()
==========

The **`saturate()`** CSS function super-saturates or desaturates the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------

```css
saturate(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value under `100%` desaturates the image, while a value over `100%` super-saturates it. A value of `0%` is completely unsaturated, while a value of `100%` leaves the input unchanged. The initial value for interpolation is `1`.

Examples
--------

### Examples of correct values for saturate()

```css
saturate(0)     /\* Completely unsaturated \*/
saturate(.4)    /\* 40% saturated \*/
saturate(100%)  /\* No effect \*/
saturate(200%)  /\* Double saturation \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-saturate |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `sepia()`


grayscale() - CSS: Cascading Style Sheets

grayscale()
===========

The **`grayscale()`** CSS function converts the input image to grayscale. Its result is a `<filter-function>`.

Try it
------

Syntax
------

```css
grayscale(amount)
```

### Parameters

`amount`

Amount of the input image that is converted to grayscale. It is specified as a `<number>` or a `<percentage>`. A value of `100%` changes the input completely to grayscale, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect. If the `grayscale()` filter is present with no parameter, the default value is `1`. The initial value used for interpolation is `0`.

Examples
--------

### Examples of correct values for grayscale()

```css
grayscale(0)     /\* No effect \*/
grayscale(.7)    /\* 70% grayscale \*/
grayscale(100%)  /\* Completely grayscale \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-grayscale |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`


sepia() - CSS: Cascading Style Sheets

sepia()
=======

The **`sepia()`** CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a `<filter-function>`.

Try it
------

Syntax
------

```css
sepia(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `100%` is completely sepia, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `0`.

Examples
--------

### Examples of correct values for sepia()

```css
sepia(0)     /\* No effect \*/
sepia(.65)   /\* 65% sepia \*/
sepia(100%)  /\* Completely sepia \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-sepia |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`


brightness() - CSS: Cascading Style Sheets

brightness()
============

The **`brightness()`** CSS `<filter-function>` applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.

Try it
------

Syntax
------

```css
brightness(amount)
```

### Values

`amount`

Brightness specified as a `<number>` or a `<percentage>`. A value less than `100%` darkens the input image or element, while a value over `100%` brightens it. A value of `0%` creates a completely black image or element, while a value of `100%` leaves the input unchanged. Other values between `0%` to `100%` have a linear multiplier effect. Values greater than `100%` are allowed, providing brighter results. The initial value for interpolation is `1`. Negative values are not allowed. The default value, when nothing is specified, is `1`.

The following are pairs of equivalent values:

```css
brightness(0) /\* Brightness is reduced to zero, so input turns black \*/
brightness(0%)

brightness(0.4) /\* Brightness of input is reduced to 40%, so input is 60% darker \*/
brightness(40%)

brightness(1) /\* Brightness of input is not changed \*/
brightness(100%)

brightness(2) /\* Brightness of input is doubled \*/
brightness(200%)
```

### Formal syntax
```

<brightness()> =
  brightness( [ <number> | <percentage> ]? )

```

Examples
--------

### Applying brightness using the backdrop-filter property

This example shows how to apply the `brightness()` filter to a paragraph via the `backdrop-filter` CSS property.

#### CSS

```css
.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}
```

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

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

#### Result

In this example, the colors in the area behind the `<p>` element shift linearly. If the `backdrop-filter` property was set to `brightness(0%)`, the `<div>` area with the `<p>` element would have been black and hidden the image behind. At `brightness(100%)`, the `<div>` area color would be the same as the input `#d4d5b2`, and the image behind would be completely transparent. With the brightness set to `150%` as in this example, the colors in the image behind are getting hidden by the brightness of the `<div>` element.`

### Applying brightness using the filter property

In this example, a `brightness()` filter is applied to the entire element, including content, border, and background image via the `filter` CSS property. The result shows three variations of different brightness values.

```css
p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}
```

```
p {
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: palegoldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
  padding: 0.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  width: 85vw;
}
```

```
<p>This paragraph has reduced brightness.</p>
<p>This paragraph has normal brightness.</p>
<p>This paragraph has increased brightness.</p>
```

### Applying brightness using the url() SVG brightness filter

The SVG `<filter>` element is used to define custom filter effects that can then be referenced by `id`. The `<filter>` element's `<feComponentTransfer>` primitive enables pixel-level color remapping.

In this example, to create a filter that darkens the content on which it is applied by 25% (i.e., 75% of the original brightness), the `slope` attribute is set to `0.75`. We can then reference the filter by `id`.

Given the following:
```

.filter {
  filter: brightness(0.75);
}
svg {
  position: absolute;
}
```

```html
<svg role="none">
  <filter id="darken25" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.75" />
      <feFuncG type="linear" slope="0.75" />
      <feFuncB type="linear" slope="0.75" />
    </feComponentTransfer>
  </filter>
</svg>
```

The following declarations produce similar effects:

```css
filter: brightness(75%);
filter: url(#darken25); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#darken25); /\* external svg filter definition \*/
```

In the images below, the first one has a `brightness()` filter function applied, the second one has a similar SVG brightness function applied, and the third is the original image for comparison.
```

<table cellpadding="5">
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img class="filter" src="flag.jpg" alt="darkened pride flag" /></td>
      <td>
        <img
 style="filter: url(#darken25)"
 src="flag.jpg"
 alt="darkened pride flag" />
      </td>
      <td>
        <img src="flag.jpg" alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-brightness |

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

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

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`


drop-shadow() - CSS: Cascading Style Sheets

drop-shadow()
=============

The **`drop-shadow()`** CSS function applies a drop shadow effect to the input image. Its result is a `<filter-function>`.

Try it
------

A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.

**Note:** This function is somewhat similar to the `box-shadow` property. The `box-shadow` property creates a rectangular shadow behind an element's *entire box*, while the `drop-shadow()` filter function creates a shadow that conforms to the shape (alpha channel) of the *image itself*.

Syntax
------

```css
/\* Two length values \*/
/\* drop-shadow( <length> <length> ) \*/
drop-shadow(5px 5px)

/\* Three length values \*/
/\* drop-shadow( <length> <length> <length> ) \*/
drop-shadow(5px 5px 15px)

/\* Two length values and a color \*/
/\* drop-shadow( <length> <length> <color> ) \*/
drop-shadow(5px 5px red)

/\* Three length values and a color \*/
/\* drop-shadow( <length> <length> <length> <color> ) \*/
drop-shadow(5px 5px 15px red)

/\* The order of color and length values can be changed \*/
/\* drop-shadow( <color> <length> <length> <length> ) \*/
drop-shadow(#e23 0.5rem 0.5rem 1rem)
```

The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in the `box-shadow` property), with the exception that the `inset` keyword and `spread` parameters are not allowed.

### Parameters

`<color>` Optional

Specifies the color for the shadow. If not specified, the value of the `color` property defined in the parent element is used.

`<length>`

Specifies the offset length of the shadow. This parameter accepts two or three values. If two values are specified, they are interpreted as `<offset-x>` (horizontal offset) and `<offset-y>` (vertical offset) values. Negative `<offset-x>` value places the shadow to the left of the element. Negative `<offset-y>` value places the shadow above the element. If not specified, the value of `0` is used for the missing length. If a third value is specified, it is interpreted as `<standard-deviation>`, which is the value of the standard deviation to the Gaussian blur function. A larger `<standard-deviation>` value creates a larger and more blurred shadow. Negative values for `<standard-deviation>` are not allowed.

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

<drop-shadow()> =
  drop-shadow( [ <color>? && <length>{2,3} ] )

```

Examples
--------

### Setting a drop shadow

```html
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
```

```css
div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -6px red);
}
```

In the absence of a `<color>` value in the `drop-shadow()` function in the first box, the shadow uses the value of the `color` property from the element (`lime`). The second and third shadows illustrate that the length and color values can be specified in any order. The third shadow shows the blurring effect when a third `<length>` value is specified. The fourth shadow uses negative offsets which shifts shadow to the left and top.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
* `box-shadow` property
* `text-shadow` property


hue-rotate() - CSS: Cascading Style Sheets

hue-rotate()
============

The **`hue-rotate()`** CSS function rotates the hue of an element and its contents. Its result is a `<filter-function>`.

Try it
------

Syntax
------

The `hue-rotate()` function applies a color rotation to the elements on which it is applied.

```css
hue-rotate(angle)
```

### Values

`angle`

The relative change in hue of the input sample, specified as an `<angle>`. A value of `0deg` leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The initial value for interpolation is `0`. There is no minimum or maximum value. The effect of values above `360deg` are, given `hue-rotate(Ndeg)`, evaluates to `N` modulo 360.

The `<angle>` CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:

```css
hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)
```

### Formal syntax
```

<hue-rotate()> =
  hue-rotate( [ <angle> | <zero> ]? )

```

Examples
--------

### With the backdrop-filter property

This example applies a `hue-rotate()` filter via the `backdrop-filter` CSS property to the paragraph, color shifting to the area behind the `<p>`.

```css
.container {
  background: url(image.jpg) no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}
```

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

### With the filter property

This example applies a `hue-rotate()` filter via the `filter` CSS property adding the color shift to the entire element, including content, border, and background image.

```css
p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
}
```

```
p {
  padding: 0.5rem;
  font-size: 2rem;
  font-family: sans-serif;
  width: 85vw;
}
```

```
<p>The person who wrote this example is not a designer, fortunately.</p>
```

### With url() and the SVG hue-rotate filter

The SVG `<filter>` element is used to define custom filter effects that can then be referenced by `id`. The `<filter>`'s `<feColorMatrix>` primitive `hueRotate` type provides the same effect. Given the following:

```svg
<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>
```

These values produce the same results:

```css
filter: hue-rotate(90deg); /\* 90deg rotation \*/
filter: url(#filterID); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#filterID); /\* external svg filter definition \*/
```

This example shows three images: the image with a `hue-rotate()` filter function applied, the image with an equivalent `url()` filter applied, and the original images for comparison:
```

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
 style="filter: hue-rotate(90deg)"
 src="flag.jpg"
 alt="Pride flag with rotated colors" />
      </td>
      <td>
        <svg
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 220 220"
 color-interpolation-filters="sRGB"
 height="220"
 width="220">
          <filter id="hue-rotate">
            <feColorMatrix type="hueRotate" values="90" />
          </filter>
          <image
 xlink:href="flag.jpg"
 filter="url(#hue-rotate)"
 width="220"
 height="220" />
        </svg>
      </td>

      <td><img src="flag.jpg" alt="Pride flag" /></td>
    </tr>
  </tbody>
</table>
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-hue-rotate |

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

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

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`


opacity() - CSS: Cascading Style Sheets

opacity()
=========

The **`opacity()`** CSS function applies transparency to the samples in the input image. Its result is a `<filter-function>`.

Try it
------

**Note:** This function is similar to the more established `opacity` property. The difference is that with filters, some browsers provide hardware acceleration for better performance.

Syntax
------

```css
opacity(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `0%` is completely transparent, while a value of `100%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `1`.

Examples
--------

### Examples of correct values for opacity()

```css
opacity(0%)   /\* Completely transparent \*/
opacity(50%)  /\* 50% transparent \*/
opacity(1)    /\* No effect \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-opacity |

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

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

See also
--------

* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `saturate()`
    + `sepia()`
* The CSS `opacity` property


contrast() - CSS: Cascading Style Sheets

contrast()
==========

The **`contrast()`** CSS function adjusts the contrast of the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------

```css
contrast(amount)
```

### Values

`amount`

The contrast of the result, specified as a `<number>` or a `<percentage>`. A value under `100%` decreases the contrast, while a value over `100%` increases it. A value of `0` or `0%` will create an image that is completely gray, while a value of `1` or `100%` leaves the input unchanged. Negative values are not allowed. The initial value for interpolation is `1`.

The following are pairs of equivalent values:

```css
contrast(0) /\* Completely gray \*/
contrast(0%)

contrast(0.65) /\* 65% contrast \*/
contrast(65%)

contrast(1)     /\* No effect \*/
contrast(100%)

contrast(2)  /\* Double contrast \*/
contrast(200%)
```

### Formal syntax
```

<contrast()> =
  contrast( [ <number> | <percentage> ]? )

```

Examples
--------

### With the backdrop-filter property

This example applies a `contrast()` filter via the `backdrop-filter` CSS property to the paragraph and monospaced text, color shifting to the area behind the `<p>` and `<code>`.

```css
.container {
  background: url(image.jpg) no-repeat center / contain #339;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}
```

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

```
<div class="container" style="background-image: url(unity\_for\_the\_people.jpg);">
  <p>
    Always ensure there is enough contrast between text and all background
    colors. If you think your text may land on top of a background image,
    include a <code>backdrop-filter</code>. Reducing the contrast of background
    colors with the <code>contrast()</code> filter may improve legibility but
    does not guarantee accessibility.
  </p>
</div>
```

### With the filter property

This example applies a `contrast()` filter via the `filter` CSS property, changing contrast by shifting colors of the entire element, including content, border, background, and shadows.

```css
p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}
```

```
p {
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: palegoldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
  padding: 0.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  width: 85vw;
}
```

```
<p>This paragraph has reduced contrast.</p>
<p>This paragraph has normal contrast.</p>
<p>This paragraph has increased contrast.</p>
```

### With url() and the SVG contrast filter

The SVG `<filter>` element is used to define custom filter effects that can then be referenced by `id`. The `<filter>`'s `<feComponentTransfer>` primitive enables pixel-level color remapping. Given the following:

```svg
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.5"/>
      <feFuncB type="linear" slope="2" intercept="-0.5"/>
    </feComponentTransfer>
  </filter>
```

```
.svgFilterLive {
  filter: url(#contrast2);
}
```

These values produce the same results:

```css
filter: contrast(200%);
filter: url(#contrast); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#contrast); /\* external svg filter definition \*/
```

This example shows three images: the image with a `contrast()` filter function applied, the image with an equivalent `url()` filter applied, and the original images for comparison:
```

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>contrast()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img style="filter: contrast(200%)" src="flag.jpg" alt="Pride flag" />
      </td>
      <td>
        <img class="svgFilterLive" src="flag.jpg" alt="Pride flag" />
        <svg
 xmlns="http://www.w3.org/2000/svg"
 id="svg"
 viewBox="0 0 240 151"
 height="0"
 width="0"
 style="overflow: visible"
 color-interpolation-filters="sRGB">
          <filter id="contrast2">
            <feComponentTransfer>
              <feFuncR type="linear" slope="2" intercept="-0.5" />
              <feFuncG type="linear" slope="2" intercept="-0.5" />
              <feFuncB type="linear" slope="2" intercept="-0.5" />
            </feComponentTransfer>
          </filter>
        </svg>
      </td>
      <td>
        <img src="flag.jpg" alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-contrast |

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

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

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `brightness()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`


blur() - CSS: Cascading Style Sheets

blur()
======

The **`blur()`** CSS function applies a Gaussian blur to the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------

The `blur()` function applies a Gaussian blur to the elements on which it is applied.

```css
blur(radius)
```

### Parameters

`radius`

The radius of the blur, specified as a `<length>`. It defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of `0` leaves the input unchanged. The initial value for interpolation is `0`. Percentage values are invalid.

### Setting a blur with pixels and with rem

```css
blur(0)        /\* No effect \*/
blur(8px)      /\* Blur with 8px radius \*/
blur(1.17rem)  /\* Blur with 1.17rem radius \*/
```

SVG filter
----------

The SVG `<feGaussianBlur>` filter element can also be used to blur content. 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`. This SVG effect can then be referenced by ID:

```html
<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>
```

The following declarations produce the same effect:

```css
filter: blur(1.1px);
filter: url(#blur11); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#blur11); /\* external svg filter definition \*/
```

Examples
--------

This example shows three images: the image with a `blur()` filter function applied, the image with the equivalent SVG blur function applied, and the original images for comparison:

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

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

```
svg:not([height]) {
  display: none;
}
```

```
<table cellpadding="5">
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img class="filter" src="flag.jpg" alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" style="overflow: visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </filter>
          <image href="flag.jpg" xlink:href="flag.jpg" filter="url(#svgBlur)" />
        </svg>
      </td>
      <td>
        <img src="flag.jpg" alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-blur |

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

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

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`