CSS element() Function

CSS element() Function

The CSS element() function creates an image from the rendered appearance of another HTML element on the same page.

The resulting image is live, meaning changes to the referenced element can automatically appear wherever the image is used. The function is defined in CSS Images Module Level 4, but browser support is limited. Firefox provides a prefixed implementation using -moz-element().

Syntax

element(#element-id)

The function accepts an ID selector identifying the HTML element whose appearance should be used as an image.

For example:

background-image: element(#source);

This requests a live image of the element with id="source".

Firefox currently uses the prefixed form:

background-image: -moz-element(#source);

The argument must be an ID selector beginning with #.

The function returns a CSS <image> value rather than an HTML element or a reference to its DOM structure.

Parameters

The element() function accepts one required parameter.

For example:

element(#logo)
element(#preview)
element(#source-card)

Each expression refers to an element with the corresponding HTML id attribute.

The function does not accept a class selector, a list of selectors, or a URL.

For example, the following is invalid:

element(.preview)

Use an ID selector instead:

element(#preview)

How It Works

The element() function uses the rendered appearance of a referenced element as an image.

The process works as follows:

1. An HTML element is assigned an ID.
2. A CSS declaration references that ID using element().
3. The browser renders the referenced element into an image.
4. The generated image is used by the CSS property.
5. Changes to the source element can update the generated image automatically.

For example:

<div id="source-card">Sample Card</div>
<div class="preview-card"></div>

The corresponding CSS could be:

.preview-card {
  background-image: element(#source-card);
}

In a browser implementing the standard function, the second element would display an image of the first element.

The generated image represents the visual result, including applicable styling, rather than creating another interactive copy of the original HTML.

Referencing Elements

The source element is identified using its HTML id attribute.

For example:

<div id="sample-design">
  <h3>Sample Design</h3>
  <p>This element can be used as an image.</p>
</div>

It can then be referenced using:

background-image: element(#sample-design);

Important considerations include:

• The ID must identify an element in the document.
• IDs should be unique within the document.
• The function references the element's rendered appearance.
• The source can contain text, backgrounds, borders, and other visible content.
• The generated image is not an independent HTML element.

The specification also defines additional behavior for elements that are not rendered or that do not generate a normal CSS box. These details may differ from the current Firefox implementation.

Live Images

One of the main features of element() is that the generated image can update when its source changes.

For example, consider a source element with a colored background:

<div id="color-source">Live Preview</div>

Its initial styling might be:

#color-source {
  background-color: #0066cc;
  color: #fff;
}

A preview can reference the source:

.color-preview {
  background-image: element(#color-source);
}

If the source background changes from blue to red, the generated image can reflect that change automatically.

This behavior makes the function useful for live thumbnails, visual previews, and decorative representations of changing content.

The generated image is not interactive. Clicking text or controls shown inside the image does not activate the corresponding elements in the source.

Firefox Syntax

Firefox implements this feature using the vendor-prefixed -moz-element() function.

For example:

.preview {
  background-image: -moz-element(#source);
}

The prefixed implementation is supported in Firefox but is not a cross-browser solution.

For progressive enhancement, a supported fallback can be placed first:

.preview {
  background-color: #e8f1fb;
  background-image: linear-gradient(135deg, #0066cc, #66ccff);
  background-image: -moz-element(#source);
  background-image: element(#source);
}

Firefox can use the prefixed function, while browsers that do not recognize either form retain the gradient.

Placing the standard function last allows browsers to use it if they implement the unprefixed syntax in the future.

For the live examples on this page, the prefixed function is used alongside the standard declaration.

Background Sizing

When an element is used as a background image, standard background properties can control its display.

For example:

.preview {
  background-image: -moz-element(#source);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

The following properties are particularly useful:

For example:

.thumbnail {
  width: 160px;
  height: 100px;
  background-image: -moz-element(#source);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

The generated image is scaled to fill the thumbnail. If its proportions differ from the thumbnail, this may stretch the image.

Use contain when preserving the source image's proportions is more important than filling the entire area.

Example

This example uses a styled HTML element as the background image of another element. Firefox displays a live image of the source, while other browsers display a fallback gradient.

HTML:

<div class="element-demo">
  <div class="element-demo-item">
    <div id="element-demo-source">
      <strong>CSS</strong>
      <span>Live Image</span>
    </div>
    <p>Source Element</p>
  </div>
  <div class="element-demo-item">
    <div class="element-demo-preview"></div>
    <p>Generated Image</p>
  </div>
</div>

CSS:

.element-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 15px 0;
}
.element-demo-item {
  width: 150px;
  text-align: center;
}
.element-demo-item p {
  margin: 8px 0 0;
  font-size: 13px;
}
#element-demo-source {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 100px;
  color: #fff;
  background: linear-gradient(135deg, #0066cc, #6633cc);
  border-radius: 8px;
}
#element-demo-source strong {
  font-size: 25px;
}
#element-demo-source span {
  font-size: 14px;
}
.element-demo-preview {
  width: 150px;
  height: 100px;
  background-color: #e8f1fb;
  background-image: linear-gradient(135deg, #0066cc, #6633cc);
  background-image: -moz-element(#element-demo-source);
  background-image: element(#element-demo-source);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border-radius: 8px;
}

In Firefox, the generated image reproduces the source element, including its text and gradient. In unsupported browsers, the preview shows only the fallback gradient.

The fallback deliberately does not reproduce the source text, making the difference between supported and unsupported rendering visible.

Live Preview Example

This example demonstrates how changing the source element's appearance can update the generated image. Hover over the source or use keyboard focus to change its background color.

HTML:

<div class="element-live-demo">
  <div class="element-live-item">
    <div id="element-live-source" tabindex="0">Hover or Focus</div>
    <span>Source Element</span>
  </div>
  <div class="element-live-item">
    <div class="element-live-preview"></div>
    <span>Live Preview</span>
  </div>
</div>

CSS:

.element-live-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 15px 0;
}
.element-live-item {
  width: 150px;
  text-align: center;
}
.element-live-item span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
#element-live-source {
  display: grid;
  place-items: center;
  width: 150px;
  height: 90px;
  background-color: #0066cc;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
#element-live-source:hover,
#element-live-source:focus-visible {
  background-color: #cc3399;
}
.element-live-preview {
  width: 150px;
  height: 90px;
  background-color: #e8f1fb;
  background-image: linear-gradient(135deg, #0066cc, #66ccff);
  background-image: -moz-element(#element-live-source);
  background-image: element(#element-live-source);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
}

In Firefox, the live preview can update when the source changes from blue to pink. In unsupported browsers, the fallback gradient remains unchanged.

The source element remains a normal HTML element. The preview is a generated image, not a second interactive copy.

Fallbacks

Because element() is not supported across major browsers, always provide an alternative when the generated image is important to the design.

A simple fallback uses a standard gradient:

.preview {
  background-image: linear-gradient(135deg, #0066cc, #6633cc);
  background-image: -moz-element(#source);
  background-image: element(#source);
}

Browsers that do not recognize either element function use the gradient.

For a fallback image:

.preview {
  background-image: url("preview.png");
  background-image: -moz-element(#source);
  background-image: element(#source);
}

This provides a static image in browsers without support.

When the preview must reproduce actual HTML content in every browser, use a separate HTML representation instead of relying on the function.

A CSS feature query can also check for the Firefox implementation:

@supports (background-image: -moz-element(#source)) {
  .preview {
    background-image: -moz-element(#source);
  }
}

The feature query checks CSS support, not whether the referenced element exists.

Accessibility

The element() function creates an image of an element's appearance, not a semantic copy of its HTML structure.

For example, if a referenced element contains a heading, paragraph, or button, the generated image does not create another accessible heading, paragraph, or button.

Keep these guidelines in mind:

• Use the generated image primarily for decorative purposes.
• Do not rely on it to present essential information that is unavailable elsewhere.
• Do not treat controls shown in the image as interactive controls.
• Keep meaningful content in actual HTML elements.
• Provide an appropriate alternative if the image conveys information.

For example, a live preview of a card can be decorative while the original card remains available as accessible HTML.

If users need to interact with the previewed content, provide real HTML controls rather than an image representation.

Common Uses

The element() function is intended for situations where the rendered appearance of one element is reused as an image.

These uses depend on browser support. For cross-browser production interfaces, static images or actual HTML elements are generally more reliable.

Limitations

The element() function has several important limitations.

• It is experimental and is not supported in most major browser engines.
• Firefox requires the -moz-element() prefix.
• The standard syntax accepts an ID selector, not an arbitrary CSS selector.
• The generated image does not preserve the source element's interactivity.
• The generated image does not duplicate the source element's accessible structure.
• Its rendering behavior depends on the source element and the implementation.
• Referencing an element from its own generated image can create a rendering cycle.
• Large or frequently changing source elements may increase rendering work.
• A fallback is needed when the visual result must work across browsers.

For example, this is valid standard syntax:

background-image: element(#preview);

The following is invalid because a class selector is not accepted:

background-image: element(.preview);

The following is also invalid because it does not provide an ID selector:

background-image: element(preview);

Use a unique ID and provide a supported fallback whenever possible.

Browser Support

The CSS element() function has Limited availability and is not Baseline Widely available.

Firefox supports the feature using the vendor-prefixed -moz-element() syntax. Chrome, Edge, and Safari do not currently support the function.

The unprefixed element() syntax is defined in the specification but is not broadly implemented.

For example:

.preview {
  background-image: linear-gradient(135deg, #0066cc, #6633cc);
  background-image: -moz-element(#source);
  background-image: element(#source);
}

The gradient provides a fallback for browsers without support.

For current compatibility information, visit Can I Use? .

Specifications

The element() function is defined in the CSS Images Module Level 4 .

The specification describes how a referenced element can be represented as an image, how the image responds to changes, and how rendering cycles are handled.

Related CSS features include image(), image-set(), cross-fade(), background-image, and background-size.