CSS container queries - CSS | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Web
CSS
Guides
Containment
Container queries
Theme
OS default
Light
Dark
English (US)
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
中文 (简体)
CSS container queries
Container queries enable you to apply styles to an element based on certain attributes of its container:
The container-name.
The container's size.
Styles applied to the container.
The container's scroll-state or that of its scrolling ancestor.
Whether the container is anchor-positioned and has a position-try fallback option applied to it.
Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.
This article provides an introduction to using container queries, specifically focusing on size container queries. Other guides discuss style, scroll-state, and anchored container queries in detail.
In this article
Using container size queries
Naming containment contexts
Name-only container queries
Shorthand container syntax
Container query length units
Fallbacks for container queries
See also
Using container size queries
While container queries apply styles based on the container name or type, container size queries apply styles specifically based on the container's dimensions. To use container size queries, you need to declare a containment context on an element so that the browser knows you might want to query the dimensions of this container later.
To do this, use the container-type property with a value of size, inline-size, or normal.
These values have the following effects:
size
The query will be based on the inline and block dimensions of the container.
Applies layout, style, and size containment to the container.
inline-size
The query will be based on the inline dimensions of the container.
Applies layout, style, and inline-size containment to the element.
normal
The default value. The element is not a query container for any container size queries, but can still be used as a query container for name-only container queries or container style queries.
Consider the following example of a card component for a blog post with a title and some text:
html
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
You can create a containment context using the container-type property:
css
.post {
container-type: inline-size;
}
Next, use the @container at-rule to define a container query.
The query in the following example will apply styles to elements based on the size of the nearest ancestor with a containment context.
Specifically, this query will apply a larger font size for the card title if the container is wider than 700px:
css
/* Default heading styles for the card title */
.card h2 {
font-size: 1em;
}
/* If the container is larger than 700px */
@container (width > 700px) {
.card h2 {
font-size: 2em;
}
}
Using container queries, the card can be reused in multiple areas of a page without needing to know specifically where it will be placed each time.
If the container with the card is narrower than 700px, the font of the card title will be small, and if the card is in a container that's wider than 700px, the font of the card title will be bigger.
For more information on the syntax of container queries, see the @container page.
Naming containment contexts
In the previous section, a container query applied styles based on the nearest ancestor with a containment context.
It's possible to give a containment context a name using the container-name property. Once named, the name can be used in a @container query so as to target a specific container.
The following example creates a containment context with the name sidebar:
css
.post {
container-type: inline-size;
container-name: sidebar;
}
You can then target this containment context using the @container at-rule:
css
@container sidebar (width > 700px) {
.card {
font-size: 2em;
}
}
More information on naming containment contexts is available on the container-name page.
Name-only container queries
As well as using a container-name along with a <container-query>, you can query a container using just its name. These so-called name-only container queries enable selectively applying styles to elements based on whether they have an ancestor with a specific container-name set.
For example, consider the following HTML:
html
<div id="container">
<p>I'm in the container.</p>
<p>I'm also in the container.</p>
</div>
<p>I'm not in the container.</p>
If we assign a name to the container:
css
#container {
container-name: my-container;
}
We can then selectively apply styles only to elements inside that container:
css
@container my-container {
p {
background-color: lime;
font-size: 1.3rem;
width: 50vw;
padding: 0.5rem;
font-family: sans-serif;
}
}
In this example, the specified styles would be applied only to the first and second <p> elements, but not to the third.
Shorthand container syntax
The shorthand way of declaring a containment context is to use the container property:
css
.post {
container: sidebar / inline-size;
}
For more information on this property, see the container reference.
Container query length units
When applying styles to the descendants of a container using size container queries (that is, its container-type is set to size or inline-size), you can use container query length units.
These units specify a length relative to the dimensions of a query container.
Components that use units of length relative to their container are more flexible to use in different containers without having to recalculate concrete length values.
If no eligible container is available for the query, the container query length unit defaults to the small viewport unit for that axis (sv*).
The container query length units are:
cqw: 1% of a query container's width
cqh: 1% of a query container's height
cqi: 1% of a query container's inline size
cqb: 1% of a query container's block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb
The following example uses the cqi unit to set the font size of a heading based on the inline size of the container:
css
@container (width > 700px) {
.card h2 {
font-size: max(1.5em, 1.23em + 2cqi);
}
}
For more information on these units, see the Container query length units reference.
Fallbacks for container queries
For browsers that don't yet support container queries, grid and flex can be used to create a similar effect for the card component used on this page.
The following example uses a grid-template-columns declaration to create a two-column layout for the card component.
css
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
If you want to use a single-column layout for devices with a smaller viewport, you can use a media query to change the grid template:
css
@media (width <= 700px) {
.card {
grid-template-columns: 1fr;
}
}
See also
Media queries
CSS @container at-rule
CSS contain property
CSS container shorthand property
CSS container-name property
CSS content-visibility property
Using container size and style queries
Using container scroll-state queries
Using anchored container queries
Say Hello to CSS Container Queries by Ahmad Shadeed
Container Queries: a Quick Start Guide
Collection of Container Queries articles
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on Jul 8, 2026 by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
CSS
Guides
Modules
Anchor positioning
Animations
Backgrounds and borders
Basic user interface
Borders and box decorations
Box alignment
Box model
Box sizing
Cascading and inheritance
Color adjustment
Colors
Compositing and blending
Conditional rules
Containment
Counter styles
CSSOM view
Custom functions and mixins
Custom highlight API
Custom properties for cascading variables
Display
Easing functions
Environment variables
Filter effects
Flexible box layout
Font loading
Fonts
Fragmentation
Gaps
Generated content
Grid layout
Images
Inline layout
Lists and counters
Logical properties and values
Masking
Media queries
Motion path
Multi-column layout
Namespaces
Nesting
Overflow
Overscroll behavior
Paged media
Positioned layout
Properties and values API
Pseudo-elements
Round display
Ruby layout
Scoping
Scroll anchoring
Scroll snap
Scroll-driven animations
Scrollbars styling
Selectors
Shadow parts
Shapes
Syntax
Table
Text
Text decoration
Transforms
Transitions
Values and units
View transitions
Viewport
WebXR DOM overlays
Will change
Writing modes
Anchor positioning
Using anchor positioning
Handling overflow
Anchored container queries
Animations
Animatable properties
Using animations
Backgrounds and borders
Using multiple backgrounds
Resizing background images
Scaling SVG backgrounds
Borders and box decorations
border-shape nav menu
Box alignment
Overview
In block layout
In flexbox
In grid layout
In multi-column layout
Box model
Introduction
Margin collapsing
Box sizing
Aspect ratios
Cascade
Introduction
Inheritance
Specificity
Property value processing
Shorthand properties
Cascading variables
Using custom properties
Colors
Applying color
Color values
Using relative colors
Using color wisely
Accessibility: Colors and luminance
Accessibility: Color contrast
Columns
Basic concepts
Styling columns
Using multi-column layouts
Spanning and balancing columns
Handling overflow
Handling content breaks
Conditional rules
Using feature queries
Using container scroll-state queries
Containment
Container queries
Using containment
Using container size and style queries
Counters
Using counters
CSSOM view
Coordinate systems (API)
Viewport concepts
Custom functions and mixins
Using CSS custom functions
Display
Block and inline layout
Flow layout
Flow layout and overflow
Flow layout and writing modes
In flow and out of flow
Layout and the containing block
Formatting contexts
Block formatting context
Inline formatting context
Using multi-keyword syntax
Visual formatting model
Environment variables
Using environment variables
Filter effects
Using filter effects
Flexbox
Basic concepts
Flexbox and other layouts
Aligning flex items
Ordering flex items
Controlling flex item ratios
Wrapping flex items
Typical use cases
Fonts
OpenType features
Variable fonts
WOFF
Grid
Basic concepts
Grid and other layouts
Using line-based placement
Grid template areas
Using named grid lines
Using auto-placement
Aligning items
Logical values and writing modes
Grid layout and accessibility
Common grid layouts
Subgrid
Masonry layout
Images
Using gradients
Using object-view-box
Styling replaced elements
Implementing image sprites
Lists
Indenting lists
Logical properties
Basic concepts
For floating and positioning
For margins, borders, and padding
For sizing
Masking
Introduction
Clipping
Multiple masks
Mask properties
Media queries
Using media queries
For accessibility
Testing
Printing
Nesting
Nesting at-rules
Nesting and specificity
Using nesting
Overflow
Creating carousels
Positioning
Stacking context
Stacking floating elements
Understanding z-index
Using z-index
Stacking without z-index
Properties and Values API
CSS Houdini
Registering custom properties in CSS
Scroll anchoring
Overview
Scroll-driven animations
Scroll-driven animation timelines
Understanding timeline insets
Understanding timeline range names
Scroll snap
Basic concepts
Using scroll snap events
Selectors
Selectors and combinators
Selector structure
Privacy and :visited
Using :target
Shapes
Overview
Box-value shapes
Image-based shapes
Using shape-outside
Shape generator
Syntax
Introduction
Comments
At-rules
Error handling
Text
Wrapping and breaking text
Handling whitespace
Text decoration
Text shadows
Transforms
Using transforms
Transitions
Using transitions
Values and units
Value definition syntax
Numeric data types
Textual data types
Using math functions
Using typed arithmetic
Writing modes
Introduction
Vertical form controls
How to
Layout cookbook
Media objects
Column layouts
Center an element
Sticky footers
Split navigation
Breadcrumb navigation
List group with badges
Pagination
Card
Grid wrapper
Contribute a recipe
Cookbook template
Tools
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
Reference
Properties
-moz-*
-moz-float-edge
-moz-force-broken-image-icon
-moz-orient
-moz-user-focus
-moz-user-input
-webkit-*
-webkit-border-before
-webkit-box-reflect
-webkit-mask-box-image
-webkit-mask-composite
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-tap-highlight-color
-webkit-text-fill-color
-webkit-text-security
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
Custom properties (--*): CSS variables
accent-color
align-*
align-content
align-items
align-self
alignment-baseline
all
anchor-name
anchor-scope
animation-*
animation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-range
animation-range-end
animation-range-start
animation-timeline
animation-timing-function
animation
appearance
aspect-ratio
backdrop-filter
backface-visibility
background-*
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-repeat-x
background-repeat-y
background-size
background
baseline-shift
baseline-source
block-size
border-*
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-shape
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
border
bottom
box-*
box-align
box-decoration-break
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow
box-sizing
break-*
break-after
break-before
break-inside
caption-side
caret-*
caret-animation
caret-color
caret-shape
caret
clear
clip-path
clip-rule
clip
color-*
color-interpolation
color-interpolation-filters
color-scheme
color
column-*
column-count
column-fill
column-gap
column-height
column-rule
column-rule-color
column-rule-style
column-rule-visibility-items
column-rule-width
column-span
column-width
column-wrap
columns
contain-*
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
contain
container-name
container-type
container
content-visibility
content
corner-*
corner-block-end-shape
corner-block-start-shape
corner-bottom-left-shape
corner-bottom-right-shape
corner-bottom-shape
corner-end-end-shape
corner-end-start-shape
corner-inline-end-shape
corner-inline-start-shape
corner-left-shape
corner-right-shape
corner-shape
corner-start-end-shape
corner-start-start-shape
corner-top-left-shape
corner-top-right-shape
corner-top-shape
counter-*
counter-increment
counter-reset
counter-set
cursor
cx
cy
d
direction
display
dominant-baseline
dynamic-range-limit
empty-cells
field-sizing
fill-opacity
fill-rule
fill
filter
flex-*
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
flex
float
flood-color
flood-opacity
font-*
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-palette
font-size
font-size-adjust
font-smooth
font-stretch
font-style
font-synthesis
font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
font-width
font
forced-color-adjust
frame-sizing
gap
grid-*
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
grid
hanging-punctuation
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-*
image-orientation
image-rendering
image-resolution
initial-letter
inline-size
inset-*
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
inset
interactivity
interest-*
interest-delay
interest-delay-end
interest-delay-start
interpolate-size
isolation
justify-*
justify-content
justify-items
justify-self
left
letter-spacing
lighting-color
line-*
line-break
line-clamp
line-height
line-height-step
list-*
list-style
list-style-image
list-style-position
list-style-type
margin-*
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
margin-trim
margin
marker-*
marker-end
marker-mid
marker-start
marker
mask-*
mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
mask
math-*
math-depth
math-shift
math-style
max-*
max-block-size
max-height
max-inline-size
max-width
min-*
min-block-size
min-height
min-inline-size
min-width
mix-blend-mode
object-*
object-fit
object-position
object-view-box
offset-*
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
offset
opacity
order
orphans
outline-*
outline-color
outline-offset
outline-style
outline-width
outline
overflow-*
overflow-anchor
overflow-block
overflow-clip-margin
overflow-inline
overflow-wrap
overflow-x
overflow-y
overflow
overlay
overscroll-*
overscroll-behavior
overscroll-behavior-block
overscroll-behavior-inline
overscroll-behavior-x
overscroll-behavior-y
padding-*
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
padding
page-*
page-break-after
page-break-before
page-break-inside
page
paint-order
perspective-origin
perspective
place-*
place-content
place-items
place-self
pointer-events
position-*
position-anchor
position-area
position-try
position-try-fallbacks
position-try-order
position-visibility
position
print-color-adjust
quotes
r
reading-flow
reading-order
resize
right
rotate
row-*
row-gap
row-rule
row-rule-color
row-rule-style
row-rule-visibility-items
row-rule-width
ruby-*
ruby-align
ruby-overhang
ruby-position
rule-visibility-items
rx
ry
scale
scroll-*
scroll-behavior
scroll-initial-target
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-marker-group
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
scroll-target-group
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scrollbar-*
scrollbar-color
scrollbar-gutter
scrollbar-width
shape-*
shape-image-threshold
shape-margin
shape-outside
shape-rendering
speak-as
stop-color
stop-opacity
stroke-*
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
stroke
tab-size
table-layout
text-*
text-align
text-align-last
text-anchor
text-autospace
text-box
text-box-edge
text-box-trim
text-combine-upright
text-decoration
text-decoration-color
text-decoration-inset
text-decoration-line
text-decoration-skip
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-rendering
text-shadow
text-size-adjust
text-spacing-trim
text-transform
text-underline-offset
text-underline-position
text-wrap
text-wrap-mode
text-wrap-style
timeline-scope
top
touch-action
transform-*
transform-box
transform-origin
transform-style
transform
transition-*
transition-behavior
transition-delay
transition-duration
transition-property
transition-timing-function
transition
translate
unicode-bidi
user-modify
user-select
vector-effect
vertical-align
view-*
view-timeline
view-timeline-axis
view-timeline-inset
view-timeline-name
view-transition-class
view-transition-name
view-transition-scope
visibility
white-space
white-space-collapse
widows
width
will-change
word-break
word-spacing
writing-mode
x
y
z-index
zoom
Selectors
& nesting selector
Attribute selectors
Class selectors
ID selectors
Keyframe selectors
Namespace separator
Selector list
Type selectors
Universal selectors
Combinators
Child combinator
Column combinator
Descendant combinator
Next-sibling combinator
Subsequent-sibling combinator
Pseudo-classes
:-moz-*
:-moz-broken
:-moz-drag-over
:-moz-first-node
:-moz-handler-blocked
:-moz-handler-crashed
:-moz-handler-disabled
:-moz-last-node
:-moz-loading
:-moz-locale-dir(ltr)
:-moz-locale-dir(rtl)
:-moz-only-whitespace
:-moz-submit-invalid
:-moz-suppressed
:-moz-user-disabled
:-moz-window-inactive
:active-view-transition
:active-view-transition-type()
:active
:any-link
:autofill
:blank
:buffering
:checked
:current
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:first
:focus-visible
:focus-within
:focus
:fullscreen
:future
:has-slotted
:has()
:heading
:heading()
:host-context()
:host
:host()
:hover
:in-range
:indeterminate
:interest-source
:interest-target
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:modal
:muted
:not()
:nth-*
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:open
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:popover-open
:read-only
:read-write
:required
:right
:root
:scope
:seeking
:stalled
:state()
:target-*
:target-after
:target-before
:target-current
:target
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:xr-overlay
Pseudo-elements
::-moz-*
::-moz-color-swatch
::-moz-focus-inner
::-moz-list-bullet
::-moz-list-number
::-moz-meter-bar
::-moz-progress-bar
::-moz-range-progress
::-moz-range-thumb
::-moz-range-track
::-webkit-*
::-webkit-inner-spin-button
::-webkit-meter-bar
::-webkit-meter-even-less-good-value
::-webkit-meter-inner-element
::-webkit-meter-optimum-value
::-webkit-meter-suboptimum-value
::-webkit-progress-bar
::-webkit-progress-inner-element
::-webkit-progress-value
::-webkit-scrollbar
::-webkit-search-cancel-button
::-webkit-search-results-button
::-webkit-slider-runnable-track
::-webkit-slider-thumb
::after
::backdrop
::before
::checkmark
::column
::cue
::details-content
::file-selector-button
::first-letter
::first-line
::grammar-error
::highlight()
::marker
::part()
::picker-icon
::picker()
::placeholder
::scroll-*
::scroll-button()
::scroll-marker
::scroll-marker-group
::search-text
::selection
::slotted()
::spelling-error
::target-text
::view-*
::view-transition
::view-transition-group()
::view-transition-image-pair()
::view-transition-new()
::view-transition-old()
At-rules
@charset
@color-profile
@container
@counter-style
@custom-media
@document
@font-face
@font-feature-values
@font-palette-values
@function
@import
@keyframes
@layer
@media
@namespace
@page
@position-try
@property
@scope
@starting-style
@supports
@view-transition
Values
!important
fit-content
inherit
initial
max-content
min-content
revert
revert-layer
revert-rule
unset
Types
<absolute-size>
<alpha-value>
<angle-percentage>
<angle>
<axis>
<baseline-position>
<basic-shape>
<blend-mode>
<box-edge>
<calc-keyword>
<calc-sum>
<color-interpolation-method>
<color>
<content-distribution>
<content-position>
<corner-shape-value>
<custom-ident>
<dashed-function>
<dashed-ident>
<dimension>
<display-box>
<display-inside>
<display-internal>
<display-legacy>
<display-listitem>
<display-outside>
<easing-function>
<filter-function>
<flex>
<frequency-percentage>
<frequency>
<generic-family>
<gradient>
<hex-color>
<hue-interpolation-method>
<hue>
<ident>
<image>
<integer>
<length-percentage>
<length>
<line-style>
<named-color>
<number>
<overflow-position>
<overflow>
<percentage>
<position-area>
<position>
<ratio>
<relative-size>
<resolution>
<rule-list>
<self-position>
<shape>
<string>
<system-color>
<text-edge>
<time-percentage>
<time>
<timeline-range-name>
<transform-function>
<url>
Functions
-moz-image-rect()
abs()
acos()
alpha()
anchor-size()
anchor()
asin()
atan()
atan2()
attr()
blur()
brightness()
calc-size()
calc()
circle()
clamp()
color-mix()
color()
conic-gradient()
contrast-color()
contrast()
cos()
counter()
counters()
cross-fade()
cubic-bezier()
device-cmyk()
drop-shadow()
dynamic-range-limit-mix()
element()
ellipse()
env()
exp()
fit-content()
grayscale()
hsl()
hue-rotate()
hwb()
hypot()
if()
image-set()
image()
inset()
invert()
lab()
lch()
light-dark()
linear-gradient()
linear()
log()
matrix()
matrix3d()
max()
min()
minmax()
mod()
oklab()
oklch()
opacity()
paint()
path()
perspective()
polygon()
pow()
progress()
radial-gradient()
random()
ray()
rect()
rem()
repeat()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
round()
saturate()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
sepia()
shape()
sibling-count()
sibling-index()
sign()
sin()
skew()
skewX()
skewY()
sqrt()
steps()
superellipse()
symbols()
tan()
translate()
translate3d()
translateX()
translateY()
translateZ()
type()
url()
var()
xywh()
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.