CSS dynamic-range-limit-mix() Function

CSS dynamic-range-limit-mix() Function

The CSS dynamic-range-limit-mix() function creates a custom brightness limit for High Dynamic Range (HDR) content by combining predefined limits using percentages.

It is used with the dynamic-range-limit property to control how bright HDR content can appear on compatible displays. This is useful when displaying HDR images or videos alongside ordinary Standard Dynamic Range (SDR) content.

Syntax

dynamic-range-limit: dynamic-range-limit-mix(value1 percentage1, value2 percentage2);

The function accepts comma-separated pairs containing a dynamic range limit and its percentage contribution.

For example:

.hdr-image {
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}

This creates a custom limit weighted 70% toward standard and 30% toward no-limit.

Additional examples:

dynamic-range-limit: dynamic-range-limit-mix(standard 50%, constrained 50%);
dynamic-range-limit: dynamic-range-limit-mix(constrained 80%, no-limit 20%);
dynamic-range-limit: dynamic-range-limit-mix(standard 30%, constrained 40%, no-limit 30%);

The function returns a custom maximum luminance limit, not a CSS color value.

Although the latest specification permits one or more pairs, examples using at least two pairs are preferable for compatibility with implementations based on earlier drafts.

Parameters

Each parameter consists of a dynamic range limit followed by a percentage.

Each percentage must be between 0% and 100%, inclusive.

The function does not accept arbitrary numeric brightness values in place of the defined keywords.

How It Works

HDR content can contain highlights brighter than ordinary CSS white. The dynamic-range-limit property controls how much of that additional brightness may be displayed.

The dynamic-range-limit-mix() function combines predefined limits to produce an intermediate maximum luminance.

For example:

.image {
  dynamic-range-limit: dynamic-range-limit-mix(standard 80%, no-limit 20%);
}

The resulting limit is weighted more heavily toward standard brightness than unrestricted HDR brightness.

The browser internally combines the limits using values measured in photographic stops above HDR reference white.

One photographic stop represents a doubling of luminance.

The exact numerical luminance limit is not exposed to scripts for privacy reasons.

The visible effect depends on the HDR content, browser implementation, display capabilities, and operating system settings.

Dynamic Range Keywords

Three predefined keywords can be used directly with dynamic-range-limit or combined using dynamic-range-limit-mix().

The no-limit keyword is the initial value of the dynamic-range-limit property.

It does not mean infinite brightness. Actual output remains limited by the display and rendering environment.

The precise brightness associated with constrained and no-limit is not fixed by the specification.

Percentage Values

Percentages determine the relative influence of each dynamic range limit.

For example:

dynamic-range-limit: dynamic-range-limit-mix(standard 90%, no-limit 10%);

This produces a limit weighted strongly toward standard brightness.

Another example:

dynamic-range-limit: dynamic-range-limit-mix(standard 20%, no-limit 80%);

This produces a limit weighted more heavily toward unrestricted HDR brightness.

When the percentages total 100%, each value contributes its stated proportion.

For example:

dynamic-range-limit-mix(standard 25%, constrained 50%, no-limit 25%)

This combines all three predefined limits.

Percentages describe mixing weights, not direct percentages of screen brightness.

Percentage Normalization

The percentages do not need to add up to 100%.

When their total differs from 100%, the browser normalizes them proportionally.

For example:

dynamic-range-limit-mix(standard 20%, no-limit 30%)

The total is 50%. After normalization, the effective proportions are:

dynamic-range-limit-mix(standard 40%, no-limit 60%)

Both expressions produce the same mixture.

Another example:

dynamic-range-limit-mix(standard 40%, constrained 80%, no-limit 80%)

The total is 200%, so the normalized proportions are:

dynamic-range-limit-mix(standard 20%, constrained 40%, no-limit 40%)

Each individual percentage must remain within the permitted range, even when the combined total exceeds 100%.

A total weight of zero cannot produce a meaningful normalized mixture and is invalid.

Repeated Values

The same keyword can appear more than once in a mixture.

When a keyword is repeated, its contributions are combined.

For example:

dynamic-range-limit-mix(standard 20%, constrained 30%, standard 50%)

The two standard contributions total 70%.

The expression is equivalent to:

dynamic-range-limit-mix(standard 70%, constrained 30%)

This can be useful when constructing more complex mixtures, although combining repeated values manually generally makes the code easier to read.

Nested Functions

The dynamic-range-limit-mix() function can contain another dynamic-range-limit-mix() function.

For example:

dynamic-range-limit: dynamic-range-limit-mix(
  standard 50%,
  dynamic-range-limit-mix(constrained 60%, no-limit 40%) 50%
);

The inner function combines constrained and no-limit.

The outer function then combines that result with standard.

The effective proportions are:

dynamic-range-limit-mix(standard 50%, constrained 30%, no-limit 20%)

The nested structure is useful when an existing mixture needs to be combined with another brightness limit.

Each nested function normalizes its own percentages before contributing to the outer mixture.

HDR and SDR

Standard Dynamic Range (SDR) and High Dynamic Range (HDR) differ in the brightness levels they can represent.

For example:

.thumbnail {
  dynamic-range-limit: standard;
}
.featured-image {
  dynamic-range-limit: dynamic-range-limit-mix(constrained 60%, no-limit 40%);
}

