← 返回首页
grayscale() - CSS | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Toggle sidebar
  1. Tecnologia Web para desenvolvedores
  2. CSS
  3. Referência de CSS
  4. Values
  5. <filter-function>
  6. grayscale()
Theme
  • OS default
  • Light
  • Dark
Português (do Brasil)
Remember language Learn more

Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

View in English Always switch to English

grayscale()

Baseline Widely available

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

O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". <filter-function>.

In this article

Experimente

filter: grayscale(0);
filter: grayscale(0.2);
filter: grayscale(60%);
filter: grayscale(1);
<section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </section>

Sintaxe

grayscale(quantidade)

Parâmetros

quantidade

A quantia da conversão é especificada em <number> (número) ou <percentage> (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.

css
grayscale(0) /* Não afeta a imagem */ grayscale(.7) /* .7 => 70% de branco&preto */ grayscale(100%) /* Completamente em branco&preto */

Veja também

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on 20 de mar. de 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content
  1. CSS
  2. Guides
  3. Modules
    1. Anchor positioning
    2. Animations
    3. Backgrounds and borders
    4. CSS Basic User Interface
    5. Borders and box decorations
    6. Box alignment
    7. CSS Box Model
    8. Box sizing
    9. Cascading and inheritance
    10. Color adjustment
    11. Colors
    12. Compositing and blending
    13. Conditional rules
    14. Containment
    15. Counter styles
    16. CSSOM view
    17. Custom functions and mixins
    18. Custom highlight API
    19. Custom properties for cascading variables
    20. CSS Display
    21. Easing functions
    22. Environment variables
    23. Filter effects
    24. CSS Flexible Box Layout
    25. Font loading
    26. Fonts
    27. Fragmentation
    28. Generated content
    29. CSS Grid Layout
    30. CSS Images
    31. Inline layout
    32. Lists and counters
    33. Logical properties and values
    34. Masking
    35. Media queries
    36. Motion path
    37. Multi-column layout
    38. Namespaces
    39. Nesting
    40. Overflow
    41. Overscroll behavior
    42. Paged media
    43. CSS Positioning
    44. Properties and values API
    45. Pseudo-elements
    46. Round display
    47. Ruby layout
    48. Scoping
    49. Scroll anchoring
    50. Scroll snap
    51. Scroll-driven animations
    52. Scrollbars styling
    53. Seletores CSS
    54. Shadow parts
    55. Shapes
    56. Syntax
    57. Table
    58. Text
    59. Text decoration
    60. Transforms
    61. Transitions
    62. Values and units
    63. View transitions
    64. Viewport
    65. Writing modes
  4. Anchor positioning
    1. Using anchor positioning
    2. Handling overflow
    3. Anchored container queries
  5. Animations
    1. Animatable properties
    2. Usando animações CSS
  6. Backgrounds and borders
    1. Multiple backgrounds
    2. Alterando a escala das imagens de background
    3. Scaling SVG backgrounds
  7. Box alignment
    1. Overview
    2. In block layout
    3. In flexbox
    4. In grid layout
    5. In multi-column layout
  8. Box model
    1. Box model
    2. Dominando margin collapsing
  9. Box sizing
    1. Aspect ratios
  10. Cascade
    1. Introduction
    2. Herança
    3. Especificidade
    4. Valor atual
    5. Propriedades shorthand
  11. Cascading variables
    1. Utilizando propriedades CSS personalizadas (variáveis)
  12. Colors
    1. Aplicando cores a elementos HTML usando CSS
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility: Colors and luminance
    6. Accessibility: Color contrast
  13. Columns
    1. Basic concepts
    2. Styling columns
    3. Using multi-column layouts
    4. Spanning and balancing columns
    5. Handling overflow
    6. Handling content breaks
  14. Conditional rules
    1. Using feature queries
    2. Using container scroll-state queries
  15. Containment
    1. Container queries
    2. Using containment
    3. Using container size and style queries
  16. Counters
    1. Using CSS counters
  17. CSSOM view
    1. Coordinate systems (API)
    2. Viewport concepts
  18. Custom functions and mixins
    1. Using CSS custom functions
  19. Display
    1. Block and inline layout
    2. Flow layout
    3. Flow layout and overflow
    4. Flow layout and writing modes
    5. In flow and out of flow
    6. Layout and the containing block
    7. Formatting contexts
    8. Block formatting context
    9. Inline formatting context
    10. Using multi-keyword syntax
    11. Visual formatting model
  20. Environment variables
    1. Using environment variables
  21. Filter effects
    1. Using filter effects
  22. Flexbox
    1. Conceitos básicos de flexbox
    2. Flexbox and other layouts
    3. Aligning Items in a Flex Container
    4. Ordering flex items
    5. Controlling flex item ratios
    6. Wrapping flex items
    7. Typical use cases
  23. Fonts
    1. OpenType features
    2. Variable fonts
    3. WOFF
  24. Grid
    1. Conceitos básicos de layout de grade
    2. Relationship of grid layout to other layout methods
    3. Using line-based placement
    4. Grid template areas
    5. Using named grid lines
    6. Using auto-placement
    7. Aligning items
    8. Logical values and writing modes
    9. Grid layout and accessibility
    10. Common grid layouts
    11. Subgrid
    12. Masonry layout
  25. Images
    1. Using gradients
    2. Using object-view-box
    3. Styling replaced elements
    4. Implementando sprites de imagens em CSS
  26. Lists
    1. Indenting lists
  27. Logical properties
    1. Basic concepts
    2. For floating and positioning
    3. For margins, borders, and padding
    4. For sizing
  28. Masking
    1. Introduction
    2. Clipping
    3. Multiple masks
    4. Mask properties
  29. Media queries
    1. Usando Media Queries
    2. For accessibility
    3. Testing
    4. Printing
  30. Nesting
    1. Nesting at-rules
    2. Nesting and specificity
    3. Using nesting
  31. Overflow
    1. Creating carousels
  32. Posicionamento
    1. Stacking context
    2. Stacking floating elements
    3. Understanding CSS z-index
    4. Using z-index
    5. Stacking without z-index
  33. Properties and Values API
    1. CSS Houdini
    2. Registering custom properties in CSS
  34. Scroll anchoring
    1. Overview
  35. Scroll-driven animations
    1. Scroll-driven animation timelines
    2. Understanding timeline range names
  36. Scroll snap
    1. Basic concepts
    2. Using scroll snap events
  37. Selectors
    1. Selectors and combinators
    2. Selector structure
    3. Privacidade e o seletor :visited
    4. Using :target
  38. Shapes
    1. Overview
    2. Box-value shapes
    3. Image-based shapes
    4. Using shape-outside
    5. Shape generator
  39. Syntax
    1. Sintaxe
    2. Comments
    3. Regra At
    4. Error handling
  40. Text
    1. Wrapping and breaking text
    2. Whitespace no DOM
  41. Text decoration
    1. Text shadows
  42. Transforms
    1. Usando CSS transforms
  43. Transitions
    1. Using CSS transitions
  44. Values and units
    1. Value definition syntax
    2. Numeric data types
    3. Textual data types
    4. Using math functions
    5. Using typed arithmetic
  45. Writing modes
    1. Introduction
    2. Vertical form controls
  46. How to
  47. Layout cookbook
    1. Recipe: Media objects
    2. Column layouts
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Navegação "Migalha de Pão"
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
    11. Contribute a recipe
      1. Cookbook template
  48. Tools
    1. Gerador de Border-image
    2. Gerador de Border-radius
    3. Box-shadow generator
    4. Seletor de cores
    5. Color mixer
    6. Shape generator
  50. Referência de CSS
  51. Properties
    1. -moz-*
      1. -moz-float-edge
      2. -moz-force-broken-image-icon
      3. -moz-orient
      4. -moz-user-focus
      5. -moz-user-input
    2. -webkit-*
      1. -webkit-border-before
      2. -webkit-box-reflect
      3. -webkit-mask-box-image
      4. -webkit-mask-composite
      5. -webkit-mask-position-x
      6. -webkit-mask-position-y
      7. -webkit-mask-repeat-x
      8. -webkit-mask-repeat-y
      9. -webkit-tap-highlight-color
      10. -webkit-text-fill-color
      11. -webkit-text-security
      12. -webkit-text-stroke
      13. -webkit-text-stroke-color
      14. -webkit-text-stroke-width
      15. -webkit-touch-callout
    3. Propriedades personalizadas (--*)
    4. accent-color
    5. align-*
      1. align-content
      2. align-items
      3. align-self
    6. alignment-baseline
    7. all
    8. anchor-name
    9. anchor-scope
    10. animation-*
      1. animation-composition
      2. animation-delay
      3. animation-direction
      4. animation-duration
      5. animation-fill-mode
      6. animation-iteration-count
      7. animation-name
      8. animation-play-state
      9. animation-range
      10. animation-range-end
      11. animation-range-start
      12. animation-timeline
      13. animation-timing-function
    11. animation
    12. appearance
    13. aspect-ratio
    14. backdrop-filter
    15. backface-visibility
    16. background-*
      1. background-attachment
      2. background-blend-mode
      3. background-clip
      4. background-color
      5. background-image
      6. background-origin
      7. background-position
      8. background-position-x
      9. background-position-y
      10. background-repeat
      11. background-repeat-x
      12. background-repeat-y
      13. background-size
    17. background
    18. baseline-shift
    19. baseline-source
    20. block-size
    21. border-*
      1. border-block
      2. border-block-color
      3. border-block-end
      4. border-block-end-color
      5. border-block-end-style
      6. border-block-end-width
      7. border-block-start
      8. border-block-start-color
      9. border-block-start-style
      10. border-block-start-width
      11. border-block-style
      12. border-block-width
      13. border-bottom
      14. border-bottom-color
      15. border-bottom-left-radius
      16. border-bottom-right-radius
      17. border-bottom-style
      18. border-bottom-width
      19. border-collapse
      20. border-color
      21. border-end-end-radius
      22. border-end-start-radius
      23. border-image
      24. border-image-outset
      25. border-image-repeat
      26. border-image-slice
      27. border-image-source
      28. border-image-width
      29. border-inline
      30. border-inline-color
      31. border-inline-end
      32. border-inline-end-color
      33. border-inline-end-style
      34. border-inline-end-width
      35. border-inline-start
      36. border-inline-start-color
      37. border-inline-start-style
      38. border-inline-start-width
      39. border-inline-style
      40. border-inline-width
      41. border-left
      42. border-left-color
      43. border-left-style
      44. border-left-width
      45. border-radius
      46. border-right
      47. border-right-color
      48. border-right-style
      49. border-right-width
      50. border-spacing
      51. border-start-end-radius
      52. border-start-start-radius
      53. border-style
      54. border-top
      55. border-top-color
      56. border-top-left-radius
      57. border-top-right-radius
      58. border-top-style
      59. border-top-width
      60. border-width
    22. border
    23. bottom
    24. box-*
      1. box-align
      2. box-decoration-break
      3. box-direction
      4. box-flex
      5. box-flex-group
      6. box-lines
      7. -moz-box-ordinal-group
      8. box-orient
      9. box-pack
      10. box-shadow
      11. box-sizing
    25. break-*
      1. break-after
      2. break-before
      3. break-inside
    26. caption-side
    27. caret-*
      1. caret-animation
      2. caret-color
      3. caret-shape
    28. caret
    29. clear
    30. clip-path
    31. clip-rule
    32. clip
    33. color-*
      1. color-interpolation
      2. color-interpolation-filters
      3. color-scheme
    34. Propriedade color do CSS
    35. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-height
      5. column-rule
      6. column-rule-color
      7. column-rule-style
      8. column-rule-width
      9. column-span
      10. column-width
      11. column-wrap
    36. columns
    37. contain-*
      1. contain-intrinsic-block-size
      2. contain-intrinsic-height
      3. contain-intrinsic-inline-size
      4. contain-intrinsic-size
      5. contain-intrinsic-width
    38. contain
    39. container-name
    40. container-type
    41. container
    42. content-visibility
    43. content
    44. corner-*
      1. corner-block-end-shape
      2. corner-block-start-shape
      3. corner-bottom-left-shape
      4. corner-bottom-right-shape
      5. corner-bottom-shape
      6. corner-end-end-shape
      7. corner-end-start-shape
      8. corner-inline-end-shape
      9. corner-inline-start-shape
      10. corner-left-shape
      11. corner-right-shape
      12. corner-shape
      13. corner-start-end-shape
      14. corner-start-start-shape
      15. corner-top-left-shape
      16. corner-top-right-shape
      17. corner-top-shape
    45. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    46. cursor
    47. cx
    48. cy
    49. d
    50. direction
    51. Display
    52. dominant-baseline
    53. dynamic-range-limit
    54. empty-cells
    55. field-sizing
    56. fill-opacity
    57. fill-rule
    58. fill
    59. filter
    60. flex-*
      1. flex-basis
      2. flex-direction
      3. flex-flow
      4. flex-grow
      5. flex-shrink
      6. flex-wrap
    61. flex
    62. float
    63. flood-color
    64. flood-opacity
    65. font-*
      1. font-family
      2. font-feature-settings
      3. font-kerning
      4. font-language-override
      5. font-optical-sizing
      6. font-palette
      7. font-size
      8. font-size-adjust
      9. font-smooth
      10. font-stretch
      11. font-style
      12. font-synthesis
      13. font-synthesis-position
      14. font-synthesis-small-caps
      15. font-synthesis-style
      16. font-synthesis-weight
      17. font-variant
      18. font-variant-alternates
      19. font-variant-caps
      20. font-variant-east-asian
      21. font-variant-emoji
      22. font-variant-ligatures
      23. font-variant-numeric
      24. font-variant-position
      25. font-variation-settings
      26. font-weight
      27. font-width
    66. font
    67. forced-color-adjust
    68. gap
    69. grid-*
      1. grid-area
      2. grid-auto-columns
      3. grid-auto-flow
      4. grid-auto-rows
      5. grid-column
      6. grid-column-end
      7. grid-column-start
      8. grid-row
      9. grid-row-end
      10. grid-row-start
      11. grid-template
      12. grid-template-areas
      13. grid-template-columns
      14. grid-template-rows
    70. grid
    71. hanging-punctuation
    72. height
    73. hyphenate-character
    74. hyphenate-limit-chars
    75. hifens
    76. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution
    77. initial-letter
    78. inline-size
    79. inset-*
      1. inset-block
      2. inset-block-end
      3. inset-block-start
      4. inset-inline
      5. inset-inline-end
      6. inset-inline-start
    80. inset
    81. interactivity
    82. interest-*
      1. interest-delay
      2. interest-delay-end
      3. interest-delay-start
    83. interpolate-size
    84. isolation
    85. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    86. left
    87. letter-spacing
    88. lighting-color
    89. line-*
      1. line-break
      2. line-clamp
      3. line-height
      4. line-height-step
    90. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    91. margin-*
      1. margin-block
      2. margin-block-end
      3. margin-block-start
      4. margin-bottom
      5. margin-inline
      6. margin-inline-end
      7. margin-inline-start
      8. margin-left
      9. margin-right
      10. margin-top
      11. margin-trim
    92. margin
    93. marker-*
      1. marker-end
      2. marker-mid
      3. marker-start
    94. marker
    95. mask-*
      1. mask-border
      2. mask-border-mode
      3. mask-border-outset
      4. mask-border-repeat
      5. mask-border-slice
      6. mask-border-source
      7. mask-border-width
      8. mask-clip
      9. mask-composite
      10. mask-image
      11. mask-mode
      12. mask-origin
      13. mask-position
      14. mask-repeat
      15. mask-size
      16. mask-type
    96. mask
    97. math-*
      1. math-depth
      2. math-shift
      3. math-style
    98. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    99. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    100. mix-blend-mode
    101. object-*
      1. object-fit
      2. object-position
      3. object-view-box
    102. offset-*
      1. offset-anchor
      2. offset-distance
      3. offset-path
      4. offset-position
      5. offset-rotate
    103. offset
    104. opacity
    105. order
    106. orphans
    107. outline-*
      1. outline-color
      2. outline-offset
      3. outline-style
      4. outline-width
    108. outline
    109. overflow-*
      1. overflow-anchor
      2. overflow-block
      3. overflow-clip-margin
      4. overflow-inline
      5. word-wrap
      6. overflow-x
      7. overflow-y
    110. overflow
    111. overlay
    112. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    113. padding-*
      1. padding-block
      2. padding-block-end
      3. padding-block-start
      4. padding-bottom
      5. padding-inline
      6. padding-inline-end
      7. padding-inline-start
      8. padding-left
      9. padding-right
      10. padding-top
    114. padding
    115. page-*
      1. page-break-after
      2. page-break-before
      3. page-break-inside
    116. page
    117. paint-order
    118. perspective-origin
    119. perspective
    120. place-*
      1. place-content
      2. place-items
      3. place-self
    121. pointer-events
    122. position-*
      1. position-anchor
      2. position-area
      3. position-try
      4. position-try-fallbacks
      5. position-try-order
      6. position-visibility
    123. position
    124. print-color-adjust
    125. quotes
    126. r
    127. reading-flow
    128. reading-order
    129. resize
    130. right
    131. rotate
    132. row-gap
    133. ruby-*
      1. ruby-align
      2. ruby-overhang
      3. ruby-position
    134. rx
    135. ry
    136. scale
    137. scroll-*
      1. scroll-behavior
      2. scroll-initial-target
      3. scroll-margin
      4. scroll-margin-block
      5. scroll-margin-block-end
      6. scroll-margin-block-start
      7. scroll-margin-bottom
      8. scroll-margin-inline
      9. scroll-margin-inline-end
      10. scroll-margin-inline-start
      11. scroll-margin-left
      12. scroll-margin-right
      13. scroll-margin-top
      14. scroll-marker-group
      15. scroll-padding
      16. scroll-padding-block
      17. scroll-padding-block-end
      18. scroll-padding-block-start
      19. scroll-padding-bottom
      20. scroll-padding-inline
      21. scroll-padding-inline-end
      22. scroll-padding-inline-start
      23. scroll-padding-left
      24. scroll-padding-right
      25. scroll-padding-top
      26. scroll-snap-align
      27. scroll-snap-stop
      28. scroll-snap-type
      29. scroll-target-group
      30. scroll-timeline
      31. scroll-timeline-axis
      32. scroll-timeline-name
    138. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    139. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    140. speak-as
    141. stop-color
    142. stop-opacity
    143. stroke-*
      1. stroke-dasharray
      2. stroke-dashoffset
      3. stroke-linecap
      4. stroke-linejoin
      5. stroke-miterlimit
      6. stroke-opacity
      7. stroke-width
    144. stroke
    145. tab-size
    146. table-layout
    147. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-autospace
      5. text-box
      6. text-box-edge
      7. text-box-trim
      8. text-combine-upright
      9. text-decoration
      10. text-decoration-color
      11. text-decoration-inset
      12. text-decoration-line
      13. text-decoration-skip
      14. text-decoration-skip-ink
      15. text-decoration-style
      16. text-decoration-thickness
      17. text-emphasis
      18. text-emphasis-color
      19. text-emphasis-position
      20. text-emphasis-style
      21. text-indent
      22. text-justify
      23. text-orientation
      24. text-overflow
      25. text-rendering
      26. text-shadow
      27. text-size-adjust
      28. text-spacing-trim
      29. text-transform
      30. text-underline-offset
      31. text-underline-position
      32. text-wrap
      33. text-wrap-mode
      34. text-wrap-style
    148. timeline-scope
    149. top
    150. touch-action
    151. transform-*
      1. transform-box
      2. transform-origin
      3. transform-style
    152. transform
    153. transition-*
      1. transition-behavior
      2. transition-delay
      3. transition-duration
      4. transition-property
      5. transition-timing-function
    154. transition
    155. translate
    156. unicode-bidi
    157. user-modify
    158. user-select
    159. vector-effect
    160. vertical-align
    161. view-*
      1. view-timeline
      2. view-timeline-axis
      3. view-timeline-inset
      4. view-timeline-name
      5. view-transition-class
      6. view-transition-name
    162. visibility
    163. white-space
    164. white-space-collapse
    165. widows
    166. width
    167. will-change
    168. word-break
    169. word-spacing
    170. writing-mode
    171. x
    172. y
    173. z-index
    174. zoom
  52. Selectors
    1. & nesting selector
    2. Seletor de atributos
    3. Seletores de classe
    4. Seletores de ID
    5. Keyframe selectors
    6. Namespace separator
    7. Selector list
    8. Type selectors
    9. Seletor universal
  53. Combinators
    1. Child combinator
    2. Column combinator
    3. Descendant combinator
    4. Next-sibling combinator
    5. General sibling selectors
  54. Pseudo-classes
    1. :-moz-*
      1. :-moz-broken
      2. :-moz-drag-over
      3. :-moz-first-node
      4. :-moz-handler-blocked
      5. :-moz-handler-crashed
      6. :-moz-handler-disabled
      7. :-moz-last-node
      8. :-moz-loading
      9. :-moz-locale-dir(ltr)
      10. :-moz-locale-dir(rtl)
      11. :-moz-only-whitespace
      12. :-moz-submit-invalid
      13. :-moz-suppressed
      14. :-moz-user-disabled
      15. :-moz-window-inactive
    2. :active-view-transition
    3. :active-view-transition-type()
    4. :active
    5. :any-link
    6. :autofill
    7. :blank
    8. :buffering
    9. :checked
    10. :current
    11. :default
    12. :defined
    13. :dir()
    14. :disabled
    15. :empty
    16. :enabled
    17. :first-child
    18. :first-of-type
    19. :first
    20. :focus-visible
    21. :focus-within
    22. :focus
    23. :fullscreen
    24. :future
    25. :has-slotted
    26. :has()
    27. :heading
    28. :heading()
    29. :host-context()
    30. :host
    31. :host()
    32. :hover
    33. :in-range
    34. :indeterminate
    35. :interest-source
    36. :interest-target
    37. :invalid
    38. :is()
    39. :lang()
    40. :last-child
    41. :last-of-type
    42. :left
    43. :link
    44. :local-link
    45. :modal
    46. :muted
    47. :not()
    48. :nth-*
      1. :nth-child()
      2. :nth-last-child()
      3. :nth-last-of-type()
      4. :nth-of-type()
    49. :only-child
    50. :only-of-type
    51. :open
    52. :optional
    53. :out-of-range
    54. :past
    55. :paused
    56. :picture-in-picture
    57. :placeholder-shown
    58. :playing
    59. :popover-open
    60. :read-only
    61. :read-write
    62. :required
    63. :right
    64. :root
    65. :scope
    66. :seeking
    67. :stalled
    68. :state()
    69. :target-*
      1. :target-after
      2. :target-before
      3. :target-current
    70. :target
    71. :user-invalid
    72. :user-valid
    73. :valid
    74. :visited
    75. :volume-locked
    76. :where()
    77. :xr-overlay
  55. Pseudo-elements
    1. ::-moz-*
      1. ::-moz-color-swatch
      2. ::-moz-focus-inner
      3. ::-moz-list-bullet
      4. ::-moz-list-number
      5. ::-moz-meter-bar
      6. ::-moz-progress-bar
      7. ::-moz-range-progress
      8. ::-moz-range-thumb
      9. ::-moz-range-track
    2. ::-webkit-*
      1. ::-webkit-inner-spin-button
      2. ::-webkit-meter-bar
      3. ::-webkit-meter-even-less-good-value
      4. ::-webkit-meter-inner-element
      5. ::-webkit-meter-optimum-value
      6. ::-webkit-meter-suboptimum-value
      7. ::-webkit-progress-bar
      8. ::-webkit-progress-inner-element
      9. ::-webkit-progress-value
      10. ::-webkit-scrollbar
      11. ::-webkit-search-cancel-button
      12. ::-webkit-search-results-button
      13. ::-webkit-slider-runnable-track
      14. ::-webkit-slider-thumb
    3. ::after (:after)
    4. ::backdrop
    5. ::before (:before)
    6. ::checkmark
    7. ::column
    8. ::cue
    9. ::details-content
    10. ::file-selector-button
    11. ::first-letter (:first-letter)
    12. ::first-line (:first-line)
    13. ::grammar-error
    14. ::highlight()
    15. ::marker
    16. ::part()
    17. ::picker-icon
    18. ::picker()
    19. ::placeholder
    20. ::scroll-*
      1. ::scroll-button()
      2. ::scroll-marker
      3. ::scroll-marker-group
    21. ::search-text
    22. ::selection
    23. ::slotted()
    24. ::spelling-error
    25. ::target-text
    26. ::view-*
      1. ::view-transition
      2. ::view-transition-group()
      3. ::view-transition-image-pair()
      4. ::view-transition-new()
      5. ::view-transition-old()
  56. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @custom-media
    6. @document
    7. missing-glyph
    8. @font-feature-values
    9. @font-palette-values
    10. @function
    11. @import
    12. @keyframes
    13. @layer
    14. @media
    15. @namespace
    16. @page
    17. @position-try
    18. @property
    19. @scope
    20. @starting-style
    21. @supports
    22. @view-transition
  57. Values
    1. !important
    2. fit-content
    3. inherit
    4. initial
    5. max-content
    6. min-content
    7. revert
    8. revert-layer
    9. revert-rule
    10. unset
  58. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <axis>
    6. <baseline-position>
    7. <basic-shape>
    8. <blend-mode>
    9. <box-edge>
    10. <calc-keyword>
    11. <calc-sum>
    12. <color-interpolation-method>
    13. <color>
    14. <content-distribution>
    15. <content-position>
    16. <corner-shape-value>
    17. <custom-ident>
    18. <dashed-function>
    19. <dashed-ident>
    20. <dimension>
    21. <display-box>
    22. <display-inside>
    23. <display-internal>
    24. <display-legacy>
    25. <display-listitem>
    26. <display-outside>
    27. <easing-function>
    28. <filter-function>
    29. <flex>
    30. <frequency-percentage>
    31. <frequency>
    32. <generic-family>
    33. <gradient>
    34. <hex-color>
    35. <hue-interpolation-method>
    36. <hue>
    37. <ident>
    38. <image>
    39. <integer>
    40. <length-percentage>
    41. <length>
    42. <line-style>
    43. <named-color>
    44. <number>
    45. <overflow-position>
    46. <overflow>
    47. <percentage>
    48. <position-area>
    49. <position>
    50. <ratio>
    51. <relative-size>
    52. <resolution>
    53. <rule-list>
    54. <self-position>
    55. <shape>
    56. <string>
    57. <system-color>
    58. <text-edge>
    59. <time-percentage>
    60. <time>
    61. <timeline-range-name>
    62. <transform-function>
    63. <url>
  59. Functions
    1. -moz-image-rect()
    2. abs()
    3. acos()
    4. anchor-size()
    5. anchor()
    6. asin()
    7. atan()
    8. atan2()
    9. attr
    10. blur()
    11. brightness()
    12. calc-size()
    13. calc()
    14. circle()
    15. clamp()
    16. color-mix()
    17. color()
    18. conic-gradient()
    19. contrast-color()
    20. contrast()
    21. cos()
    22. counter()
    23. counters()
    24. cross-fade()
    25. cubic-bezier()
    26. device-cmyk()
    27. drop-shadow()
    28. dynamic-range-limit-mix()
    29. element
    30. ellipse()
    31. env()
    32. exp()
    33. fit-content()
    34. grayscale()
    35. hsl()
    36. hue-rotate()
    37. hwb()
    38. hypot()
    39. if()
    40. image-set()
    41. image()
    42. inset()
    43. invert()
    44. lab()
    45. lch()
    46. light-dark()
    47. linear-gradient()
    48. linear()
    49. log()
    50. matrix()
    51. matrix3d()
    52. max()
    53. min()
    54. minmax()
    55. mod()
    56. oklab()
    57. oklch()
    58. opacity()
    59. paint()
    60. path()
    61. perspective()
    62. polygon()
    63. pow()
    64. progress()
    65. radial-gradient()
    66. random()
    67. ray()
    68. rect()
    69. rem()
    70. repeat()
    71. repeating-conic-gradient()
    72. repeating-linear-gradient()
    73. repeating-radial-gradient()
    74. rgb()
    75. rotate()
    76. rotate3d()
    77. rotateX()
    78. rotateY()
    79. rotateZ()
    80. round()
    81. saturate()
    82. scale()
    83. scale3d()
    84. scaleX()
    85. scaleY()
    86. scaleZ()
    87. sepia()
    88. shape()
    89. sibling-count()
    90. sibling-index()
    91. sign()
    92. sin()
    93. skew()
    94. skewX()
    95. skewY()
    96. sqrt()
    97. steps()
    98. superellipse()
    99. symbols()
    100. tan()
    101. translate()
    102. translate3d()
    103. translateX()
    104. translateY()
    105. translateZ()
    106. type()
    107. url()
    108. var()
    109. xywh()

Your blueprint for a better internet.

MDN Contribute Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.