CSS element() Function

The element() function allows you to use an arbitrary HTML element as an image.

It can be used anywhere an image is accepted in CSS. This includes properties such as background-image, list-style-image, and border-image.

What makes this function particularly powerful is that it creates a live reflection of the referenced element. If the original HTML element changes (for example, if text is typed into an input field, or an animation plays), the background image generated by the element() function updates automatically in real-time.

However, it is important to note that browser support for this function is currently very limited. At the time of writing, it is primarily supported only in Firefox, and it requires the -moz- vendor prefix. Here is an example of how it works (if you are viewing this in Firefox, you will see the first box mirrored in the second box):

/* The element where we apply the background image */
  .reflection-box {
    width: 200px;
    height: 100px;
    border: 2px dashed #ccc;
    
    /* Firefox prefix */
    background-image: -moz-element(#source-box);
    
    /* Standard syntax */
    background-image: element(#source-box);
    
    /* Optional: adjust how the mirrored image fits */
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
  }
</style>

<div id="source-box">
  I am the original HTML element!
</div>

<div class="reflection-box"></div>

<div class="warning-msg">
  <em>Note: The dashed box above will only display a reflection of the orange box if your browser supports the element() function (currently mainly Firefox).</em>
</div>

View Output Full Screen Preview

How to Use It

To use the element() function, you simply pass it the ID selector of the HTML element you want to mirror. For example, if you have a <div id="my-source">, you would reference it in your CSS as element(#my-source).

Because of the current lack of widespread browser support, you must include the -moz-element() prefixed version for it to work in Firefox, alongside the standard unprefixed version for future compatibility.

Potential Use Cases

While limited support prevents it from being used in mainstream production environments right now, the element() function has several exciting potential use cases:

Live Minimaps: Creating a scaled-down, live view of a large webpage or canvas.
Magnifying Glasses: Zooming in on a specific part of an image or UI element.
Reflections and Shadows: Creating dynamic, real-time reflections of complex DOM elements without duplicating HTML.
Custom Backgrounds: Using a hidden, dynamically generated HTML structure as a background pattern.

Official Syntax

The official syntax of the element() function is as follows:

Possible Values

As indicated in the official syntax, the element() function accepts the following value:

id-selector: The CSS ID selector of the HTML element you want to use as an image (e.g., #source-element).

The element() function is still being fleshed out in the CSS specifications, so it's quite likely that its exact functionality and syntax will change in the near future. Check the specification for the latest details.

CSS Specifications

The element() function is defined in CSS Image Values and Replaced Content Module Level 4 (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.