The thumbnail is limited to reference white, while the featured image is allowed some additional HDR brightness.

The function does not convert an SDR image into HDR or create additional image detail.

Example

This example applies different brightness limits to an HDR image.

HTML:

<div class="hdr-limit-demo">
  <div class="hdr-limit-item">
    <img src="hdr-image.jpg" alt="HDR landscape with bright highlights" class="hdr-limit-standard">
    <span>Standard</span>
  </div>
  <div class="hdr-limit-item">
    <img src="hdr-image.jpg" alt="HDR landscape with bright highlights" class="hdr-limit-mixed">
    <span>Custom Mix</span>
  </div>
  <div class="hdr-limit-item">
    <img src="hdr-image.jpg" alt="HDR landscape with bright highlights" class="hdr-limit-unrestricted">
    <span>No Limit</span>
  </div>
</div>

CSS:

.hdr-limit-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.hdr-limit-item {
  flex: 1 1 150px;
  text-align: center;
}
.hdr-limit-item img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.hdr-limit-standard {
  dynamic-range-limit: standard;
}
.hdr-limit-mixed {
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}
.hdr-limit-unrestricted {
  dynamic-range-limit: no-limit;
}

When a genuine HDR image is used on a compatible HDR display, the three settings may produce different highlight brightness levels.

The custom mixture provides an intermediate limit between standard brightness and the unrestricted HDR setting.

Browser Result: A meaningful comparison requires a real HDR image, HDR-capable hardware, and browser support. An ordinary SDR image would not demonstrate the function accurately.

The filename hdr-image.jpg is a placeholder. Replace it with a valid HDR image that the target browser can decode.

Interactive Example

The following example changes the brightness limit when an HDR image is hovered or receives keyboard focus.

HTML:

<img src="hdr-image.jpg" alt="HDR image with bright highlights" class="hdr-interactive" tabindex="0">

CSS:

.hdr-interactive {
  display: block;
  max-width: 100%;
  height: auto;
  dynamic-range-limit: standard;
  transition: dynamic-range-limit 0.5s ease;
}
.hdr-interactive:hover,
.hdr-interactive:focus-visible {
  dynamic-range-limit: dynamic-range-limit-mix(constrained 30%, no-limit 70%);
}
@media (prefers-reduced-motion: reduce) {
  .hdr-interactive {
    transition: none;
  }
}

Initially, the image is limited to standard brightness.

On hover or keyboard focus, the custom mixture permits greater HDR brightness where supported.

The transition can interpolate between dynamic range limits in supporting browsers.

The prefers-reduced-motion rule disables the transition for users who request reduced motion.

This example requires the same HDR content and display conditions as the previous example.

Fallbacks

Because browser support is limited, provide a simpler supported value before using dynamic-range-limit-mix().

For example:

.hdr-image {
  dynamic-range-limit: constrained;
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}

A browser that supports the property and constrained, but not the function, can use the first declaration.

Browsers that do not recognize the property ignore both declarations and display the image using their existing HDR handling.

You can also use a feature query:

.hdr-image {
  dynamic-range-limit: constrained;
}
@supports (dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%)) {
  .hdr-image {
    dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
  }
}

The feature query checks whether the browser recognizes the declaration. It does not guarantee that the display supports HDR or that the image contains HDR data.

Common Uses

The dynamic-range-limit-mix() function is designed for controlling HDR brightness in web interfaces.

The function controls maximum displayed luminance. It does not replace image color management, HDR encoding, or display calibration.

Limitations

The dynamic-range-limit-mix() function has several important limitations.

• Browser support is limited, and the feature remains experimental.
• A compatible HDR display is needed to observe its intended effect.
• The content must contain HDR information for brightness limiting to be meaningful.
• Each percentage must be between 0% and 100%.
• The function combines dynamic range limits, not arbitrary CSS colors.
• Exact output brightness depends on the browser, display, and viewing environment.
• The calculated luminance limit is not exposed to scripts.
• Older implementations may not support every feature of the latest specification.

For example, this is valid:

dynamic-range-limit: dynamic-range-limit-mix(standard 60%, no-limit 40%);

The following is invalid because one percentage exceeds 100%:

dynamic-range-limit: dynamic-range-limit-mix(standard 120%, no-limit 20%);

The following is invalid because bright is not a defined dynamic range limit keyword:

dynamic-range-limit: dynamic-range-limit-mix(standard 50%, bright 50%);

Use standard, constrained, no-limit, or a nested dynamic-range-limit-mix() function.

Browser Support

The CSS dynamic-range-limit-mix() function has Limited availability and is not Baseline Widely available.

It is an experimental CSS feature. Chromium-based browsers introduced support in version 136, but support remains incomplete across major browser engines.

Even when the function is supported, visible results require suitable HDR content and display capabilities.

For example:

.hdr-image {
  dynamic-range-limit: constrained;
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}

For current compatibility information, visit Can I Use? and search for dynamic-range-limit-mix(). You can also consult the MDN browser compatibility information linked below.

Specifications

The dynamic-range-limit-mix() function is defined in the CSS Color HDR Module Level 1 .

The specification defines the function's syntax, percentage normalization, nested mixtures, and maximum luminance calculations.

Related CSS features include the dynamic-range-limit property, HDR media capabilities, and CSS color management.