CSS-TRICKS

<p>The proposed ShadowRealm API introduces a new kind of realm specifically designed for isolation, and <em>only</em> that.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/">Soon We Can Finally Banish JavaScript to the ShadowRealm</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>It&#8217;s gonna be tough to keep it together on this one. Okay. I got this. I am a <em>professional technical writer</em>. Straight face; all-business. Ahem: if you&#8217;ve been following the ongoing work at TC39 (the standards body responsible for maintaining and developing the standards that inform JavaScript) you may have encountered some of <a href="https://github.com/tc39/proposal-shadowrealm" rel="noopener">their recent work on ShadowRealms</a>— <em>snrk</em>. Sorry! Sorry, I&#8217;m good! Just, whew ­— what a name, &#8220;ShadowRealms.&#8221; Okay, hang on, let me start at the beginning. Maybe that will help.</p>



<p>It&#8217;s exceptionally likely you&#8217;ve seen JavaScript described as &#8220;single-threaded&#8221; at some point — that&#8217;s usually pretty high up on the list of JavaScript fundamentals, alongside &#8220;case sensitive,&#8221; &#8220;whitespace insensitive,&#8221; and &#8220;bad at math.&#8221; That is <em>correct</em>, in the strict &#8220;computer science&#8221; sense, but it still gets my hackles up a little whenever I see it.</p>



<p>I mean, accurate in that JavaScript isn&#8217;t multi-threaded, for sure. A script is always executed in a very linear way — top to bottom, left to right, one execution context after another, winding up the call stack and then back down again. It&#8217;s just that you eventually come to learn about something like <a href="https://css-tricks.com/off-the-main-thread/">Web Workers</a>, which — not to put too fine a point on this — allow you to execute JavaScript code in <em>another thread</em>. That&#8217;s where I think &#8220;JavaScript is single-threaded&#8221; becomes a less helpful framing, because even though JavaScript isn&#8217;t a multi-threaded <em>language</em>, a JavaScript <em>application</em> can make use of multiple threads.</p>



<p>It&#8217;s a better framing — and every bit as technically accurate — to say that a JavaScript <strong>realm</strong> is single-threaded. A realm refers to the environment where code is executed: a browser tab is a realm, and within that realm is the single thread where JavaScript is executed — the <strong>main thread</strong>. A Web Worker is a realm with a <strong>worker thread</strong>. JavaScript running in a cross-origin <code>iframe</code> is running in <em>that</em> <code>iframe</code> realm’s main thread. We can&#8217;t, for example, offload the execution of a single function to another thread — JavaScript is <em>itself</em> single-threaded, as a language. But a JavaScript application can span multiple realms and make use of multiple execution threads, and each of those realms can communicate with other realms in specific ways.</p>



<span id="more-393604"></span>



<p>Each JavaScript realm has its own global environment. In a browser tab, the global object is the <code>Window</code> interface. The same is true in a non-same-origin <code>iframe</code> within that browser tab — the global object is the <code>Window</code> “owned&#8221; by that <code>iframe</code>:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;html>
  &lt;head>&lt;/head>
  &lt;body>
    &lt;iframe id="theIframe">&lt;/iframe>
  &lt;/body>

  &lt;script>
  ( () => {
    console.log( window.globalThis );
    // Result: Window {}

    console.log( theIframe.contentWindow.globalThis );
    // Result: Window {}
  })();

  &lt;/script>
&lt;/html></code></pre>



<p>These aren&#8217;t the <em>same</em> global object:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;html>
  &lt;head>&lt;/head>
  &lt;body>
    &lt;iframe id="theIframe">&lt;/iframe>
  &lt;/body>

  &lt;script>
  ( () => {
    console.log( window.globalThis === theIframe.contentWindow.globalThis );
    // Result: false
  })();
  &lt;/script>
&lt;/html></code></pre>



<p>The outer page and the inner <code>iframe</code> are two separate realms, both single-threaded, each with their own global objects and their own intrinsic objects:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;html>
  &lt;head>&lt;/head>
  &lt;body>
    &lt;iframe id="theIframe">&lt;/iframe>
  &lt;/body>

  &lt;script>
    (() => {
      console.log( window.Array );
      /* Result (expanded):
        function Array()
        from: function from()
        fromAsync: function fromAsync()
        isArray: function isArray()
        length: 1
        name: "Array"
        of: function of()
        prototype: Array []
        Symbol(Symbol.species): undefined
        &lt;prototype>: function ()
      */

      console.log( theIframe.contentWindow.Array );
      /* Result (expanded):
        function Array()
        from: function from()
        fromAsync: function fromAsync()
        isArray: function isArray()
        length: 1
        name: "Array"
        of: function of()
        prototype: Array []
        Symbol(Symbol.species): undefined
        &lt;prototype>: function ()
      */

      console.log( window.Array === theIframe.contentWindow.Array );
      // Result: false

    })();
  &lt;/script>
&lt;/html></code></pre>



<p>So, as you might expect, any global properties defined in the context of one realm will be unavailable to another:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;html>
  &lt;head>&lt;/head>
  &lt;body>
    &lt;iframe id="theIframe">&lt;/iframe>
  &lt;/body>

  &lt;script>
  function globalFunction() {};

  console.log( window.globalFunction );
  // Result: function globalFunction()

  console.log( theIframe.contentWindow.globalFunction );
  // Result: undefined
  &lt;/script>
&lt;/html></code></pre>



<p>&#8220;Unavailable&#8221; — or, depending on how you look at it, unable to <em>interfere</em> with the the global object of another realm. If you&#8217;ve been JavaScripting for a while, you know that no matter how meticulous we are about managing scope, the global environment can get pretty messy despite our best efforts. Some of that is on us, sure — a stray variable binding happens to the best of us — but a lot of that clutter is a result of the early design decisions that went into the language itself, like the function declaration in the previous example. When you consider the staggering amount of JavaScript we don&#8217;t control that can get piled onto the average project — from frameworks to third-party helper libraries to polyfills to user analytics to advertisements — there&#8217;s potential for collisions, to say the least.</p>



<p>Given the global scope pollution that has haunted the language since time immemorial (the 90s), it isn&#8217;t hard to imagine the use cases for offloading code to a realm that can act as a sandbox for the execution of JavaScript we don&#8217;t want to impact, or be impacted by, whatever is already cluttering up the global scope. We might want to run part of our test suite in a &#8220;clean room&#8221; where <em>performing</em> the testing can&#8217;t potentially interfere with the results of your testing and mock data can&#8217;t run afoul of the real thing, or a place to run code we want quarantined away from the realm that contains our JavaScript application itself to prevent third-party libraries that don&#8217;t <em>need</em> access to the global environment from cluttering it up, to no benefit.</p>



<p>We can&#8217;t do that with realms, as they stand right now — remember, JavaScript is single-threaded in that each <em>realm</em> is single-threaded, and communication between those threads is limited. As undeniable as the use case is, we can&#8217;t repurpose an alternate realm to execute code on its single thread of execution, then weave the results of that execution back into the main thread of our primary realm. That&#8217;s multi-threaded execution by definition, and not just contrary to the fundamental nature of JavaScript, but, well, let me put it this way: JavaScript allowing multiple threads of execution at the same time <em>mean would problems us new for</em>.</p>



<p>To offload code in this way would require a new <em>kind</em> of realm — one that has its own global and intrinsic objects, but <em>not</em> it&#8217;s own thread — a realm where code offloaded to it will still be executed on the main thread of the realm that &#8220;owns&#8221; that script. A dark reflection of our own realms; a realm the light can never touch, where only fleeting, ephemeral shadows of our banished code can dwell! Imagine a distant peal of thunder, here; maybe also imagine that I&#8217;m wearing a cape, maybe I hurl a wine glass to the floor. Y&#8217;know, have fun with it. How could you not? I mean, they&#8217;re called:</p>



<h3 class="wp-block-heading" id="shadowrealms">ShadowRealms</h3>



<p>The proposed <a href="https://github.com/tc39/proposal-shadowrealm" rel="noopener">ShadowRealm API</a> introduces a new kind of realm specifically designed for <em>isolation</em>, and only that. A ShadowRealm does <em>not</em> have an execution context of its own — code offloaded to a ShadowRealm will exist in a pseudo-realm with its own global and built-in objects. That code continues to run on the same thread as the code where the ShadowRealm is created; we&#8217;re not forced to communicate and share resources back and forth between two separate threads in limited ways. In short, a script is executed the way it would if limited to a single realm, but quarantined away from that outer realm&#8217;s intrinsic objects, APIs, global object, and anything our script has <em>done</em> to that global object.</p>



<p>That sounds complicated, but the proposed API would be exceptionally simple in practice:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Create a ShadowRealm:
const shadow = new ShadowRealm();

function globalFunction() {};

console.log( globalthis.globalFunction );
// Result: function globalFunction()

// Evaluate `globalThis.globalFunction` inside the ShadowRealm:
console.log( shadow.evaluate( 'globalThis.globalFunction' ) );
// Result: undefined</code></pre>



<p class="is-style-explanation"><strong>Note:</strong> Keep in mind that this code is still theoretical — it doesn&#8217;t exist in the ES-262 standard or browsers just yet.</p>



<p><code>globalFunction</code> is defined on the outer realm&#8217;s global object just like we saw earlier, but it isn&#8217;t defined on the global object inside of our newly-created ShadowRealm — that ShadowRealm&#8217;s global object remains pristine, no matter what we do <em>outside</em> of it. The inverse is true, naturally:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Create a ShadowRealm:
const shadow = new ShadowRealm();

// Declare a global function inside the ShadowRealm:
shadow.evaluate( 'function globalFunction() {};' );

// It doesn't exist in the outer realm's global object:
console.log( globalthis.globalFunction );
// Result: undefined

// But when we evaluate `globalThis.globalFunction` inside the ShadowRealm:
console.log( shadow.evaluate( 'globalThis.globalFunction' ) );
// Result: function globalFunction()</code></pre>



<p>We&#8217;ve declared that function inside the ShadowRealm, and we can call it by way of the variable that references that ShadowRealm object. That function remains quarantined away from the outer global object and that of any other ShadowRealm:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Create a ShadowRealm:
const firstShadow = new ShadowRealm();
const secondShadow = new ShadowRealm();

// Declare a global function inside the ShadowRealm referenced by `secondShadow`:
secondShadow.evaluate( 'function globalFunction() {};' );

// It doesn't exist in the outer realm's global object:
console.log( globalthis.globalFunction );
// Result: undefined

// It doesn't exist in the global object of the ShadowRealm referencd by `firstShadow`:
console.log( firstShadow.evaluate( 'globalThis.globalFunction' ) );
// Result: undefined

// It only exists within the ShadowRealm referenced by `secondShadow`:
console.log( secondShadow.evaluate( 'globalThis.globalFunction' ) );
// Result: function globalFunction()</code></pre>



<p>“Quarantined” to an extent, that is. ShadowRealms don’t provide a true security boundary in that code running inside a ShadowRealm can still make inferences about code running in other realms. They <em>can</em> be thought of as an <em>integrity</em> boundary, in that code running inside a ShadowRealm can’t directly interfere with another realm — unless we let it, of course. Even though code shunted off into a ShadowRealm can&#8217;t interfere with the objects outside of it, we&#8217;re still free to use the results of those operations the way we would use the results of that same operation in the host realm:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Create a ShadowRealm:
const shadow = new ShadowRealm();

// Create a binding that calls a function inside the ShadowRealm:
const shadowFunction = shadow.evaluate( '( value ) => globalThis.someValue = value );

// ...and call our wrapped function using that binding:
shadowFunction( "Hello from the ShadowRealm!" );

// Executing this function in the host realm doesn't _change_ anything here, of course:
console.log( globalThis.someValue );
// Result: undefined

// But we can grab the result from the ShadowRealm:
const shadowValue = shadow.evaluate( 'globalThis.someValue' );

// And use it here in the host realm:
console.log( shadowValue );
// Result: Hello from the ShadowRealm!</code></pre>



<p>Infinite disposable cleanrooms! Pocket dimensions where we can execute whatever code we want, without fear of that code interfering with the scope of any other ShadowRealm <em>or</em> the outer realm — the &#8220;light realm,&#8221; if you will.</p>



<p>Now, some of you — especially those of you who&#8217;ve been doing this since the early days of JavaScript — have probably been recoiling at these examples. You&#8217;d be forgiven for thinking that ShadowRealm API is just goth <code>eval</code>, and you wouldn’t be strictly wrong: apart from running in the context of a ShadowRealm, what you’ve seen so far here are basically indirect calls to <code>eval</code> — even subject to the same <code>unsafe-eval</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy" rel="noopener">Content Security Policy</a> rule.</p>



<p>Fear not for your workflows, however: while these are <em>illustrative</em> examples, this isn&#8217;t the only way to put ShadowRealms to use. The proposal includes an <code>importValue</code> method on the ShadowRealm object’s prototype, which allows you to dynamically import modules, then capture and work with exported values and functions:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// spookycode.js
export function greeting() {
 return "Hello from the ShadowRealm!";
}</code></pre>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">async function shadowGreeter() {
  // I INVOKE THE DARK POWER OF THE SHADOWREALM- ahem. Sorry.
  const shadow = new ShadowRealm();

  /* 
  * `importValue` returns a promise that resolves with the value of the function 
  * specified in the second argument: 
  */
  const shadowGreet = await shadow.importValue( "./spookycode.js", "greeting" );

  // Call our wrapped function, annnnd...
  shadowGreet();
}

shadowGreeter();
// Result: Hello from the ShadowRealm!</code></pre>



<h3 class="wp-block-heading" id="the-shadow-hasn-t-fallen-yet">The shadow hasn’t fallen yet</h3>



<p>I&#8217;m pleased to say that you&#8217;ve now seen the <em>entirety</em> of the proposed ShadowRealms API, at this point. The proposal includes only those the two methods you&#8217;ve seen here — <code>evaluate</code> and <code>importValue</code> — both means of <del>banishing</del> evaluating code in the context of a ShadowRealm instance while still <em>executing</em> that code in the context of the host realm&#8217;s thread.</p>



<p>Again, though: none of this can be put to use just yet. The proposed specification is currently at <a href="https://tc39.es/process-document/" rel="noopener">Stage 2.7</a> — &#8220;approved in principle and undergoing validation,&#8221; meaning that it&#8217;s only likely to change as a result of feedback from tests and trial implementations in browsers, if at all. You&#8217;re playing a move ahead by reading this. When this proposal reaches Stage 3 and we start to see implementations in browsers, you&#8217;ll be ready to try it out for yourself. Nay, more than ready — at such time as the awesome power of the ShadowRealm is loosed upon the web, you shall stand at the ready to command its dark and fearsome majjycks! <em>The very realm upon which our code stands shall quake, as</em>— okay, okay, sorry. Look, I can&#8217;t help it! I mean, &#8220;<em>ShadowRealm</em>,&#8221; for cryin&#8217; out loud.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/">Soon We Can Finally Banish JavaScript to the ShadowRealm</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


It’s gonna be tough to keep it together on this one. Okay. I got this. I am a professional technical writer. Straight face; all-business. Ahem: if you’ve been following the ongoing work at TC39 (the standards body responsible for maintaining and developing the standards that inform JavaScript) you may have encountered some of their recent work on ShadowRealms— snrk. Sorry! Sorry, I’m good! Just, whew ­— what a name, “ShadowRealms.” Okay, hang on, let me start at the beginning. Maybe that will help.
It’s exceptionally likely you’ve seen JavaScript described as “single-threaded” at some point — that’s usually pretty high up on the list of JavaScript fundamentals, alongside “case sensitive,” “whitespace insensitive,” and “bad at math.” That is correct, in the strict “computer science” sense, but it still gets my hackles up a little whenever I see it.
I mean, accurate in that JavaScript isn’t multi-threaded, for sure. A script is always executed in a very linear way — top to bottom, left to right, one execution context after another, winding up the call stack and then back down again. It’s just that you eventually come to learn about something like Web Workers, which — not to put too fine a point on this — allow you to execute JavaScript code in another thread. That’s where I think “JavaScript is single-threaded” becomes a less helpful framing, because even though JavaScript isn’t a multi-threaded language, a JavaScript application can make use of multiple threads.
It’s a better framing — and every bit as technically accurate — to say that a JavaScript realm is single-threaded. A realm refers to the environment where code is executed: a browser tab is a realm, and within that realm is the single thread where JavaScript is executed — the main thread. A Web Worker is a realm with a worker thread. JavaScript running in a cross-origin iframe is running in that iframe realm’s main thread. We can’t, for example, offload the execution of a single function to another thread — JavaScript is itself single-threaded, as a language. But a JavaScript application can span multiple realms and make use of multiple execution threads, and each of those realms can communicate with other realms in specific ways.




Each JavaScript realm has its own global environment. In a browser tab, the global object is the Window interface. The same is true in a non-same-origin iframe within that browser tab — the global object is the Window “owned” by that iframe:
<html>
  <head></head>
  <body>
    <iframe id="theIframe"></iframe>
  </body>

  <script>
  ( () => {
    console.log( window.globalThis );
    // Result: Window {}

    console.log( theIframe.contentWindow.globalThis );
    // Result: Window {}
  })();

  </script>
</html>
These aren’t the same global object:
<html>
  <head></head>
  <body>
    <iframe id="theIframe"></iframe>
  </body>

  <script>
  ( () => {
    console.log( window.globalThis === theIframe.contentWindow.globalThis );
    // Result: false
  })();
  </script>
</html>
The outer page and the inner iframe are two separate realms, both single-threaded, each with their own global objects and their own intrinsic objects:
<html>
  <head></head>
  <body>
    <iframe id="theIframe"></iframe>
  </body>

  <script>
    (() => {
      console.log( window.Array );
      /* Result (expanded):
        function Array()
        from: function from()
        fromAsync: function fromAsync()
        isArray: function isArray()
        length: 1
        name: "Array"
        of: function of()
        prototype: Array []
        Symbol(Symbol.species): undefined
        <prototype>: function ()
      */

      console.log( theIframe.contentWindow.Array );
      /* Result (expanded):
        function Array()
        from: function from()
        fromAsync: function fromAsync()
        isArray: function isArray()
        length: 1
        name: "Array"
        of: function of()
        prototype: Array []
        Symbol(Symbol.species): undefined
        <prototype>: function ()
      */

      console.log( window.Array === theIframe.contentWindow.Array );
      // Result: false

    })();
  </script>
</html>
So, as you might expect, any global properties defined in the context of one realm will be unavailable to another:
<html>
  <head></head>
  <body>
    <iframe id="theIframe"></iframe>
  </body>

  <script>
  function globalFunction() {};

  console.log( window.globalFunction );
  // Result: function globalFunction()

  console.log( theIframe.contentWindow.globalFunction );
  // Result: undefined
  </script>
</html>
“Unavailable” — or, depending on how you look at it, unable to interfere with the the global object of another realm. If you’ve been JavaScripting for a while, you know that no matter how meticulous we are about managing scope, the global environment can get pretty messy despite our best efforts. Some of that is on us, sure — a stray variable binding happens to the best of us — but a lot of that clutter is a result of the early design decisions that went into the language itself, like the function declaration in the previous example. When you consider the staggering amount of JavaScript we don’t control that can get piled onto the average project — from frameworks to third-party helper libraries to polyfills to user analytics to advertisements — there’s potential for collisions, to say the least.
Given the global scope pollution that has haunted the language since time immemorial (the 90s), it isn’t hard to imagine the use cases for offloading code to a realm that can act as a sandbox for the execution of JavaScript we don’t want to impact, or be impacted by, whatever is already cluttering up the global scope. We might want to run part of our test suite in a “clean room” where performing the testing can’t potentially interfere with the results of your testing and mock data can’t run afoul of the real thing, or a place to run code we want quarantined away from the realm that contains our JavaScript application itself to prevent third-party libraries that don’t need access to the global environment from cluttering it up, to no benefit.
We can’t do that with realms, as they stand right now — remember, JavaScript is single-threaded in that each realm is single-threaded, and communication between those threads is limited. As undeniable as the use case is, we can’t repurpose an alternate realm to execute code on its single thread of execution, then weave the results of that execution back into the main thread of our primary realm. That’s multi-threaded execution by definition, and not just contrary to the fundamental nature of JavaScript, but, well, let me put it this way: JavaScript allowing multiple threads of execution at the same time mean would problems us new for.
To offload code in this way would require a new kind of realm — one that has its own global and intrinsic objects, but not it’s own thread — a realm where code offloaded to it will still be executed on the main thread of the realm that “owns” that script. A dark reflection of our own realms; a realm the light can never touch, where only fleeting, ephemeral shadows of our banished code can dwell! Imagine a distant peal of thunder, here; maybe also imagine that I’m wearing a cape, maybe I hurl a wine glass to the floor. Y’know, have fun with it. How could you not? I mean, they’re called:
ShadowRealms
The proposed ShadowRealm API introduces a new kind of realm specifically designed for isolation, and only that. A ShadowRealm does not have an execution context of its own — code offloaded to a ShadowRealm will exist in a pseudo-realm with its own global and built-in objects. That code continues to run on the same thread as the code where the ShadowRealm is created; we’re not forced to communicate and share resources back and forth between two separate threads in limited ways. In short, a script is executed the way it would if limited to a single realm, but quarantined away from that outer realm’s intrinsic objects, APIs, global object, and anything our script has done to that global object.
That sounds complicated, but the proposed API would be exceptionally simple in practice:
// Create a ShadowRealm:
const shadow = new ShadowRealm();

function globalFunction() {};

console.log( globalthis.globalFunction );
// Result: function globalFunction()

// Evaluate `globalThis.globalFunction` inside the ShadowRealm:
console.log( shadow.evaluate( 'globalThis.globalFunction' ) );
// Result: undefined
Note: Keep in mind that this code is still theoretical — it doesn’t exist in the ES-262 standard or browsers just yet.
globalFunction is defined on the outer realm’s global object just like we saw earlier, but it isn’t defined on the global object inside of our newly-created ShadowRealm — that ShadowRealm’s global object remains pristine, no matter what we do outside of it. The inverse is true, naturally:
// Create a ShadowRealm:
const shadow = new ShadowRealm();

// Declare a global function inside the ShadowRealm:
shadow.evaluate( 'function globalFunction() {};' );

// It doesn't exist in the outer realm's global object:
console.log( globalthis.globalFunction );
// Result: undefined

// But when we evaluate `globalThis.globalFunction` inside the ShadowRealm:
console.log( shadow.evaluate( 'globalThis.globalFunction' ) );
// Result: function globalFunction()
We’ve declared that function inside the ShadowRealm, and we can call it by way of the variable that references that ShadowRealm object. That function remains quarantined away from the outer global object and that of any other ShadowRealm:
// Create a ShadowRealm:
const firstShadow = new ShadowRealm();
const secondShadow = new ShadowRealm();

// Declare a global function inside the ShadowRealm referenced by `secondShadow`:
secondShadow.evaluate( 'function globalFunction() {};' );

// It doesn't exist in the outer realm's global object:
console.log( globalthis.globalFunction );
// Result: undefined

// It doesn't exist in the global object of the ShadowRealm referencd by `firstShadow`:
console.log( firstShadow.evaluate( 'globalThis.globalFunction' ) );
// Result: undefined

// It only exists within the ShadowRealm referenced by `secondShadow`:
console.log( secondShadow.evaluate( 'globalThis.globalFunction' ) );
// Result: function globalFunction()
“Quarantined” to an extent, that is. ShadowRealms don’t provide a true security boundary in that code running inside a ShadowRealm can still make inferences about code running in other realms. They can be thought of as an integrity boundary, in that code running inside a ShadowRealm can’t directly interfere with another realm — unless we let it, of course. Even though code shunted off into a ShadowRealm can’t interfere with the objects outside of it, we’re still free to use the results of those operations the way we would use the results of that same operation in the host realm:
// Create a ShadowRealm:
const shadow = new ShadowRealm();

// Create a binding that calls a function inside the ShadowRealm:
const shadowFunction = shadow.evaluate( '( value ) => globalThis.someValue = value );

// ...and call our wrapped function using that binding:
shadowFunction( "Hello from the ShadowRealm!" );

// Executing this function in the host realm doesn't _change_ anything here, of course:
console.log( globalThis.someValue );
// Result: undefined

// But we can grab the result from the ShadowRealm:
const shadowValue = shadow.evaluate( 'globalThis.someValue' );

// And use it here in the host realm:
console.log( shadowValue );
// Result: Hello from the ShadowRealm!
Infinite disposable cleanrooms! Pocket dimensions where we can execute whatever code we want, without fear of that code interfering with the scope of any other ShadowRealm or the outer realm — the “light realm,” if you will.
Now, some of you — especially those of you who’ve been doing this since the early days of JavaScript — have probably been recoiling at these examples. You’d be forgiven for thinking that ShadowRealm API is just goth eval, and you wouldn’t be strictly wrong: apart from running in the context of a ShadowRealm, what you’ve seen so far here are basically indirect calls to eval — even subject to the same unsafe-eval Content Security Policy rule.
Fear not for your workflows, however: while these are illustrative examples, this isn’t the only way to put ShadowRealms to use. The proposal includes an importValue method on the ShadowRealm object’s prototype, which allows you to dynamically import modules, then capture and work with exported values and functions:
// spookycode.js
export function greeting() {
 return "Hello from the ShadowRealm!";
}
async function shadowGreeter() {
  // I INVOKE THE DARK POWER OF THE SHADOWREALM- ahem. Sorry.
  const shadow = new ShadowRealm();

  /* 
  * `importValue` returns a promise that resolves with the value of the function 
  * specified in the second argument: 
  */
  const shadowGreet = await shadow.importValue( "./spookycode.js", "greeting" );

  // Call our wrapped function, annnnd...
  shadowGreet();
}

shadowGreeter();
// Result: Hello from the ShadowRealm!
The shadow hasn’t fallen yet
I’m pleased to say that you’ve now seen the entirety of the proposed ShadowRealms API, at this point. The proposal includes only those the two methods you’ve seen here — evaluate and importValue — both means of banishing evaluating code in the context of a ShadowRealm instance while still executing that code in the context of the host realm’s thread.
Again, though: none of this can be put to use just yet. The proposed specification is currently at Stage 2.7 — “approved in principle and undergoing validation,” meaning that it’s only likely to change as a result of feedback from tests and trial implementations in browsers, if at all. You’re playing a move ahead by reading this. When this proposal reaches Stage 3 and we start to see implementations in browsers, you’ll be ready to try it out for yourself. Nay, more than ready — at such time as the awesome power of the ShadowRealm is loosed upon the web, you shall stand at the ready to command its dark and fearsome majjycks! The very realm upon which our code stands shall quake, as— okay, okay, sorry. Look, I can’t help it! I mean, “ShadowRealm,” for cryin’ out loud.
Soon We Can Finally Banish JavaScript to the ShadowRealm originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The proposed ShadowRealm API introduces a new kind of realm specifically designed for isolation, and only that.
Soon We Can Finally Banish JavaScript to the ShadowRealm originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Soon We Can Finally Banish JavaScript to the ShadowRealm

<p>I came across Kitty Giraudel’s folded corners technique. I’ve been on a bit of a <code>corner-shape</code> kick lately, so I figured that <code>corner-shape</code> could be used to create folded corners as well.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-css-corner-shape-for-folded-corners/">Using CSS corner-shape For Folded Corners</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


I came across Kitty Giraudel’s folded corners technique. It leverages CSS clip-path, and I thought that that was such a cool way to do it. clip-path has been trending lately, most likely because web browsers support the shape() function now.
However, I’ve been on a bit of a corner-shape kick lately (have a look at my introduction to corner-shape as well as these scroll-driven corner-shape animations), so I figured that corner-shape could be used to create folded corners as well, and this is what I came up with:




CodePen Embed Fallback




So open Chrome, which supports corner-shape, and let’s dig in (if you’re looking at this in other browsers, it basically falls back to a rounded corner).









Step 1: Set some CSS variables
Elements have four corners, but when we use border-radius, each corner is split into two coordinates. The x-axis coordinate moves along the x-axis, away from its associated corner, while the y-axis coordinate does the same thing along the y-axis. It’s from these coordinates that border-radius draws the curvature of the rounded corners.




First, store the coordinates as CSS variables. We’ll need the values that they hold more than once, so this simplifies things, makes the fold animatable, and maintains some degree of realism.
:root {
  /* x-axis coordinate */
  --x-coord: 9rem;

  /* y-axis coordinate */
  --y-coord: 5rem;
}
Step 2: Establishing the fold
Given what we now know about border-radius, it should be obvious what border-top-right-radius does. As for corner-top-right-shape: bevel, that ensures that a straight line is drawn between the coordinates instead of rounded corners (corner-top-right-shape: round). That’s right, border-radius includes corner-shape: round by default (behind the scenes, of course).
/* Square */
div {
  /* Place coordinates */
  border-top-right-radius: var(--x-coord) var(--y-coord);

  /* Draw line between coordinates */
  corner-top-right-shape: bevel;
}
CodePen Embed Fallback




Step 3: Creating the flip side
Now that we’ve established the fold, it’s time to create the flip side. Start by selecting ::before, then declare content: "" to create the element without content. The background can be inherited from the square, and the dimensions should leverage the coordinates that we saved. As you can see, I’ve also added a box-shadow where the blur radius scales with --x-coord and --y-coord, but you’re welcome to adapt the formula as you see fit.
/* Square */
div {
  /* Place coordinates */
  border-top-right-radius: var(--x-coord) var(--y-coord);

  /* Draw line between coordinates */
  corner-top-right-shape: bevel;

  /* Flip side */
  &::before {
    /* Generate empty element */
    content: "";

    /* Inherit background */
    background: inherit;

    /* Same as coordinates */
    width: var(--x-coord);
    height: var(--y-coord);

    /* Scale blur radius with --x-coord and --y-coord */
    box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;
  }
}
CodePen Embed Fallback




Step 4: Positioning the flip side (::before)
Next, we need to shift ::before to the (top-)right corner. We’re avoiding anchor positioning, because there’s no need for modern features if more supported features work well using the same amount of code. So, declare position: relative on the square and position: absolute on ::before. This makes ::before position relative to the square, and is a trick that only works for parent-child relationships. Actually, this shortcoming is why anchor positioning was invented, but we just don’t need it in this case.
In addition, declare inset: 0 0 auto auto on ::before to align it to the top-right corner of the square, and overflow: clip on the square to clip the half of ::before that overflows it.
/* Square */
div {
  /* Place coordinates */
  border-top-right-radius: var(--x-coord) var(--y-coord);

  /* Draw line between coordinates */
  corner-top-right-shape: bevel;

  /* Clip any overflow */
  overflow: clip;

  /* For alignment */
  position: relative;

  /* Flip side */
  &::before {
    /* Generate empty element */
    content: "";

    /* Inherit background */
    background: inherit;

    /* Same as coordinates */
    width: var(--x-coord);
    height: var(--y-coord);

    /* Scale blur radius with --x-coord and --y-coord */
    box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;

    /* For alignment */
    position: absolute;

    /* Align to top-right */
    inset: 0 0 auto auto;
  }
}
CodePen Embed Fallback




You can stop here if you want, but there’s room for improvement…
Step 5: Sculpting the flip side
To make the outcome look a bit more realistic, we’ll use corner-bottom-left-shape: bevel to make one more straight cut, this time to ::before. There are, most likely, many ways to tackle this depending on how sharply we want to crease the fold, how elevated we want the flip side to be, and the angle from which we want to view the square, but I don’t think it matters as long as the effect looks decent, so we’re aiming for a sharp crease, the flip side sticking up, and an aerial view. If you’d rather something different, keep in mind that the shadow also impacts the outcome, and that you’d be facing a trickier implementation.
The only degree of complexity that I suggest is this:
/* Ensure realistic fold */
@container style(--x-coord < --y-coord) {
  border-bottom-left-radius: 100% calc(100% - var(--x-coord));
}

@container style(--x-coord >= --y-coord) {
  border-bottom-left-radius: calc(100% - var(--y-coord)) 100%;
}
These are container style queries using the range syntax, where if the value of --x-coord is less than the value of --y-coord, we subtract the value of --x-coord from 100% and use it as the y-axis coordinate for the relevant border radius (border-bottom-left-radius, in this case). The other axis is set to 100%. Adversely, if the value of --x-coord is more than (or equal to) the value of --y-coord, we subtract the value of --y-coord from 100% and use it as the x-axis coordinate. Once again, the other axis is set to 100%.
The result is that the crease, shadow, and now perspective of the fold is calculated using only --x-coord and --y-coord to look realistic (or realistic enough, anyway). Using the slideVars toggles in the top-right corner of the demo, you can see for yourself by testing various combinations of coordinates:
CodePen Embed Fallback




If you want to implement a failsafe to ensure that the coordinates don’t exceed the dimensions of the square, breaking the effect, you can use min(). The modified coordinate variables below set --y-coord to an impossible 999999999rem, but caps it at the height of the square (although I can’t imagine that you’d actually need this, to be completely honest):
--x-coord: min(--square-width, 9rem);
--y-coord: min(--square-height, 999999999rem);
CodePen Embed Fallback




All in all, we have not only a folded corner effect but a utility that builds the effect based on only two coordinates.
The full code:
:root {
  /* x-axis coordinate */
  --x-coord: 9rem;

  /* y-axis coordinate */
  --y-coord: 5rem;

  /* Square */
  div {
    /* Place coordinates */
    border-top-right-radius: var(--x-coord) var(--y-coord);

    /* Draw line between coordinates */
    corner-top-right-shape: bevel;

    /* Clip any overflow */
    overflow: clip;

    /* For alignment */
    position: relative;

    /* Flip side */
    &::before {
      /* Generate empty element */
      content: "";

      /* Inherit background */
      background: inherit;

      /* Same as coordinates */
      width: var(--x-coord);
      height: var(--y-coord);

      /* Scale blur radius with --x-coord and --y-coord */
      box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;

      /* For alignment */
      position: absolute;

      /* Align to top-right */
      inset: 0 0 auto auto;

      /* Draw line between coordinates */
      corner-bottom-left-shape: bevel;

      /* Ensure realistic fold */
      @container style(--x-coord < --y-coord) {
        border-bottom-left-radius: 100% calc(100% - var(--x-coord));
      }

      @container style(--x-coord >= --y-coord) {
        border-bottom-left-radius: calc(100% - var(--y-coord)) 100%;
      }
    }
  }
}
Note: We could swap container style queries for if() functions, which are shorter but less readable.
Folded corners using clip-path vs. corner-shape
Kitty’s Giraudel’s folded corners work in all browsers, and because clip-path is used, which is a more versatile shaping feature, there are more ways to customize the shape. It’s also the more correct approach, for whatever that’s worth. However, my corner-shape approach is cleaner and likely wouldn’t require any further customization anyway, but lacks Safari and Firefox support for now. So unless you need folded corners today, I’d bookmark both:
Folded corners using CSS clip-path
Folded corners using CSS corner-shape
Using CSS corner-shape For Folded Corners originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

I came across Kitty Giraudel’s folded corners technique. I’ve been on a bit of a corner-shape kick lately, so I figured that corner-shape could be used to create folded corners as well.
Using CSS corner-shape For Folded Corners originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Using CSS corner-shape For Folded Corners

<p>I will explain how my mum inspired this 2026 Mother’s Day scrollytelling experiment — but also, how she inspired my approach to dev and life.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-scrollytelling-gift-for-mum-on-mothers-day-2026/">A Scrollytelling Gift for Mum on Mother’s Day 2026</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>My mum loved logic because she was born at a time when nothing made sense. She was born in 1945, the year World War II ended, so she dodged a literal bullet because we are Jewish. But from the first day of her life, she found that famine, racism, and misfortune kept trying to take her away. In 2011, cancer took her away from me forever. But on a lighter note, this Mother’s Day I’m bringing her back to life the only way I know how: UI mad science!</p>



<p>I will explain how my mum inspired this 2026 Mother’s Day scrollytelling experiment — but also, how she inspired my approach to dev and life. Along the way, I’ll discuss some of the tech involved in this virtual Mother’s Day gift. I normally write either <a href="https://css-tricks.com/author/leemeyer/">inspirational or technical posts</a> — but for Mother’s Day, you’re getting a twofer.</p>



<span id="more-394649"></span>



<h2 class="wp-block-heading" id="try-the-interactive-mother-s-day-card">Try the interactive Mother’s Day card</h2>



<p>Here’s the CodePen, which uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap/Using_scroll_snap_events" rel="noopener">scroll-snap events</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries" rel="noopener">scroll-state queries</a>, so it will only work in Chromium-based browsers at the moment.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_OPbyPXo" src="//codepen.io/anon/embed/OPbyPXo?height=450&amp;theme-id=1&amp;slug-hash=OPbyPXo&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed OPbyPXo" title="CodePen Embed OPbyPXo" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>Alternatively, here’s a video demo with commentary by my eight-year-old. It was bittersweet to realise that this is the closest he has come to interacting with his nana, because she passed before he was born.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="mothers day interactive card 2026" width="500" height="375" src="https://www.youtube.com/embed/gu2cj9zO00s?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading" id="why-i-made-this">Why I made this</h2>



<p>Mum was born in a hospital in Kazakhstan, where civilian patients shared wards with discharged soldiers suffering PTSD. They wandered in and out of the maternity rooms, terrifying the patients and making labour even harder for my grandmother.</p>



<p>When Mum was born, she wasn’t breathing. The staff immersed her in cold water, then hot, then cold water again — <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC2672845/" rel="noopener">a so-called remedy at the time based on no science</a>. This was the beginning of a larger pattern in her life: She kept surviving not because of the help she received, but despite chaos disguised as help.</p>



<p>So, as an adult, Mum learned to survive by finding patterns and sense in the unfathomable. She accomplished this by combining her three passions:</p>



<ul class="wp-block-list">
<li>In photography, she framed moments when the chaos of her surroundings temporarily harmonized into beauty.</li>



<li>In teaching, she used those images to help tell a story that broke the chaos into logical steps people could follow.</li>



<li>In computer programming, she encapsulated those illustrated teachable moments within interactive experiences. Unlike in real life, if a programmed interaction goes wrong, you can trace why and solve the problem.</li>
</ul>



<p>In other words, she educated me by using the skill set I now think of as web development—before the web existed.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="765" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/lee-mothers-day.jpg?resize=1024%2C765" alt="Preview of the interactive card. A woman with short brown hair at the right of the frame looking left into the lens of a large camera and standing in the middle of a lush flower garden. In loving memory of Anna Meyer, 1945-2011." class="wp-image-394650" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/lee-mothers-day.jpg?resize=1024%2C765&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/lee-mothers-day.jpg?resize=300%2C224&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/lee-mothers-day.jpg?resize=768%2C573&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/lee-mothers-day.jpg?w=1200&amp;ssl=1 1200w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<h2 class="wp-block-heading" id="gamifying-the-experience-of-knowing-my-mum">Gamifying the experience of knowing my mum</h2>



<p>I drew inspiration from Roland Franke’s <a href="https://codepen.io/ROL4ND909/pen/MWMzbog" rel="noopener">deconstructed radial slice transition using scroll-snap events</a>. Roland’s Pen showcases eye-catching, scroll-triggered transitions between landscapes as a figure sits in the foreground watching. This made me think of the patience my mum put into observing the world—but then she’d encapsulate everything in short, interactive stories I could digest as a young child.</p>



<p>I’m symbolizing that experience in my Mother’s Day game with the scroll-triggered <a href="https://www.youtube.com/watch?v=kQM6Q9Axyx0" rel="noopener">time-lapse</a> animation of day to night, stylized with CSS shapes. Using a single scroll gesture, we grasp the gist of an entire day. That experience is like the way my mum could explain a big topic to me in a way that felt like play.</p>



<p>My mum taught me that video games don’t have to be about blowing things up. She once used <a href="https://en.wikipedia.org/wiki/QuickBASIC" rel="noopener">QuickBASIC</a> to build a photography game long before <a href="https://en.wikipedia.org/wiki/Pok%C3%A9mon_Snap" rel="noopener">Pokémon Snap</a> existed. I remember passing a shop in the 90s with <a href="https://www.youtube.com/watch?v=QHWHCOe4Vbk" rel="noopener">Armor Alley</a> playing in demo mode in the window. I was obviously fascinated, but my mum said, “I don’t like it. The helicopter started it,” then she went home and built her photography game for me to play instead.</p>



<p>She once told me a story about photography from her childhood in the Soviet Union. She remembered taking a photo of a government building just because it looked cool, but a soldier saw her and confiscated the roll of film from her camera. Maybe the lesson was that exposing the reality of something can be just as much of a threat as shooting things in the militaristic sense of the word.</p>



<p>The violence common in games is a metaphor for the uncertainty and randomness we face in life, but my mum’s photography game taught me that violence isn’t the only way of coping with that problem, even in a game.</p>



<h2 class="wp-block-heading" id="how-the-scrollytelling-mother-s-day-card-works">How the scrollytelling Mother&#8217;s Day card works</h2>



<p>My mum inspired the randomness of the UFOs in this experiment with her ability to use a camera to capture the fleeting moments of sense in a chaotic world.</p>



<p>The combination of deterministic scroll-triggered animations with the randomness of the UFOs and text physics is possible using alien technology I’ve not seen used much in the wild: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap/Using_scroll_snap_events" rel="noopener">scroll-snap events</a>. This emergent module — available <a href="https://caniuse.com/wf-scroll-snap-events" rel="noopener">only in Chrome and Opera at the time of writing</a> — provides a simple JavaScript API so that when we style the page to snap between the day and night scenes, we can trigger behavior that isn’t possible in CSS alone, like the random flight paths of the UFOs, and the <a href="https://www.youtube.com/watch?v=CUAuy5SWJcw" rel="noopener">Pretext</a>-inspired effect of the UFOs repelling letters as the spaceships fly through the text.</p>



<p class="is-style-explanation"><strong>Sidenote:</strong> <a href="https://css-tricks.com/the-importance-of-native-randomness-in-css/">Randomness in CSS is coming</a>, but it only works in Safari for now.</p>



<p>Here’s the CSS to enable scroll snapping:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* The scroll container */
body {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Each snap target */
.snap-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}</code></pre>



<p>&#8230;and the JavaScript to handle scroll snap events:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// scrollsnapchanging fires while the user is scrolling —
// snapTargetBlock is the panel they are heading toward.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
  markPanelStates({ active: selectedPanel, incoming: snapTargetBlock });
  if (snapTargetBlock === dayPanel)   onScrollingTowardDay();
  if (snapTargetBlock === nightPanel) onScrollingTowardNight();
});

// scrollsnapchange fires once a panel has snapped into place —
// snapTargetBlock is the panel now fully in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
  selectedPanel = snapTargetBlock;
  markPanelStates({ active: selectedPanel, incoming: null });
  if (snapTargetBlock === dayPanel)   onLandedOnDay();
  if (snapTargetBlock === nightPanel) onLandedOnNight();
});</code></pre>



<p>You can see that handling these events lets us create context-aware transitions between the two scenes, depending on the state of the game logic when the user slides between day and night and back again. My mum would always give me another chance to get things right.</p>



<h2 class="wp-block-heading" id="in-case-you-found-this-while-googling-for-a-conventional-mother-s-day-gift-idea-">In case you found this while Googling for a conventional Mother’s Day gift idea…</h2>



<p>Parting words: In the unlikely event that your mum is not into avant-garde homemade virtual gifts that showcase emergent browser features, get her a Kindle or something. I bought my mum a Kindle when she was alive. We’d read the same novel separately on our Kindles, then we’d compare notes over the phone on the days I couldn’t visit.</p>



<p><em>Happy Mother’s Day, everyone!</em></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-scrollytelling-gift-for-mum-on-mothers-day-2026/">A Scrollytelling Gift for Mum on Mother’s Day 2026</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


My mum loved logic because she was born at a time when nothing made sense. She was born in 1945, the year World War II ended, so she dodged a literal bullet because we are Jewish. But from the first day of her life, she found that famine, racism, and misfortune kept trying to take her away. In 2011, cancer took her away from me forever. But on a lighter note, this Mother’s Day I’m bringing her back to life the only way I know how: UI mad science!
I will explain how my mum inspired this 2026 Mother’s Day scrollytelling experiment — but also, how she inspired my approach to dev and life. Along the way, I’ll discuss some of the tech involved in this virtual Mother’s Day gift. I normally write either inspirational or technical posts — but for Mother’s Day, you’re getting a twofer.




Try the interactive Mother’s Day card
Here’s the CodePen, which uses scroll-snap events and scroll-state queries, so it will only work in Chromium-based browsers at the moment.
CodePen Embed Fallback
Alternatively, here’s a video demo with commentary by my eight-year-old. It was bittersweet to realise that this is the closest he has come to interacting with his nana, because she passed before he was born.






Why I made this
Mum was born in a hospital in Kazakhstan, where civilian patients shared wards with discharged soldiers suffering PTSD. They wandered in and out of the maternity rooms, terrifying the patients and making labour even harder for my grandmother.
When Mum was born, she wasn’t breathing. The staff immersed her in cold water, then hot, then cold water again — a so-called remedy at the time based on no science. This was the beginning of a larger pattern in her life: She kept surviving not because of the help she received, but despite chaos disguised as help.
So, as an adult, Mum learned to survive by finding patterns and sense in the unfathomable. She accomplished this by combining her three passions:
In photography, she framed moments when the chaos of her surroundings temporarily harmonized into beauty.
In teaching, she used those images to help tell a story that broke the chaos into logical steps people could follow.
In computer programming, she encapsulated those illustrated teachable moments within interactive experiences. Unlike in real life, if a programmed interaction goes wrong, you can trace why and solve the problem.
In other words, she educated me by using the skill set I now think of as web development—before the web existed.




Gamifying the experience of knowing my mum
I drew inspiration from Roland Franke’s deconstructed radial slice transition using scroll-snap events. Roland’s Pen showcases eye-catching, scroll-triggered transitions between landscapes as a figure sits in the foreground watching. This made me think of the patience my mum put into observing the world—but then she’d encapsulate everything in short, interactive stories I could digest as a young child.
I’m symbolizing that experience in my Mother’s Day game with the scroll-triggered time-lapse animation of day to night, stylized with CSS shapes. Using a single scroll gesture, we grasp the gist of an entire day. That experience is like the way my mum could explain a big topic to me in a way that felt like play.
My mum taught me that video games don’t have to be about blowing things up. She once used QuickBASIC to build a photography game long before Pokémon Snap existed. I remember passing a shop in the 90s with Armor Alley playing in demo mode in the window. I was obviously fascinated, but my mum said, “I don’t like it. The helicopter started it,” then she went home and built her photography game for me to play instead.
She once told me a story about photography from her childhood in the Soviet Union. She remembered taking a photo of a government building just because it looked cool, but a soldier saw her and confiscated the roll of film from her camera. Maybe the lesson was that exposing the reality of something can be just as much of a threat as shooting things in the militaristic sense of the word.
The violence common in games is a metaphor for the uncertainty and randomness we face in life, but my mum’s photography game taught me that violence isn’t the only way of coping with that problem, even in a game.
How the scrollytelling Mother’s Day card works
My mum inspired the randomness of the UFOs in this experiment with her ability to use a camera to capture the fleeting moments of sense in a chaotic world.
The combination of deterministic scroll-triggered animations with the randomness of the UFOs and text physics is possible using alien technology I’ve not seen used much in the wild: scroll-snap events. This emergent module — available only in Chrome and Opera at the time of writing — provides a simple JavaScript API so that when we style the page to snap between the day and night scenes, we can trigger behavior that isn’t possible in CSS alone, like the random flight paths of the UFOs, and the Pretext-inspired effect of the UFOs repelling letters as the spaceships fly through the text.
Sidenote: Randomness in CSS is coming, but it only works in Safari for now.
Here’s the CSS to enable scroll snapping:
/* The scroll container */
body {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Each snap target */
.snap-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
…and the JavaScript to handle scroll snap events:
// scrollsnapchanging fires while the user is scrolling —
// snapTargetBlock is the panel they are heading toward.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
  markPanelStates({ active: selectedPanel, incoming: snapTargetBlock });
  if (snapTargetBlock === dayPanel)   onScrollingTowardDay();
  if (snapTargetBlock === nightPanel) onScrollingTowardNight();
});

// scrollsnapchange fires once a panel has snapped into place —
// snapTargetBlock is the panel now fully in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
  selectedPanel = snapTargetBlock;
  markPanelStates({ active: selectedPanel, incoming: null });
  if (snapTargetBlock === dayPanel)   onLandedOnDay();
  if (snapTargetBlock === nightPanel) onLandedOnNight();
});
You can see that handling these events lets us create context-aware transitions between the two scenes, depending on the state of the game logic when the user slides between day and night and back again. My mum would always give me another chance to get things right.
In case you found this while Googling for a conventional Mother’s Day gift idea…
Parting words: In the unlikely event that your mum is not into avant-garde homemade virtual gifts that showcase emergent browser features, get her a Kindle or something. I bought my mum a Kindle when she was alive. We’d read the same novel separately on our Kindles, then we’d compare notes over the phone on the days I couldn’t visit.
Happy Mother’s Day, everyone!
A Scrollytelling Gift for Mum on Mother’s Day 2026 originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

I will explain how my mum inspired this 2026 Mother’s Day scrollytelling experiment — but also, how she inspired my approach to dev and life.
A Scrollytelling Gift for Mum on Mother’s Day 2026 originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

A Scrollytelling Gift for Mum on Mother’s Day 2026

<p><a href="https://wil.to/posts/googles-prompt-api/" rel="noopener">Mat Marquis</a> on Google pulling the web standards equivalent of <a href="https://en.wikipedia.org/wiki/Songs_of_Innocence_(U2_album)#Release" rel="noopener">U2 album marketing</a>:</p>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>As a Chrome user, you’ll have&#160;<a href="https://www.techspot.com/news/112309-google-chrome-has-silently-pushing-4gb-ai-model.html" rel="noopener">received Gemini Nano in the form of a 4GB transfer</a>&#160;recently; no permission asked or required. If you remove it, </p>
</blockquote>
<p>&#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/googles-prompt-api/">Google’s Prompt API</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p><a href="https://wil.to/posts/googles-prompt-api/" rel="noopener">Mat Marquis</a> on Google pulling the web standards equivalent of <a href="https://en.wikipedia.org/wiki/Songs_of_Innocence_(U2_album)#Release" rel="noopener">U2 album marketing</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>As a Chrome user, you’ll have&nbsp;<a href="https://www.techspot.com/news/112309-google-chrome-has-silently-pushing-4gb-ai-model.html" rel="noopener">received Gemini Nano in the form of a 4GB transfer</a>&nbsp;recently; no permission asked or required. If you remove it, Chrome will re-download it. For&nbsp;<a href="https://gdpr-info.eu/issues/consent/" rel="noopener">reasons I can only guess at</a>, Gemini Nano is presumably now considered to be part of Chrome itself, despite being a standalone product that is included alongside but not integrated&nbsp;<em>into</em>&nbsp;the browser — the way a copy of&nbsp;<a href="https://en.wikipedia.org/wiki/BonziBuddy" rel="noopener">Bonzi Buddy</a>&nbsp;included in a browser update might be considered a part of said browser.</p>
</blockquote>



<span id="more-394653"></span>



<p>It&#8217;s not exactly <em>new</em> news, as we&#8217;ve had <a href="https://developer.chrome.com/docs/ai/prompt-api" rel="noopener">published</a> <a href="https://github.com/webmachinelearning/prompt-api/blob/main/README.md" rel="noopener">explainers</a> on it for over a year now, as well as an <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/x3QEjLYx5Rg" rel="noopener">intent to prototype</a> for just as long.</p>



<p><a href="https://github.com/mozilla/standards-positions/issues/1213#issuecomment-4347988313" rel="noopener">Mozilla has already voiced its concerns/opposition</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><a href="https://developer.chrome.com/docs/ai/prompt-api#use_the_prompt_api:~:text=Before%20you%20use%20this%20API%2C%20acknowledge%20Google%27s%20Generative%20AI%20Prohibited%20Uses%20Policy%2E" rel="noopener">According to Chrome&#8217;s documentation</a>, to use the prompt API you must &#8216;acknowledge&#8217;&nbsp;<a href="https://policies.google.com/terms/generative-ai/use-policy" rel="noopener">Google&#8217;s Generative AI Prohibited Uses Policy</a>. Elements of this policy go beyond law. For example:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Do not engage … generating or distributing content that facilitates … Sexually explicit content<br>Do not engage in misinformation, misrepresentation, or misleading activities. This includes … Facilitating misleading claims related to governmental or democratic processes</p>
</blockquote>



<p>This seems like a bad direction for an API on the web platform, and sets a worrying precedent for more APIs that have UA-specific rules around usage.</p>
</blockquote>



<p>I have nothing to add, only that this is the sort of thing that seems worth knowing. Mat&#8217;s take-home isn&#8217;t exactly comforting because, remember, <em>this has already shipped</em>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I’d like to say that something to the tune of “their whole argument hinges on ‘positive developer sentiment,’ so let’s show them that there isn’t any” — but there isn’t any; they&nbsp;<em>cited</em>&nbsp;places where there isn’t any. That’s not how it works for them. Google participates in the web standards process the way a bear participates in the “camping” process.</p>



<p>[&#8230;]</p>



<p>Remember this the next time Google announces an “exciting new standard” that they’re heroically championing — for you, for users, for good of the web — in language that has just a hint of inevitability about it.</p>
</blockquote>



<p>The <a href="https://css-tricks.com/the-ecological-impact-of-browser-diversity/">browser ecosystem</a> has historically provided us with plenty of concerns. <a href="https://infrequently.org/series/browser-choice-must-matter/" rel="noopener">Alex Russell&#8217;s writing</a> is a treasure trove of the current limits of browser choice. And things are especially murky when we need to be reminded that <em><a href="https://polypane.app/blog/not-all-browser-apis-are-web-apis/" rel="noopener">not all browser APIs are Web APIs</a></em>.</p>



<p>Maybe helpful, maybe not:</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2218" height="1906" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=2218%2C1906" alt="Chrome browser settings with system tab open showing disabled on-device AI option." class="wp-image-394658" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?w=2218&amp;ssl=1 2218w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=300%2C258&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=1024%2C880&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=768%2C660&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=1536%2C1320&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/chrome-system-settings-ai.png?resize=2048%2C1760&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>More coverage, if you&#8217;d like:</p>



<ul class="wp-block-list">
<li><a href="https://support.google.com/gemini/answer/16283624?hl=en&amp;visit_id=639136889569119000-2199918715&amp;p=mws_gic_ga&amp;rd=1" rel="noopener">&#8220;Use Gemini in Chrome&#8221;</a> (Gemini Apps Help)</li>



<li><a href="https://www.engadget.com/2166113/chrome-downloads-a-4gb-ai-file-without-user-consent-researcher-alleges/" rel="noopener">&#8220;Chrome downloads a 4GB AI file without user consent, researcher alleges&#8221;</a> (Engadget)</li>



<li><a href="https://cybernews.com/security/google-chrome-ai-model-device-no-consent/" rel="noopener">&#8220;Guy finds Google Chrome is quietly installing a 4GB AI model on our devices&#8221;</a> (Cybernews)</li>



<li><a href="https://www.androidauthority.com/google-chrome-weights-bin-ai-model-download-explained-3664043/" rel="noopener">&#8220;Is Chrome&#8217;s 4GB &#8220;weights.bin&#8221; file spyware?&#8221;</a> (Android Authority)</li>
</ul>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/googles-prompt-api/">Google’s Prompt API</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Mat Marquis on Google pulling the web standards equivalent of U2 album marketing:
As a Chrome user, you’ll have received Gemini Nano in the form of a 4GB transfer recently; no permission asked or required. If you remove it, Chrome will re-download it. For reasons I can only guess at, Gemini Nano is presumably now considered to be part of Chrome itself, despite being a standalone product that is included alongside but not integrated into the browser — the way a copy of Bonzi Buddy included in a browser update might be considered a part of said browser.




It’s not exactly new news, as we’ve had published explainers on it for over a year now, as well as an intent to prototype for just as long.
Mozilla has already voiced its concerns/opposition:
According to Chrome’s documentation, to use the prompt API you must ‘acknowledge’ Google’s Generative AI Prohibited Uses Policy. Elements of this policy go beyond law. For example:
Do not engage … generating or distributing content that facilitates … Sexually explicit content
Do not engage in misinformation, misrepresentation, or misleading activities. This includes … Facilitating misleading claims related to governmental or democratic processes
This seems like a bad direction for an API on the web platform, and sets a worrying precedent for more APIs that have UA-specific rules around usage.
I have nothing to add, only that this is the sort of thing that seems worth knowing. Mat’s take-home isn’t exactly comforting because, remember, this has already shipped:
I’d like to say that something to the tune of “their whole argument hinges on ‘positive developer sentiment,’ so let’s show them that there isn’t any” — but there isn’t any; they cited places where there isn’t any. That’s not how it works for them. Google participates in the web standards process the way a bear participates in the “camping” process.
[…]
Remember this the next time Google announces an “exciting new standard” that they’re heroically championing — for you, for users, for good of the web — in language that has just a hint of inevitability about it.
The browser ecosystem has historically provided us with plenty of concerns. Alex Russell’s writing is a treasure trove of the current limits of browser choice. And things are especially murky when we need to be reminded that not all browser APIs are Web APIs.
Maybe helpful, maybe not:




More coverage, if you’d like:
“Use Gemini in Chrome” (Gemini Apps Help)
“Chrome downloads a 4GB AI file without user consent, researcher alleges” (Engadget)
“Guy finds Google Chrome is quietly installing a 4GB AI model on our devices” (Cybernews)
“Is Chrome’s 4GB “weights.bin” file spyware?” (Android Authority)


Google’s Prompt API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Mat Marquis on Google pulling the web standards equivalent of U2 album marketing:
As a Chrome user, you’ll have received Gemini Nano in the form of a 4GB transfer recently; no permission asked or required. If you remove it, 
…
Google’s Prompt API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Google’s Prompt API

<p>Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm like, say, a zigzag pattern. Here's how to do it with CSS Grid.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/zigzag-css-grid-layouts/">Making Zigzag CSS Layouts With a Grid + Transform Trick</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm — a layout where items cascade diagonally, like water flowing down a waterfall.</p>



<p>This is the zigzag layout. And building it requires a small trick that reveals something fascinating about how CSS transforms actually work.</p>



<span id="more-393013"></span>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_azmzpVX" src="//codepen.io/anon/embed/azmzpVX?height=550&amp;theme-id=1&amp;slug-hash=azmzpVX&amp;default-tab=result" height="550" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed azmzpVX" title="CodePen Embed azmzpVX" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 class="wp-block-heading" id="the-strategy">The Strategy</h2>



<p>Before writing a single line of CSS, let&#8217;s think about approach.</p>



<p>The first idea that comes to mind: set up a flex container with <code>flex-direction: column</code> and <code>flex-wrap: wrap</code>, so items flow down and then wrap into a second column. Usually we think of the <a href="https://css-tricks.com/almanac/properties/f/flex-wrap/"><code>flex-wrap</code></a> property in terms of rows, but the nice thing about flexbox is that it works in either orientation.</p>



<p>Two problems make this approach awkward:</p>



<ol class="wp-block-list">
<li><strong>You need a fixed height.</strong> You have to tell the container &#8220;you are <code>500px</code> tall&#8221; for wrapping to kick in. That&#8217;s brittle.</li>



<li><strong>The tab order breaks.</strong> Items flow down the first column (i.e., 1, 2, 3), then jump to the second column (i.e., 4, 5, 6). That&#8217;s not a waterfall. That&#8217;s two buckets.</li>
</ol>



<p>To be fair, the <a href="https://css-tricks.com/complete-guide-css-grid-layout/">CSS Grid</a> approach we&#8217;re about to build has its own hardcoded value. We&#8217;ll get to that. But it sidesteps the <kbd>Tab</kbd> order problem entirely, and that&#8217;s a meaningful win.</p>



<h2 class="wp-block-heading" id="the-grid-plan">The Grid Plan</h2>



<p>Here&#8217;s what I want to do instead:</p>



<ol class="wp-block-list">
<li>Create a two-column grid with items sitting side by side, nothing fancy.</li>



<li>Select every item in the second column, the even ones.</li>



<li>Shift them down by half of their own height to establish the staggered layout.</li>
</ol>



<p>That shift is where the magic happens. Let&#8217;s build it.</p>



<h2 class="wp-block-heading" id="the-grid">The Grid</h2>



<p>We start with a wrapper and five items. Nothing in the file yet, just a blank slate.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="wrapper">
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
&lt;/div></code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.item {
  height: 100px;
  border: 2px solid;
}</code></pre>



<p>We&#8217;re applying <code>box-sizing: border-box</code> globally because without it, the items aren&#8217;t actually <code>100px</code> tall — they&#8217;re slightly taller once the border gets added. This will matter in a moment.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_XJjJpNB" src="//codepen.io/anon/embed/XJjJpNB?height=450&amp;theme-id=1&amp;slug-hash=XJjJpNB&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed XJjJpNB" title="CodePen Embed XJjJpNB" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 class="wp-block-heading" id="the-shift">The Shift</h2>



<p>Now the fun part. Let&#8217;s grab every even item and translate it down:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.item:nth-child(even of .item) {
  transform: translateY(50%);
}</code></pre>



<p>A quick note on the selector. You might reach for <code>.item:nth-of-type(even)</code> here, and in this demo it would produce the same result since all the children are the same element type. But <code>nth-of-type</code> selects by tag name, not by class. So if you ever mix different element types inside the wrapper, it&#8217;ll match in ways you don&#8217;t expect. <code>:nth-child(even of .item)</code> is more precise because it explicitly filters by class, and it&#8217;s well-supported in modern browsers.</p>



<p>The zigzag emerges immediately. But let&#8217;s pause here, because something subtle is happening and it&#8217;s worth understanding.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ZYpYLLx" src="//codepen.io/anon/embed/ZYpYLLx?height=450&amp;theme-id=1&amp;slug-hash=ZYpYLLx&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ZYpYLLx" title="CodePen Embed ZYpYLLx" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 class="wp-block-heading" id="transform-percentages-are-different">Transform Percentages Are Different</h2>



<p>Percentages in transforms work completely differently than they do anywhere else in CSS.</p>



<p>In flow layout, positioned layout, or really any layout mode, a percentage refers to the parent&#8217;s available space. If you write <code>width: 50%</code> on an element inside a wrapper, you&#8217;re saying: <q>The container is this wide. Make me half of that.</q></p>



<p>Transforms don&#8217;t work this way. In a transform, percentages refer to the element itself. So <code>translateY(50%)</code> doesn&#8217;t mean &#8220;move down by half of the available space.&#8221; It means &#8220;move down by half of your own height.&#8221; If the element is <code>200px</code> tall, it moves down by <code>100px</code>.</p>



<p>This is actually the same coordinate-system behavior you see with the individual <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> CSS properties. All of them are applied in the element&#8217;s own coordinate space, post-layout. The browser finishes laying everything out first, including positions, sizes — basically the whole box model — and then applies the transform relative to the element itself. That&#8217;s why <code>scale(2)</code> grows outward from the element&#8217;s center, not from the top-left of the page.</p>



<p>This is exactly why the trick works. Each even item shifts down relative to its own size, not the container&#8217;s. The zigzag stays proportional no matter how tall the items are.</p>



<p>The result looks close. But it&#8217;s not quite right.</p>



<h2 class="wp-block-heading" id="the-gap-problem">The Gap Problem</h2>



<p>We can expose the imperfection by cranking the <a href="https://css-tricks.com/almanac/properties/g/gap/"><code>gap</code></a> up to something absurd — say, <code>100px</code>. When we do, the even items clearly aren&#8217;t sitting where they should. They need to travel a little further to account for the vertical space between rows.</p>



<p>Here&#8217;s the fix. First, let&#8217;s store the gap in a CSS custom property so we can reference it in multiple places:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.wrapper {
  --gap: 16px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: 800px;
  margin: 0 auto;
}

.item:nth-child(even of .item) {
  transform: translateY(calc(50% + var(--gap) / 2));
}</code></pre>



<p>We translate by <code>50%</code> of the element&#8217;s height plus half of the gap. We divide the gap by <code>2</code> because we only need to cover half the distance between rows — the full value would push it too far.</p>



<p>Set the gap to <code>16px</code>, it looks great. Set it to <code>100px</code>, it still looks great. The math holds regardless of the value.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_YPGPNxz" src="//codepen.io/anon/embed/YPGPNxz?height=450&amp;theme-id=1&amp;slug-hash=YPGPNxz&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed YPGPNxz" title="CodePen Embed YPGPNxz" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 class="wp-block-heading" id="the-overflow-surprise">The Overflow Surprise</h2>



<p>We&#8217;ve solved the core puzzle. But there&#8217;s a hidden problem waiting to surface.</p>



<p>Let&#8217;s add a border to the wrapper to see its boundaries:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.wrapper {
  border: 2px solid red;
}</code></pre>



<p>With five items, everything looks fine. The wrapper contains all of its children. No overflow. No issues.</p>



<p>Now add a sixth item:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line="7"><code markup="tt">&lt;div class="wrapper">
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
  &lt;div class="item">&lt;/div>
&lt;/div></code></pre>



<p>The sixth item is even. It gets translated down. And it spills right out of the container.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_wBzBgrJ" src="//codepen.io/anon/embed/wBzBgrJ?height=550&amp;theme-id=1&amp;slug-hash=wBzBgrJ&amp;default-tab=result" height="550" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed wBzBgrJ" title="CodePen Embed wBzBgrJ" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>Why? Because transforms don&#8217;t affect layout. As far as the browser&#8217;s layout engine is concerned, that sixth item is still sitting in its original, untranslated position. The wrapper sizes itself based on that original position. The transform shifts pixels visually, but the parent has no idea anything moved.</p>



<p>We surprised the browser.</p>



<h2 class="wp-block-heading" id="the-fix-reserve-the-space">The Fix: Reserve the Space</h2>



<p>The simplest solution is to add <code>padding-bottom</code> (or <code>padding-block-end</code>) to the wrapper, enough to accommodate the overshoot. The padding needs to match the translation: half the item height plus half the gap.</p>



<p>Since padding percentages reference the parent&#8217;s width (not the child&#8217;s height), we can&#8217;t use the same <code>50%</code> trick here. Instead, we store the item height as a variable:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.wrapper {
  --gap: 16px;
  --item-height: 100px;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 0 auto;
  max-width: 800px;
  padding-bottom: calc(var(--item-height) / 2 + var(--gap) / 2);
}

.item {
  border: 2px solid;
  height: var(--item-height);
}</code></pre>



<p>Now, I&#8217;ll be up front: <code>--item-height: 100px</code> is a hard-coded value. That&#8217;s the same kind of brittleness I flagged in the flexbox approach, where you need a fixed container height for wrapping to work. Both approaches ask you to know a dimension ahead of time. The difference here is that you&#8217;re locking down the item height rather than the container height, and the rest of the layout — column structure, gap math, source order — stays flexible. It&#8217;s a trade-off, not a deal-breaker, but it&#8217;s worth being honest about.</p>



<p>The wrapper now reserves exactly enough space at the bottom. No overflow. No surprises.</p>



<h2 class="wp-block-heading" id="a-note-on-accessibility">A Note on Accessibility</h2>



<p>This approach keeps items in their natural source order, and that matters more than it might seem at first glance.</p>



<p><strong>Screen readers are unaffected.</strong> Transforms are purely visual. The DOM order stays 1-6, and that&#8217;s exactly how assistive technology will announce them. No reordering surprises, unlike the flexbox column-wrap approach where the visual order and DOM order can diverge.</p>



<p><strong>Focus order stays intact, too.</strong> When someone tabs through the items, focus follows the source order, not where the items appear visually. In our zigzag, the visual flow and source order both cascade left-right, top-down, so they naturally agree. If your layout ever gets complex enough that visual and source order start to diverge, that&#8217;s when you&#8217;d need to think more carefully about focus management.</p>



<p><strong>Respect motion preferences.</strong> The zigzag itself is static — we&#8217;re not animating the transform. But if you ever decide to animate items into their staggered positions (say, on page load), wrap that animation in a <code>prefers-reduced-motion</code> check:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* animates when user has no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .item {
    animation: slide-in 0.3s ease-out both;
  }
}</code></pre>



<p>In this case, we&#8217;ve set it up so that users who have no preference on motion are the only ones who get the animation. Typically, though, <a href="https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/">you might do the inverse of that</a>. The layout still works either way.</p>



<h2 class="wp-block-heading" id="the-final-demo">The Final Demo</h2>



<p>Once again:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_azmzpVX" src="//codepen.io/anon/embed/azmzpVX?height=550&amp;theme-id=1&amp;slug-hash=azmzpVX&amp;default-tab=result" height="550" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed azmzpVX" title="CodePen Embed azmzpVX" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 class="wp-block-heading" id="conclusion">Conclusion</h2>



<p>The zigzag layout is really just three ideas stacked on top of each other:</p>



<ol class="wp-block-list">
<li>A two-column grid gives us the foundation.</li>



<li><code>translateY(50%)</code> creates the stagger and works because transform percentages reference the element itself, not the parent.</li>



<li><code>padding-bottom</code> reserves space for the translated items because transforms move pixels without telling the layout engine.</li>
</ol>



<p>Change the gap. Change the item height. Add more items. The zigzag holds.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/zigzag-css-grid-layouts/">Making Zigzag CSS Layouts With a Grid + Transform Trick</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm — a layout where items cascade diagonally, like water flowing down a waterfall.
This is the zigzag layout. And building it requires a small trick that reveals something fascinating about how CSS transforms actually work.




CodePen Embed Fallback
The Strategy
Before writing a single line of CSS, let’s think about approach.
The first idea that comes to mind: set up a flex container with flex-direction: column and flex-wrap: wrap, so items flow down and then wrap into a second column. Usually we think of the flex-wrap property in terms of rows, but the nice thing about flexbox is that it works in either orientation.
Two problems make this approach awkward:
You need a fixed height. You have to tell the container “you are 500px tall” for wrapping to kick in. That’s brittle.
The tab order breaks. Items flow down the first column (i.e., 1, 2, 3), then jump to the second column (i.e., 4, 5, 6). That’s not a waterfall. That’s two buckets.
To be fair, the CSS Grid approach we’re about to build has its own hardcoded value. We’ll get to that. But it sidesteps the Tab order problem entirely, and that’s a meaningful win.
The Grid Plan
Here’s what I want to do instead:
Create a two-column grid with items sitting side by side, nothing fancy.
Select every item in the second column, the even ones.
Shift them down by half of their own height to establish the staggered layout.
That shift is where the magic happens. Let’s build it.
The Grid
We start with a wrapper and five items. Nothing in the file yet, just a blank slate.
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.item {
  height: 100px;
  border: 2px solid;
}
We’re applying box-sizing: border-box globally because without it, the items aren’t actually 100px tall — they’re slightly taller once the border gets added. This will matter in a moment.
CodePen Embed Fallback
The Shift
Now the fun part. Let’s grab every even item and translate it down:
.item:nth-child(even of .item) {
  transform: translateY(50%);
}
A quick note on the selector. You might reach for .item:nth-of-type(even) here, and in this demo it would produce the same result since all the children are the same element type. But nth-of-type selects by tag name, not by class. So if you ever mix different element types inside the wrapper, it’ll match in ways you don’t expect. :nth-child(even of .item) is more precise because it explicitly filters by class, and it’s well-supported in modern browsers.
The zigzag emerges immediately. But let’s pause here, because something subtle is happening and it’s worth understanding.
CodePen Embed Fallback
Transform Percentages Are Different
Percentages in transforms work completely differently than they do anywhere else in CSS.
In flow layout, positioned layout, or really any layout mode, a percentage refers to the parent’s available space. If you write width: 50% on an element inside a wrapper, you’re saying: The container is this wide. Make me half of that.
Transforms don’t work this way. In a transform, percentages refer to the element itself. So translateY(50%) doesn’t mean “move down by half of the available space.” It means “move down by half of your own height.” If the element is 200px tall, it moves down by 100px.
This is actually the same coordinate-system behavior you see with the individual translate(), scale(), and rotate() CSS properties. All of them are applied in the element’s own coordinate space, post-layout. The browser finishes laying everything out first, including positions, sizes — basically the whole box model — and then applies the transform relative to the element itself. That’s why scale(2) grows outward from the element’s center, not from the top-left of the page.
This is exactly why the trick works. Each even item shifts down relative to its own size, not the container’s. The zigzag stays proportional no matter how tall the items are.
The result looks close. But it’s not quite right.
The Gap Problem
We can expose the imperfection by cranking the gap up to something absurd — say, 100px. When we do, the even items clearly aren’t sitting where they should. They need to travel a little further to account for the vertical space between rows.
Here’s the fix. First, let’s store the gap in a CSS custom property so we can reference it in multiple places:
.wrapper {
  --gap: 16px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: 800px;
  margin: 0 auto;
}

.item:nth-child(even of .item) {
  transform: translateY(calc(50% + var(--gap) / 2));
}
We translate by 50% of the element’s height plus half of the gap. We divide the gap by 2 because we only need to cover half the distance between rows — the full value would push it too far.
Set the gap to 16px, it looks great. Set it to 100px, it still looks great. The math holds regardless of the value.
CodePen Embed Fallback
The Overflow Surprise
We’ve solved the core puzzle. But there’s a hidden problem waiting to surface.
Let’s add a border to the wrapper to see its boundaries:
.wrapper {
  border: 2px solid red;
}
With five items, everything looks fine. The wrapper contains all of its children. No overflow. No issues.
Now add a sixth item:
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
The sixth item is even. It gets translated down. And it spills right out of the container.
CodePen Embed Fallback
Why? Because transforms don’t affect layout. As far as the browser’s layout engine is concerned, that sixth item is still sitting in its original, untranslated position. The wrapper sizes itself based on that original position. The transform shifts pixels visually, but the parent has no idea anything moved.
We surprised the browser.
The Fix: Reserve the Space
The simplest solution is to add padding-bottom (or padding-block-end) to the wrapper, enough to accommodate the overshoot. The padding needs to match the translation: half the item height plus half the gap.
Since padding percentages reference the parent’s width (not the child’s height), we can’t use the same 50% trick here. Instead, we store the item height as a variable:
.wrapper {
  --gap: 16px;
  --item-height: 100px;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 0 auto;
  max-width: 800px;
  padding-bottom: calc(var(--item-height) / 2 + var(--gap) / 2);
}

.item {
  border: 2px solid;
  height: var(--item-height);
}
Now, I’ll be up front: --item-height: 100px is a hard-coded value. That’s the same kind of brittleness I flagged in the flexbox approach, where you need a fixed container height for wrapping to work. Both approaches ask you to know a dimension ahead of time. The difference here is that you’re locking down the item height rather than the container height, and the rest of the layout — column structure, gap math, source order — stays flexible. It’s a trade-off, not a deal-breaker, but it’s worth being honest about.
The wrapper now reserves exactly enough space at the bottom. No overflow. No surprises.
A Note on Accessibility
This approach keeps items in their natural source order, and that matters more than it might seem at first glance.
Screen readers are unaffected. Transforms are purely visual. The DOM order stays 1-6, and that’s exactly how assistive technology will announce them. No reordering surprises, unlike the flexbox column-wrap approach where the visual order and DOM order can diverge.
Focus order stays intact, too. When someone tabs through the items, focus follows the source order, not where the items appear visually. In our zigzag, the visual flow and source order both cascade left-right, top-down, so they naturally agree. If your layout ever gets complex enough that visual and source order start to diverge, that’s when you’d need to think more carefully about focus management.
Respect motion preferences. The zigzag itself is static — we’re not animating the transform. But if you ever decide to animate items into their staggered positions (say, on page load), wrap that animation in a prefers-reduced-motion check:
/* animates when user has no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .item {
    animation: slide-in 0.3s ease-out both;
  }
}
In this case, we’ve set it up so that users who have no preference on motion are the only ones who get the animation. Typically, though, you might do the inverse of that. The layout still works either way.
The Final Demo
Once again:
CodePen Embed Fallback
Conclusion
The zigzag layout is really just three ideas stacked on top of each other:
A two-column grid gives us the foundation.
translateY(50%) creates the stagger and works because transform percentages reference the element itself, not the parent.
padding-bottom reserves space for the translated items because transforms move pixels without telling the layout engine.
Change the gap. Change the item height. Add more items. The zigzag holds.
Making Zigzag CSS Layouts With a Grid + Transform Trick originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm like, say, a zigzag pattern. Here's how to do it with CSS Grid.
Making Zigzag CSS Layouts With a Grid + Transform Trick originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Making Zigzag CSS Layouts With a Grid + Transform Trick

<p>Getting a multi-column of cards to line up equally is is a headache we've all faced, and it gets even harder when working with fixed heights.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/fixed-height-cards-more-fragile-than-they-look/">Fixed-Height Cards: More Fragile Than They Look</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Fixed-height cards often feel like a safe choice. A designer hands you a mockup where every card aligns perfectly in a grid. The titles are short, the excerpts fit neatly, and the layout looks stable across the entire page. So you implement the design exactly as specified and ship it.
Everything works until the content changes. An editor updates the copy, a translation adds longer words, and some users bump their default font size, especially those with low vision or digital eye strain, just to make things easier to read.
I ran into this while building a “Recent Articles” section for a blog. The design assumed relatively short English titles, so everything fit comfortably inside the fixed height.




The layout looked solid at first glance:
Initial design



But once the content changed, the cracks started appearing:




Translating the content to French made things worse:
Language issues



German translations pushed the layout even further:
More layout failures



What once looked like a stable component turned out to depend on a fragile assumption: that the content would always stay within a fixed height.
Here’s a demo of the layout:
CodePen Embed Fallback
Fixed-Height Layouts Look Fragile
In the design specifications, the pixel dimensions were exact, and you know that cards align more cleanly when they have the same vertical rhythm and equal size, which creates in our mind a sense of order that I and the designer kind of trusted.
So, I set:
.card__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__excerpt {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
But surprisingly, the behavior changed as soon as the font settings changed. I increased the browser’s default text size and realized that it introduced pressure inside the cards. My text blocks grew, but the container remained the same, and elements began competing for the same space.
Normally, a block element simply grows with its content. But the moment I set that height, I broke that relationship. The browser doesn’t treat this as a problem; it just resolves the conflict the only way it can, by either letting content overflow or clipping it.
In the original version of the layout, I just bluntly hid those problems with overflow: hidden.
To make the problem visible, we can remove the safety net:
.card__title {
  display: -webkit-box;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 8px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* overflow: hidden; */
}

.card__excerpt {
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 10px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
Without overflow: hidden, the failure is no longer subtle. The content stops clipping and starts spilling out like groceries from a torn bag. Some excerpts sit right on the tags, and everything was breaking once we stopped hiding the pressure inside the card.
Removing overflow: hidden reveals the structural tension instead of masking it.



Unfortunately, the browser has no way to reconcile those competing instructions except by letting elements collide.
Removing the Fixed Height
Removing the constraints that held this layout together reveals where the real problem lives. Fixed heights, absolute positioning, and grid alignment were all trying to control the same thing.
Absolutely Positioned Actions: Removed From Flow
Up to this point, the fixed height looks like the main culprit to me. But it isn’t acting alone; the actions at the bottom of the card were absolutely positioned:
.card__actions {
  position: absolute;
  inset: 0 14px 14px;
}
This feels like a clean solution; the actions stay pinned to the bottom of the card no matter how long the content is.
In a typical block layout, a container’s height is determined by the combined contribution of its in-flow children.
I’m sure you have seen how absolutely positioned elements behave. The browser still renders them, even though they no longer contribute to the parent’s intrinsic height. Visually, the actions belong to the card, structurally, the layout ignores them.
To compensate, we reserved space manually:
.card__body {
  padding-block-end: 14px;
}
This padding is really just an estimate. The moment the font size increases, buttons wrap, or translations make the text longer, the estimate stops being reliable.
Instead of trying to predict how much space the actions might need, we can let the browser calculate it.
Here is the same layout without absolute positioning:
CodePen Embed Fallback
The change is small, but the shift in behavior is quite noticeable. Even with the fixed height still in place, the internal tension shrinks because the layout is no longer working against itself.
This is the first structural improvement. The card still has an extrinsic height constraint, so the layout isn’t fully flexible yet.
Removing absolute positioning reduces internal layout tension, even before removing the fixed height.



There is an Illusion of Control
If fixed heights act like ceilings, line clamping acts more like a mute button. In the original component, I clamped the title and the excerpt:
.card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
Clamping feels reassuring to me at that time because it limits drift and keeps cards visually aligned. But in practice, that flips the relationship.
To really see this more clearly, let’s remove clamping while keeping everything else the same. This version is identical to the previous demo except that I have removed all clamping from .card__title and .card__excerpt but left the overflow so that we can clearly see what happens.
Removing clamping exposes how much content the layout was suppressing.



Without clamping, the tension inside the component becomes obvious. You see how German card grows taller, and the excerpt wraps naturally. What this really shows us is that a stable layout shouldn’t rely on overflow: hidden. If a layout only works because content is being suppressed, it’s probably fragile.
Up to this point, almost every failure we’ve seen traces back to a single decision:
.card {
  height: 375px;
}
This one line may look innocent to you, but it overrides the browser’s default sizing behavior.
At some point, the simplest question becomes unavoidable: So what happens if we just… stop? Remove the height entirely and let the browser do its thing?
Let’s remove the fixed height while keeping the rest of the layout intact. Clamping can stay in place since we want to compare behaviors.
CodePen Embed Fallback
Once I restored intrinsic sizing inside the card, the alignment problem really became a grid issue, which brings us to our next refinement.
Let the Grid Handle Equal Heights
Fixed heights felt appealing. But having equal heights doesn’t actually mean fixing the heights manually. The grid can handle that alignment for us without me imposing hard boundaries on each component.
Sometimes, the fix is surprisingly small. Removing align-items: start lets the grid items stretch naturally, and switching to a more flexible column definition helps the layout adapt better across different screen sizes.
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
See how the same layout uses intrinsic card heights and flexible grid tracks:
Grid normalizes alignment without imposing arbitrary height constraints.



To make the button nicely align like we had initially, instead of positioning and reserving space manually:
.card {
  padding: 14px;
  position: relative;
}
We turn the card into a vertical layout:
.card {
  display: flex;
  flex-direction: column;
  padding: 14px;
}
We’re not going to go deep on flexbox here, as Kevin Powell has a great article on exactly that. But it’s worth knowing what’s happening. Turning the card into a flex container with flex-direction: column lines everything up vertically from top to bottom.
The next step is removing the artificial space that was holding room for the actions:
.card__body {
  padding-block-end: 56px;
  padding-block-start: 10px;
}
That padding was a guess; it only worked as long as the content stayed predictable. Instead, we let the body expand naturally:
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block-start: 10px;
}
The flex: 1 tells the body to take up whatever space is left after the image, and the actions have taken what they need.
If the tags need a bit of breathing room, a simple margin does the job:
.card__tags {
  margin-block-end: 10px;
}
We get a card that looks just as aligned as in our original page, but now the alignment comes from layout flow, not from forcing the height.




Using clamp() for Fluid Typography
Fluid typography with clamp() can make titles scale more smoothly across viewport sizes:
.card__title {
  font-size: clamp(1rem, 2vw, 1.25rem);
}
If you want to know more about clamp(), Pedro Rodriguez’s article on scaling font size with CSS clamp() is a good read.
Declaring clamp(1rem, 2vw, 1.25rem) allows the title to scale with the viewport while staying within a safe range. The font size can grow or shrink with the viewport (2vw) but will never go smaller than 1rem or larger than 1.25rem.
Designing for Failure
None of the problems I mentioned earlier in this layout appeared while I was building it. The problems appeared only when some conditions changed. Sometimes an image didn’t load, which changed the vertical balance of the card. And as the viewport narrowed, the text had to wrap more aggressively.
If you want to know whether a component will hold up with real content, try putting it under extreme conditions. A few simple tweaks are enough to reveal where the layout starts to break or fall apart:
Increase the browser’s default font size to see how it behaves.
Enable text-only zoom instead of page zoom to observe the difference.
Replace a title with a single unbroken string or simulate other languages with longer words.
Simulate a missing image.
Shrink the viewport until the text starts wrapping aggressively.
Rather than explaining things abstractly, we can introduce them directly into the intrinsic-height version of the card.
Stress Test Mode
From the intrinsic-height version, we can add a simple toggle that simulates a few content stress cases.
Add this button inside the .demo-toolbar:
<button type="button" id="toggleStress">
  Toggle stress test
</button>
Add the following script, too:
const stressBtn = document.querySelector("#toggleStress");

stressBtn.addEventListener("click", () => {
  document.body.classList.toggle("stress");
});
This script simply listens for clicks on the button and adds or removes a stress class on the <body>. That class acts as a switch that turns the stress-test styles on and off.
And add these styles:
body.stress .card:nth-child(1) .card__title::after {
  content: "ExtremelyLongUnbrokenStringWithoutAnySpacesToTestOverflowBehavior";
}

body.stress .card:nth-child(2) .card__excerpt {
  font-size: 1.1rem;
}

body.stress .card__media img {
  display: none;
}
These styles simulate a few common layout stress cases. The first card gets an unbroken string to test overflow behavior. The second increases text size to mimic larger default font settings. The rule on .card__media img hides media entirely to simulate a missing or failed image load.
CodePen Embed Fallback
This stability isn’t coming from the defensive rules I added at the end. It comes from the earlier structural decisions. Once fixed heights and out-of-flow positioning were removed, the component could adapt naturally to whatever content it receives.
Once you start relying on intrinsic sizing, you stop worrying about every possible string length or font setting. If the content gets longer or the text size changes, the browser can handle it. Most layout problems start when we take that flexibility away.
So, What Grows and What Doesn’t?
The original card failed for a simple reason: it depended on assumptions that were never stated. The title was supposed to fit in two lines, the excerpt was supposed to fit in four and buttons were supposed to stay on one line. Translations were supposed to stay “about the same length” and users were supposed to keep default text settings. None of that was enforced. They were simply guesses.
Those assumptions quietly made their way into my CSS. As long as the content stayed within those boundaries, everything kind of looked stable. But the moment it drifted, the layout started responding badly to the conflict.
When I rebuilt this component, the first thing I did was remove those hidden dependencies. There’s no fixed pixel ceiling anymore, no padding buffer that needs me to constantly tweak, and no truncation acting as a safety net to keep the layout from breaking.
Truncation can still be a deliberate design choice. But you shouldn’t truncate just to keep the layout from collapsing. When that happens, the component is already under strain.
The final demo shows that idea in practice. It loads stressed content by default, with longer translated text, wrapped tags, and a missing image, so that you can see how the component behaves under real conditions rather than ideal ones.
CodePen Embed Fallback
Each card grows as needed, and the grid keeps alignment without hiding overflow or relying on defensive spacing.
I Think Fixed Heights Are Still Useful
Working through this layout changed how I think about fixed heights. I still use them when they make sense, and I still clamp text when truncation is intentional. But whenever I find myself trying to control how content flows inside a component, it’s usually a sign that the layout needs to be reconsidered. Most of the time, letting the browser handle the sizing leads to a more resilient result.
Fixed-Height Cards: More Fragile Than They Look originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Getting a multi-column of cards to line up equally is is a headache we've all faced, and it gets even harder when working with fixed heights.
Fixed-Height Cards: More Fragile Than They Look originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Fixed-Height Cards: More Fragile Than They Look

<p>Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing image sources using the content property, and more. This is What’s !important #10.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-10/">What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing <code>img</code> <code>src</code>s using <code>content</code>, and more. This is <strong>What’s !important #10</strong>.</p>



<span id="more-394456"></span>



<h3 id="htmlincanvas-experiments" class="wp-block-heading">HTML-in-Canvas experiments</h3>



<p>HTML-in-Canvas, a new API that enables us to render real semantic HTML in a <code>&lt;canvas&gt;</code> with visual effects, is the talk of the town right now, so let’s lead with that. <a href="https://css-tricks.com/author/amitsheen/">Amit Sheen</a> showed us <a href="https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/" rel="noopener">how the HTML-in-Canvas API works</a>, and also created some <a href="https://hicshowroom.com/" rel="noopener">demos over at the HiC Showroom</a>, like this one (requires Chrome 146 with the <code>chrome://flags/#canvas-draw-element</code> flag enabled):</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_dPpQmGv/42adf6e00961d1c6e5b890a30ef6e5ae" src="//codepen.io/anon/embed/dPpQmGv/42adf6e00961d1c6e5b890a30ef6e5ae?height=450&amp;theme-id=1&amp;slug-hash=dPpQmGv/42adf6e00961d1c6e5b890a30ef6e5ae&amp;default-tab=html,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed dPpQmGv/42adf6e00961d1c6e5b890a30ef6e5ae" title="CodePen Embed dPpQmGv/42adf6e00961d1c6e5b890a30ef6e5ae" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h3 id="building-a-hexagonal-world-mapanalytics-feature" class="wp-block-heading">Building a hexagonal world map-analytics feature</h3>



<p>Ben Schwarz (awesome name, but no relation) talked about <a href="https://calibreapp.com/blog/building-our-beloved-hex-map" rel="noopener">building a hexagonal world map-analytics feature</a>. While it’s more of a retrospective than a developer walkthrough, it’s a <em>really</em> interesting read about analytics, design constraints, inspiration, engineering, and of course SVG and CSS.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1760" height="990" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=1760%2C990&#038;ssl=1" alt="A world map composed of small hexagons colored in orange, green, and red." class="wp-image-394491" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?w=1760&amp;ssl=1 1760w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=300%2C169&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=1024%2C576&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=768%2C432&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=1536%2C864&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">Source: <a href="https://calibreapp.com/blog/building-our-beloved-hex-map" rel="noopener">Calibre</a>.</figcaption></figure>



<h3 id="rekindle-a-webbased-os-for-eink-devices" class="wp-block-heading">Rekindle — a web-based OS for e-ink devices</h3>



<p><a href="https://rekindle.ink/" rel="noopener">Rekindle</a> is basically a web-based operating system for e-ink devices like Kindle, Kobo, and Boox, which are often low-powered with few features. Rekindle includes an insane number of features and apps, and is designed in black-and-white, with no animations, and no doubt with many more e-ink optimizations.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2560" height="1606" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=2560%2C1606&#038;ssl=1" alt="A black and white user interface for Rekindle that primarily shows a grid of app icons." class="wp-image-394492" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?w=2560&amp;ssl=1 2560w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=1024%2C642&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=768%2C482&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=1536%2C963&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/2-scaled.png?resize=2048%2C1285&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>The takeaway isn’t a tutorial (unfortunately) or even some commentary (like with the world map retrospective above), it’s that we have a whole bunch of media queries that’d be so useful for e-ink devices if it weren’t for the fact that they’re shipping with low-powered, proprietary web browsers that don’t recognize them. <a href="https://www.w3.org/TR/mediaqueries-5/" rel="noopener">Media Queries Level 5</a> can query hover capability, the precision of pointers, display update frequency, color depth, monochromatic bit-depth, color index size, dynamic range, and more, probably.</p>



<p>Thoughts? Is e-ink optimization likely to break out in the coming years, or is low demand for these media queries why a dedicated service like Rekindle needs to exist? It’s worth noting that the browsers and many of the media queries are in active development, so I don’t know. Watch this space, maybe?</p>



<p>Either way, I’d love to see a dev deep dive on Rekindle!</p>



<h3 id="replacing-img-srcs-using-content" class="wp-block-heading">Replacing <code>img</code> <code>src</code>s using <code>content</code></h3>



<p><a href="https://bsky.app/profile/scrwd.mastodon.social.ap.brid.gy/post/3mjwgpvgy7k32" rel="noopener">Jon discovered</a> that CSS can be used to replace image sources, like this:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;img src="image.png" alt="Alt text"></code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">img {
  content: url(new-image.png) / "New alt text";
}</code></pre>



<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:wjkfbooeb4bmapfc2op7eeza/app.bsky.feed.post/3mjwgpvgy7k32" data-bluesky-cid="bafyreifcnpfsgjnbzi2x5kpbzrb7six3zsrupp2vqovedyrf2y3dvziizi" data-bluesky-embed-color-mode="system"><p lang="en">TIL! Who knew you could change the &quot;src&quot; of an #HTML &lt;img&gt; using #CSS:

img { content: url(whatever.png) }

NO PSEUDOS!

<iframe title="Untitled" id="cp_embed_MYjRQje" src="https://codepen.io/jon/embed/preview/MYjRQje?default-tabs=html%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=MYjRQje" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;"></iframe>

Seems to work in all current browsers too. How did I miss this?</p>&mdash; Jon (<a href="https://bsky.app/profile/did:plc:wjkfbooeb4bmapfc2op7eeza?ref_src=embed" rel="noopener">@scrwd.mastodon.social.ap.brid.gy</a>) <a href="https://bsky.app/profile/did:plc:wjkfbooeb4bmapfc2op7eeza/post/3mjwgpvgy7k32?ref_src=embed" rel="noopener">Apr 20, 2026 at 13:09</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>



<p>It’s really interesting to learn this about the <a href="https://css-tricks.com/almanac/properties/c/content/"><code>content</code></a> property, which has been Baseline for 11 years now. I experimented a bit more and discovered that this trick also works with the <a href="https://css-tricks.com/almanac/functions/i/image-set/"><code>image-set()</code></a> function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">img {
  content: image-set(
    url("image.png") 1x,
    url("image-2x.png") 2x
  );
}</code></pre>



<p>So if you’re working on a website with non-responsive <code>&lt;img&gt;</code>s and no way to change the markup, write the logic in CSS instead.</p>



<h3 id="implementing-responsive-images-with-sizesauto" class="wp-block-heading">Implementing responsive images with <code>sizes=auto</code></h3>



<p>Having said that, if you <em>do</em> have access to the HTML, you’ll want to serve responsive images using the <code>srcset</code> and <code>sizes</code> HTML attributes. <a href="https://css-tricks.com/author/wilto/">Mat Marquis</a> demonstrated <a href="https://piccalil.li/blog/the-end-of-responsive-images/" rel="noopener">how the new <code>sizes=auto</code> attribute-value combination replaces responsive breakpoints for images that are loaded lazily</a>.</p>



<p>If you’re interested, Amit Sheen also talked about <a href="https://frontendmasters.com/blog/building-a-ui-without-breakpoints/" rel="noopener">building layouts (not necessarily images) without breakpoints</a>.</p>



<h3 id="new-web-platform-features-and-updates" class="wp-block-heading">New web platform features and updates</h3>



<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150" rel="noopener">Firefox 150</a>
<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:muted" rel="noopener"><code>:muted</code></a> and all other media-based pseudo-classes (no Chrome support)</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/revert-rule" rel="noopener"><code>revert-rule</code></a> (no Safari support)</li>



<li><a href="https://piccalil.li/blog/the-end-of-responsive-images/" rel="noopener"><code>sizes=auto</code></a> (no Safari support)</li>



<li><a href="https://css-tricks.com/almanac/functions/l/light-dark/"><code>light-dark()</code></a> with image support (no Chrome/Safari support)</li>



<li><a href="https://css-tricks.com/almanac/functions/c/color-mix/"><code>color-mix()</code></a> with the syntax for two or more colors (no Chrome/Safari support)</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaNotify" rel="noopener"><code>ariaNotify()</code></a> (no Chrome/Safari support)</li>
</ul>
</li>



<li><a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-242" rel="noopener">Safari TP 242</a>
<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby" rel="noopener"><code>closedby</code></a></li>



<li>Advanced <a href="https://css-tricks.com/almanac/functions/a/attr/"><code>attr()</code></a> (no Firefox support)</li>
</ul>
</li>
</ul>



<p>If you’re keen for more content, here’s Wes Bos and Scott Tolinski of Syntax.fm discussing <a href="https://www.youtube.com/watch?v=unqPqGeJMck" rel="noopener">10 new CSS and HTML APIs</a>:</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="10 New CSS and HTML APIs" width="500" height="281" src="https://www.youtube.com/embed/unqPqGeJMck?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>Until next time!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-10/">What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing img srcs using content, and more. This is What’s !important #10.




HTML-in-Canvas experiments
HTML-in-Canvas, a new API that enables us to render real semantic HTML in a <canvas> with visual effects, is the talk of the town right now, so let’s lead with that. Amit Sheen showed us how the HTML-in-Canvas API works, and also created some demos over at the HiC Showroom, like this one (requires Chrome 146 with the chrome://flags/#canvas-draw-element flag enabled):
CodePen Embed Fallback
Building a hexagonal world map-analytics feature
Ben Schwarz (awesome name, but no relation) talked about building a hexagonal world map-analytics feature. While it’s more of a retrospective than a developer walkthrough, it’s a really interesting read about analytics, design constraints, inspiration, engineering, and of course SVG and CSS.
Source: Calibre.



Rekindle — a web-based OS for e-ink devices
Rekindle is basically a web-based operating system for e-ink devices like Kindle, Kobo, and Boox, which are often low-powered with few features. Rekindle includes an insane number of features and apps, and is designed in black-and-white, with no animations, and no doubt with many more e-ink optimizations.




The takeaway isn’t a tutorial (unfortunately) or even some commentary (like with the world map retrospective above), it’s that we have a whole bunch of media queries that’d be so useful for e-ink devices if it weren’t for the fact that they’re shipping with low-powered, proprietary web browsers that don’t recognize them. Media Queries Level 5 can query hover capability, the precision of pointers, display update frequency, color depth, monochromatic bit-depth, color index size, dynamic range, and more, probably.
Thoughts? Is e-ink optimization likely to break out in the coming years, or is low demand for these media queries why a dedicated service like Rekindle needs to exist? It’s worth noting that the browsers and many of the media queries are in active development, so I don’t know. Watch this space, maybe?
Either way, I’d love to see a dev deep dive on Rekindle!
Replacing img srcs using content
Jon discovered that CSS can be used to replace image sources, like this:
<img src="image.png" alt="Alt text">
img {
  content: url(new-image.png) / "New alt text";
}
TIL! Who knew you could change the "src" of an #HTML <img> using #CSS:

img { content: url(whatever.png) }

NO PSEUDOS!



Seems to work in all current browsers too. How did I miss this?
— Jon (@scrwd.mastodon.social.ap.brid.gy) Apr 20, 2026 at 13:09




It’s really interesting to learn this about the content property, which has been Baseline for 11 years now. I experimented a bit more and discovered that this trick also works with the image-set() function:
img {
  content: image-set(
    url("image.png") 1x,
    url("image-2x.png") 2x
  );
}
So if you’re working on a website with non-responsive <img>s and no way to change the markup, write the logic in CSS instead.
Implementing responsive images with sizes=auto
Having said that, if you do have access to the HTML, you’ll want to serve responsive images using the srcset and sizes HTML attributes. Mat Marquis demonstrated how the new sizes=auto attribute-value combination replaces responsive breakpoints for images that are loaded lazily.
If you’re interested, Amit Sheen also talked about building layouts (not necessarily images) without breakpoints.
New web platform features and updates
Firefox 150

:muted and all other media-based pseudo-classes (no Chrome support)
revert-rule (no Safari support)
sizes=auto (no Safari support)
light-dark() with image support (no Chrome/Safari support)
color-mix() with the syntax for two or more colors (no Chrome/Safari support)
ariaNotify() (no Chrome/Safari support)
Safari TP 242

closedby
Advanced attr() (no Firefox support)
If you’re keen for more content, here’s Wes Bos and Scott Tolinski of Syntax.fm discussing 10 new CSS and HTML APIs:






Until next time!
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing image sources using the content property, and more. This is What’s !important #10.
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More

<p>We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/the-importance-of-native-randomness-in-css/">The Importance of Native Randomness in CSS</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>Recently, I published a <a href="https://alvaromontoro.com/blog/68092/native-random-values-in-css" rel="noopener">story about the new random functions that have landed in CSS</a> and how they work. In this article, we’ll explore the challenges of randomness in CSS, how the concept has evolved over time, and why this native feature is a big deal.</p>



<p>One of the first things I wanted to do when I started developing websites was create unique experiences that changed from person to person. Just little things: a random background here, random colors there… Even small micro-interactions, like confetti or falling snow, needed some level of randomness to feel natural.</p>



<p>And I was not alone! I soon discovered that many web developers (“webmasters,” at the time) wanted to do things like that: adding wow factors and a sense of uniqueness to their sites. But we had a problem: CSS.</p>



<p>CSS is a declarative and deterministic language. Two characteristics that clash with the idea of natural variation:</p>



<ul class="wp-block-list">
<li><strong>Declarative</strong> means that it focuses on the <em>what</em>, not the <em>how</em>. In contrast to imperative languages, developers using CSS tell the browser what the expected result is, but not how to achieve it.</li>



<li><strong>Deterministic</strong> means that for a given input we will get the same output. Always the same. If you specify that a color will be red, that color will be red, not blue or yellow.</li>
</ul>



<p>This is by design, and it’s one of the things that makes CSS predictable and reliable. If you understand how the layout engine works, you can tell which styles will be applied at any given time. Which is great… but not so great if you want to generate random content.</p>



<p>And so began a challenging (and sometimes tortuous) journey for designers and developers to achieve natural variation from a deterministic system.</p>



<span id="more-393373"></span>



<h3 class="wp-block-heading" id="the-long-and-winding-road-to-random-styles">The Long and Winding Road to Random Styles</h3>



<p>The path to random styles in CSS is paved with multiple attempts and shortcomings. But at every step along the way, developers found new solutions that improved on the previous ones. Even if only a little.</p>



<p><strong>Note:</strong> This timeline reflects logical progress more than a strict historical or chronological order.</p>



<h4 class="wp-block-heading" id="css-pseudo-randomness-and-patterns">CSS Pseudo-Randomness and Patterns</h4>



<p>We can simulate randomness in CSS by creating patterns. But this is not truly random. The results will always be the same, and sooner or later people will notice the pattern.</p>



<p>One way to create this simulation is by using <a href="https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/"><code>:nth-child()</code></a> selectors or by playing with animations. The first method is easy but yields subpar results; the second may trick and impress some people.</p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary><strong>Warning:</strong> Auto-playing media</summary>
<figure class="wp-block-image size-full ticss-3ca19010"><img data-recalc-dims="1" loading="lazy" decoding="async" width="400" height="460" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1774042970501_random-0.webp?resize=400%2C460" alt="Animated illustrated of five numbered cards swapping positions with the first card moving toward the back in succession." class="wp-image-393374" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1774042970501_random-0.webp?w=400&amp;ssl=1 400w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1774042970501_random-0.webp?resize=261%2C300&amp;ssl=1 261w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption"><strong>Credit:</strong> Alvaro Montoro</figcaption></figure>
</details>



<p>Needless to say, these methods are hacks that don’t provide randomization at any level. A human may not be able to precisely predict which value comes next — at least not without some effort — but a machine certainly can.</p>



<h4 class="wp-block-heading" id="pre-processors-to-the-rescue">Pre-Processors to the Rescue</h4>



<p>We turned to the next best thing: tooling. In particular, CSS preprocessors such as Sass, SCSS, Less, and the like. These tools include math modules that provide random functions we can use at compilation time.</p>



<p>The key phrase in the previous paragraph is “<strong>at compilation time.</strong>” Yes, we are generating random values for our CSS properties. But once those values are produced during compilation, they are frozen forever (or until the next compilation, to be more precise). Just like a mosquito stuck in amber.</p>



<p>The values will be random when the CSS is generated, but every time visitors visit or refresh the page, they will get the same ones. To produce new values, we would need to recompile the stylesheets.</p>



<p>This was a baby step toward styling randomization, but there was still a long way to go.</p>



<h4 class="wp-block-heading" id="server-side-randomness">Server-Side Randomness</h4>



<p>We moved to the next best thing: using other languages to generate random values and passing them to CSS through HTML. Server-side languages like PHP, Java, ASP, and others were perfect for this task while generating the HTML (or even the CSS itself).</p>



<p>This approach works well: we get new random values every time the page is generated, which usually means every time it is visited or refreshed. We also have full control over the randomization, since we can implement our own functions.</p>



<p>It has shortcomings, too. If new content is added dynamically to the page, it gets stuck with the “frozen” values generated during the initial page load. Better than patterns, better than preprocessors… but still not perfect.</p>



<p>This limitation became an even bigger problem with the rise and widespread adoption of single-page applications and client-side JavaScript architectures.</p>



<h4 class="wp-block-heading" id="and-javascript-finally-">And JavaScript&#8230; Finally!</h4>



<p>With the proliferation of web applications, it made sense to move randomness to JavaScript. The language is already heavily used, and adding a few random functions to the mix doesn’t seem like a big stretch.</p>



<p>And JavaScript finally solved it! For the first time, styles could actually behave with natural variation: random on creation, on refresh, and even on mutation.</p>



<p>It can be done in many ways, too: using frameworks, CSS-in-JS libraries, or plain vanilla JavaScript. The methods to incorporate styling through this language are vast and well supported. There are some performance and complexity concerns, but JavaScript gets the job done.</p>



<p>We finally had true randomization in web styles… just not in CSS itself.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1098" height="568" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1AN3S3F-_uTESNck1us4Hkg.png?resize=1098%2C568" alt="Summary of the different technologies and how they handle randomization" class="wp-image-393376" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1AN3S3F-_uTESNck1us4Hkg.png?w=1098&amp;ssl=1 1098w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1AN3S3F-_uTESNck1us4Hkg.png?resize=300%2C155&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1AN3S3F-_uTESNck1us4Hkg.png?resize=1024%2C530&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1AN3S3F-_uTESNck1us4Hkg.png?resize=768%2C397&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<h3 class="wp-block-heading" id="a-web-problem-and-a-web-solution">A Web Problem, and a Web Solution</h3>



<p>That last part is important. We have randomization on the web (JavaScript gets the job done) but something feels off. Something doesn’t quite feel right. At its core, that discomfort comes from two things:</p>



<ul class="wp-block-list">
<li>We are applying an imperative solution to a declarative problem.</li>



<li>We are moving layout decisions from CSS to JavaScript.</li>
</ul>



<h4 class="wp-block-heading" id="an-imperative-solution-to-a-declarative-problem">An Imperative Solution to a Declarative Problem</h4>



<p>We mentioned earlier that CSS is a declarative language that focuses on the <em>what</em>, while JavaScript is an imperative language that focuses on the <em>how</em>.</p>



<p>By moving randomization to JavaScript, we are trying to answer a <em>what</em> question with a <em>how</em> answer. It works, but it’s not ideal.</p>



<p>Using JavaScript, we finally achieved style randomness at all levels: when the page is created, when it is refreshed, and when elements are added or changed (mutation). But in doing so, we are breaking the model.</p>



<p>CSS handles layout, and JavaScript handles logic. We solved a CSS limitation by moving layout decisions into JavaScript, creating a mismatch that produces that subtle “this isn’t quite right” feeling — even when everything technically works.</p>



<h4 class="wp-block-heading" id="the-css-solution">The CSS Solution</h4>



<p>The solution to this model mismatch is simple: <strong>move randomization to CSS</strong>. Solve a layout problem directly in the layout layer instead of delegating it to a different tool or language. And this happened with the introduction of two new random functions as part of the <a href="https://www.w3.org/TR/css-values-5/#randomness" rel="noopener">CSS Values and Units Module Level 5</a>:</p>



<ul class="wp-block-list">
<li><strong><code>random()</code>:</strong> generates a random value between a minimum and a maximum.</li>



<li><strong><code>random-item()</code>:</strong> selects a random value from a given list.</li>
</ul>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1324" height="596" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1775479621638_image.png?resize=1324%2C596&#038;ssl=1" alt="Showing a CSS code snippet of the random and random-item functions." class="wp-image-393378" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1775479621638_image.png?w=1324&amp;ssl=1 1324w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1775479621638_image.png?resize=300%2C135&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1775479621638_image.png?resize=1024%2C461&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/s_CE13D78A2D1C5E5CFBD3EBB73274C0516735336AF6D86F2BD275A2E87DE47B98_1775479621638_image.png?resize=768%2C346&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>This approach also aligns with the <a href="https://www.w3.org/2001/tag/doc/leastPower.html" rel="noopener"><strong>Rule of Least Power</strong></a>, which suggests choosing the least powerful language suitable for a given purpose. In practice, this means solving a problem using the least powerful language capable of expressing and solving it.</p>



<p>Usually, that language will be better suited to the task. Its features will be adapted to the level at which they are applied, making them simpler, more efficient, and better performing. While a more powerful language can certainly do the job, it often introduces an unnecessary layer of complexity and abstraction.</p>



<p>On the web platform, we have <strong>HTML</strong> for structure (least powerful), <strong>CSS</strong> for styling and layout (more powerful), and <strong>JavaScript</strong> (significantly more powerful). By implementing randomization in CSS, we move the solution to the appropriate layer while also following the Rule of Least Power.</p>



<p>And that’s one of the reasons the new random CSS features are such a big deal… and why they represent something much bigger than just <em>another feature</em>.</p>



<h3 class="wp-block-heading" id="the-big-deal">The Big Deal</h3>



<p>CSS has always been deterministic by design, and native randomness breaks with that tradition. It isn’t just another feature, it represents a shift in how we think about CSS as a language and about the web platform itself.</p>



<p>For the first time, CSS can model natural systems with variation directly: no hacks, no tools, no outsourcing layout decisions to other languages. Randomization takes an honored place in the styling layer, where it always belonged.</p>



<p>This unlocks creative possibilities: generative layouts, organic patterns, playful micro-interactions, and design systems that feel alive and unique. But it also restores architectural clarity: each layer of the web once again does the job it was designed for.</p>



<p>With this change, CSS moves from being purely a styling language toward becoming a generative layout system. It is no longer just a passive actor in web development; it becomes an active participant in the rendering process, defining a space of possible outcomes that the browser resolves into a concrete page.</p>



<p>And that’s the real big deal. Native randomness isn’t just about making things look different; it’s about making the platform more coherent and expressive.</p>



<p>It’s also a reminder that CSS is still evolving, and that sometimes the features people overlook can reshape how we think about a language, and what we imagine is possible on the web.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/the-importance-of-native-randomness-in-css/">The Importance of Native Randomness in CSS</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Recently, I published a story about the new random functions that have landed in CSS and how they work. In this article, we’ll explore the challenges of randomness in CSS, how the concept has evolved over time, and why this native feature is a big deal.
One of the first things I wanted to do when I started developing websites was create unique experiences that changed from person to person. Just little things: a random background here, random colors there… Even small micro-interactions, like confetti or falling snow, needed some level of randomness to feel natural.
And I was not alone! I soon discovered that many web developers (“webmasters,” at the time) wanted to do things like that: adding wow factors and a sense of uniqueness to their sites. But we had a problem: CSS.
CSS is a declarative and deterministic language. Two characteristics that clash with the idea of natural variation:
Declarative means that it focuses on the what, not the how. In contrast to imperative languages, developers using CSS tell the browser what the expected result is, but not how to achieve it.
Deterministic means that for a given input we will get the same output. Always the same. If you specify that a color will be red, that color will be red, not blue or yellow.
This is by design, and it’s one of the things that makes CSS predictable and reliable. If you understand how the layout engine works, you can tell which styles will be applied at any given time. Which is great… but not so great if you want to generate random content.
And so began a challenging (and sometimes tortuous) journey for designers and developers to achieve natural variation from a deterministic system.




The Long and Winding Road to Random Styles
The path to random styles in CSS is paved with multiple attempts and shortcomings. But at every step along the way, developers found new solutions that improved on the previous ones. Even if only a little.
Note: This timeline reflects logical progress more than a strict historical or chronological order.
CSS Pseudo-Randomness and Patterns
We can simulate randomness in CSS by creating patterns. But this is not truly random. The results will always be the same, and sooner or later people will notice the pattern.
One way to create this simulation is by using :nth-child() selectors or by playing with animations. The first method is easy but yields subpar results; the second may trick and impress some people.
Warning: Auto-playing media
Credit: Alvaro Montoro




Needless to say, these methods are hacks that don’t provide randomization at any level. A human may not be able to precisely predict which value comes next — at least not without some effort — but a machine certainly can.
Pre-Processors to the Rescue
We turned to the next best thing: tooling. In particular, CSS preprocessors such as Sass, SCSS, Less, and the like. These tools include math modules that provide random functions we can use at compilation time.
The key phrase in the previous paragraph is “at compilation time.” Yes, we are generating random values for our CSS properties. But once those values are produced during compilation, they are frozen forever (or until the next compilation, to be more precise). Just like a mosquito stuck in amber.
The values will be random when the CSS is generated, but every time visitors visit or refresh the page, they will get the same ones. To produce new values, we would need to recompile the stylesheets.
This was a baby step toward styling randomization, but there was still a long way to go.
Server-Side Randomness
We moved to the next best thing: using other languages to generate random values and passing them to CSS through HTML. Server-side languages like PHP, Java, ASP, and others were perfect for this task while generating the HTML (or even the CSS itself).
This approach works well: we get new random values every time the page is generated, which usually means every time it is visited or refreshed. We also have full control over the randomization, since we can implement our own functions.
It has shortcomings, too. If new content is added dynamically to the page, it gets stuck with the “frozen” values generated during the initial page load. Better than patterns, better than preprocessors… but still not perfect.
This limitation became an even bigger problem with the rise and widespread adoption of single-page applications and client-side JavaScript architectures.
And JavaScript… Finally!
With the proliferation of web applications, it made sense to move randomness to JavaScript. The language is already heavily used, and adding a few random functions to the mix doesn’t seem like a big stretch.
And JavaScript finally solved it! For the first time, styles could actually behave with natural variation: random on creation, on refresh, and even on mutation.
It can be done in many ways, too: using frameworks, CSS-in-JS libraries, or plain vanilla JavaScript. The methods to incorporate styling through this language are vast and well supported. There are some performance and complexity concerns, but JavaScript gets the job done.
We finally had true randomization in web styles… just not in CSS itself.




A Web Problem, and a Web Solution
That last part is important. We have randomization on the web (JavaScript gets the job done) but something feels off. Something doesn’t quite feel right. At its core, that discomfort comes from two things:
We are applying an imperative solution to a declarative problem.
We are moving layout decisions from CSS to JavaScript.
An Imperative Solution to a Declarative Problem
We mentioned earlier that CSS is a declarative language that focuses on the what, while JavaScript is an imperative language that focuses on the how.
By moving randomization to JavaScript, we are trying to answer a what question with a how answer. It works, but it’s not ideal.
Using JavaScript, we finally achieved style randomness at all levels: when the page is created, when it is refreshed, and when elements are added or changed (mutation). But in doing so, we are breaking the model.
CSS handles layout, and JavaScript handles logic. We solved a CSS limitation by moving layout decisions into JavaScript, creating a mismatch that produces that subtle “this isn’t quite right” feeling — even when everything technically works.
The CSS Solution
The solution to this model mismatch is simple: move randomization to CSS. Solve a layout problem directly in the layout layer instead of delegating it to a different tool or language. And this happened with the introduction of two new random functions as part of the CSS Values and Units Module Level 5:
random(): generates a random value between a minimum and a maximum.
random-item(): selects a random value from a given list.




This approach also aligns with the Rule of Least Power, which suggests choosing the least powerful language suitable for a given purpose. In practice, this means solving a problem using the least powerful language capable of expressing and solving it.
Usually, that language will be better suited to the task. Its features will be adapted to the level at which they are applied, making them simpler, more efficient, and better performing. While a more powerful language can certainly do the job, it often introduces an unnecessary layer of complexity and abstraction.
On the web platform, we have HTML for structure (least powerful), CSS for styling and layout (more powerful), and JavaScript (significantly more powerful). By implementing randomization in CSS, we move the solution to the appropriate layer while also following the Rule of Least Power.
And that’s one of the reasons the new random CSS features are such a big deal… and why they represent something much bigger than just another feature.
The Big Deal
CSS has always been deterministic by design, and native randomness breaks with that tradition. It isn’t just another feature, it represents a shift in how we think about CSS as a language and about the web platform itself.
For the first time, CSS can model natural systems with variation directly: no hacks, no tools, no outsourcing layout decisions to other languages. Randomization takes an honored place in the styling layer, where it always belonged.
This unlocks creative possibilities: generative layouts, organic patterns, playful micro-interactions, and design systems that feel alive and unique. But it also restores architectural clarity: each layer of the web once again does the job it was designed for.
With this change, CSS moves from being purely a styling language toward becoming a generative layout system. It is no longer just a passive actor in web development; it becomes an active participant in the rendering process, defining a space of possible outcomes that the browser resolves into a concrete page.
And that’s the real big deal. Native randomness isn’t just about making things look different; it’s about making the platform more coherent and expressive.
It’s also a reminder that CSS is still evolving, and that sometimes the features people overlook can reshape how we think about a language, and what we imagine is possible on the web.
The Importance of Native Randomness in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.
The Importance of Native Randomness in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The Importance of Native Randomness in CSS

<p>The <code>contrast()</code> filter function increases or decreases the contrast of an element.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/c/contrast/">contrast()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>The CSS <code>contrast()</code> filter function increases or decreases the contrast of an element, either making colors pop out more or dulling them to gray. Unlike other <code><a href="https://css-tricks.com/almanac/properties/f/filter/">filter</a></code> functions like <code><a href="https://css-tricks.com/almanac/functions/b/brightness/">brightness()</a></code> or <code>saturate()</code>, <code>contrast()</code> affects both saturation and lightness, keeping only the color&#8217;s hue.</p>



<span id="more-392899"></span>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.low {
  filter: contrast(50%);
}

.normal {
  filter: contrast(100%);
}

.high {
  filter: contrast(200%);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ByLQzRJ" src="//codepen.io/anon/embed/ByLQzRJ?height=600&amp;theme-id=1&amp;slug-hash=ByLQzRJ&amp;default-tab=result" height="600" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ByLQzRJ" title="CodePen Embed ByLQzRJ" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>The&nbsp;<code>contrast()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/filter-effects/#funcdef-filter-contrast" rel="noopener">Filter Effects Module Level 1</a>&nbsp;specification.</p>



<h3 class="wp-block-heading" id="syntax">Syntax</h3>



<p>The official syntax for the&nbsp;<code>contrast()</code>&nbsp;function is:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;contrast()> = contrast( [ &lt;number> | &lt;percentage> ]? )</code></pre>



<p>Or simply:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">filter: contrast(&lt;amount>);</code></pre>



<p>The <code>contrast()</code> function is only compatible with the CSS <code><a href="https://css-tricks.com/almanac/properties/f/filter/">filter</a></code> and <code><a href="https://css-tricks.com/almanac/properties/b/backdrop-filter/">backdrop-filter</a></code> properties.</p>



<h3 class="wp-block-heading" id="argument">Arguments</h3>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Works with CSS variables */
--amount: 200%;
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */</code></pre>



<p>The <code>contrast()</code> function takes a single argument, which can be a positive decimal or percentage value. The argument determines the new contrast for the element, where:</p>



<ul class="wp-block-list">
<li><code>0</code>&nbsp;or&nbsp;<code>0%</code>&nbsp;dries out all contrast from the element, resulting in a completely gray image.</li>



<li><code>1</code>&nbsp;or&nbsp;<code>100%</code>&nbsp;leaves the element completely unchanged.</li>



<li>Values above&nbsp;<code>1</code>&nbsp;or&nbsp;<code>100%</code>&nbsp;increase the contrast linearly.</li>
</ul>



<p>Negative values aren&#8217;t allowed. But CSS variables are:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.element {
  --filter-amount: 150%;
  filter: contrast(var(--filter-amount));
}</code></pre>



<h3 class="wp-block-heading" id="how-contrast-affects-color">How <code>contrast()</code> affects color</h3>



<p>Like other filter functions, the&nbsp;<code>contrast()</code>&nbsp;filter operates purely on RGB math. Specifically, given an&nbsp;<code>&lt;amount&gt;</code>&nbsp;it multiplies each RGB channel by that&nbsp;<code>&lt;amount&gt;</code>&nbsp;and then adds&nbsp;<code>255 * (0.5 - 0.5 * &lt;amount&gt;)</code>&nbsp;to the result. In practice, this affects colors in one of two ways:</p>



<ul class="wp-block-list">
<li>High contrast (greater than&nbsp;<code>1</code>) makes light pixels get lighter and dark pixels get darker, so colors become more vivid.</li>



<li>Low contrast (smaller than&nbsp;<code>1</code>) pulls all pixels toward a middle gray. This reduces the difference between light and dark areas, making the image look flat and muted.</li>
</ul>



<h3 class="wp-block-heading" id="basic-usage">Basic usage</h3>



<p>Some background images, usually in hero sections or carousels, can make the foreground text difficult to read. Especially if it has very bright and dark colors, which compete with any text color. To solve this, we can use&nbsp;contrast()&nbsp;to reduce the difference between the image&#8217;s whites and blacks, making text more readable against the whole image.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">img {
    filter: contrast(70%) brightness(60%);
}</code></pre>



<p>The low contrast flattens the image, and as a plus, we can also reduce the image&#8217;s brightness to make the text pop regardless of its colors.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_yyJXwNZ" src="//codepen.io/anon/embed/yyJXwNZ?height=450&amp;theme-id=1&amp;slug-hash=yyJXwNZ&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed yyJXwNZ" title="CodePen Embed yyJXwNZ" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h3 class="wp-block-heading" id="making-product-card-images-pop-on-hover">Demo: Making product card images pop on hover</h3>



<p>Another useful application for&nbsp;<code>contrast()</code>&nbsp;is to highlight an image in a user&#8217;s interaction. For example, in a row of image cards, we could increase the image&#8217;s contrast and also scale it on hover</p>



<pre rel="SCSS" class="wp-block-csstricks-code-block language-scss" data-line=""><code markup="tt">.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_NPRbrgM" src="//codepen.io/anon/embed/NPRbrgM?height=500&amp;theme-id=1&amp;slug-hash=NPRbrgM&amp;default-tab=result" height="500" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed NPRbrgM" title="CodePen Embed NPRbrgM" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h3 class="wp-block-heading" id="is-contrast-the-same-as-contrast-color-">Is <code>contrast()</code> the same as <code>contrast-color()</code>?</h3>



<p>While both CSS functions have similar names, they are not to be confused with each other.</p>



<ul class="wp-block-list">
<li><strong><code>contrast()</code> is a filter function that makes an element more vivid</strong> by making whites lighter and blacks darker.</li>



<li><strong><a href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/"><code>contrast-color()</code></a> returns the text color with the highest contrast to a solid background.</strong> Its resulting color is either white or black, depending on which color contrasts most with the background. It is also not a filter function.</li>
</ul>



<h3 class="wp-block-heading" id="browser-support">Browser support</h3>



<p>The&nbsp;<code>contrast()</code>&nbsp;function is currently supported across all modern browsers.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="backdrop-filter"></baseline-status>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="filter"></baseline-status>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/c/contrast/">contrast()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more or dulling them to gray. Unlike other filter functions like brightness() or saturate(), contrast() affects both saturation and lightness, keeping only the color’s hue.




.low {
  filter: contrast(50%);
}

.normal {
  filter: contrast(100%);
}

.high {
  filter: contrast(200%);
}
CodePen Embed Fallback
The contrast() function is defined in the Filter Effects Module Level 1 specification.
Syntax
The official syntax for the contrast() function is:
<contrast()> = contrast( [ <number> | <percentage> ]? )
Or simply:
filter: contrast(<amount>);
The contrast() function is only compatible with the CSS filter and backdrop-filter properties.
Arguments
/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Works with CSS variables */
--amount: 200%;
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
The contrast() function takes a single argument, which can be a positive decimal or percentage value. The argument determines the new contrast for the element, where:
0 or 0% dries out all contrast from the element, resulting in a completely gray image.
1 or 100% leaves the element completely unchanged.
Values above 1 or 100% increase the contrast linearly.
Negative values aren’t allowed. But CSS variables are:
.element {
  --filter-amount: 150%;
  filter: contrast(var(--filter-amount));
}
How contrast() affects color
Like other filter functions, the contrast() filter operates purely on RGB math. Specifically, given an <amount> it multiplies each RGB channel by that <amount> and then adds 255 * (0.5 - 0.5 * <amount>) to the result. In practice, this affects colors in one of two ways:
High contrast (greater than 1) makes light pixels get lighter and dark pixels get darker, so colors become more vivid.
Low contrast (smaller than 1) pulls all pixels toward a middle gray. This reduces the difference between light and dark areas, making the image look flat and muted.
Basic usage
Some background images, usually in hero sections or carousels, can make the foreground text difficult to read. Especially if it has very bright and dark colors, which compete with any text color. To solve this, we can use contrast() to reduce the difference between the image’s whites and blacks, making text more readable against the whole image.
img {
    filter: contrast(70%) brightness(60%);
}
The low contrast flattens the image, and as a plus, we can also reduce the image’s brightness to make the text pop regardless of its colors.
CodePen Embed Fallback
Demo: Making product card images pop on hover
Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover
.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}
CodePen Embed Fallback
Is contrast() the same as contrast-color()?
While both CSS functions have similar names, they are not to be confused with each other.
contrast() is a filter function that makes an element more vivid by making whites lighter and blacks darker.
contrast-color() returns the text color with the highest contrast to a solid background. Its resulting color is either white or black, depending on which color contrasts most with the background. It is also not a filter function.
Browser support
The contrast() function is currently supported across all modern browsers.







contrast() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The contrast() filter function increases or decreases the contrast of an element.
contrast() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

contrast()

<p>The <code>contrast-color()</code> function takes a <code>&#60;color&#62;</code> and returns either black or white, whichever is the most contrasting color for that value.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/c/contrast-color/">contrast-color()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>The CSS <code>contrast-color()</code> function takes a <code>&lt;color></code> value (as well as a variable) and returns either black or white, whichever is the most contrasting color for that value.</p>



<span id="more-392903"></span>



<p>In other words, <code>contrast-color()</code> is sort of an accessibility tool for conforming to <a href="https://w3c.github.io/wcag/guidelines/22/#contrast-minimum" rel="noopener">WCAG contrast requirements</a>.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.card {
  background-color: var(--swatch);
  color: contrast-color(var(--swatch));
}</code></pre>



<p>For example, on the next demo update the background color to see the text color change automatically.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_019cc772-d484-7286-a5fa-83eb0ebfbb38" src="//codepen.io/editor/anon/embed/019cc772-d484-7286-a5fa-83eb0ebfbb38?height=600&amp;theme-id=1&amp;slug-hash=019cc772-d484-7286-a5fa-83eb0ebfbb38&amp;default-tab=result" height="600" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed 019cc772-d484-7286-a5fa-83eb0ebfbb38" title="CodePen Embed 019cc772-d484-7286-a5fa-83eb0ebfbb38" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>The&nbsp;<code>contrast-color()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-color-5/#contrast-color" rel="noopener">CSS Color Module Level 5</a>&nbsp;specification.</p>



<h3 class="wp-block-heading" id="syntax">Syntax</h3>



<p>The CSS <code>contrast-color()</code> function syntax is is formatted like this:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">contrast-color() = contrast-color( &lt;color> )</code></pre>



<p>Let&#8217;s break that down with examples.</p>



<h3 class="wp-block-heading" id="argument">Arguments</h3>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Using a custom variable */
contrast-color(var(--base-background));

/* Passing a color directly */
contrast-color(#34cdf2);
contrast-color(green);</code></pre>



<p><code>contrast-color()</code>&nbsp;takes a&nbsp;<code>&lt;color&gt;</code>&nbsp;as its only argument and resolves to white or black, depending on which has the highest contrast. If both white and black have the same contrast level, the function defaults to white.</p>



<h3 class="wp-block-heading" id="basic-usage">Basic usage</h3>



<p>The&nbsp;<code>contrast-color()</code>&nbsp;give us a simple alternative to defining multiple background and text colors, while also ensuring they are contrasting enough. Imagine we had the following scenario:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --primary-text: #f1f8e9;
  --primary-bg: #2d5a27;
  --secondary-text: #311b92;
  --secondary-bg: #d1c4e9;
  --tertiary-text: #002b36;
  --tertiary-bg: #ff5722;
}

.primary {
  color: var(--primary-text);
  background-color: var(--primary-bg);
}

.secondary {
  color: var(--secondary-text);
  background-color: var(--secondary-bg);
}

.tertiary {
  color: var(--tertiary-text);
  background-color: var(--tertiary-bg);
}</code></pre>



<p>We defined a text color for each background color in our variables, and if we had more than three possible backgrounds, we&#8217;d have had to define them all. Instead, using&nbsp;<code>contrast-color()</code>, we could define only the background color for each theme and let the function return the appropriate contrasting color for the texts.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --primary: #2d5a27;
  --secondary: #d1c4e9;
  --tertiary: #ff5722;
}

.primary {
  color: contrast-color(var(--primary));
  background-color: var(--primary);
}

.secondary {
  color: contrast-color(var(--secondary));
  background-color: var(--secondary);
}

.tertiary {
  color: contrast-color(var(--tertiary-bg));
  background-color: var(--tertiary-bg);
}</code></pre>



<p><strong>It is important to note that <code>contrast-color()</code> is still a work in progress</strong> (at the time of this writing), and in some cases might not be appropriate from a design standpoint since it only returns black or white. Therefore, I recommend using it only in simple scenarios where either black or white make sense.</p>



<p>In fact, it has some shortcomings that are worth noting.</p>



<h3 class="wp-block-heading" id="-contrast-color-shortcomings"><code>contrast-color()</code> shortcomings</h3>



<p>While&nbsp;<code>contrast-color()</code>&nbsp;appears to improve web accessibility, it has&nbsp;<em>buts</em>&nbsp;we should be aware of before using it.</p>



<ul class="wp-block-list">
<li><strong>It resolves to only black or white texts.</strong> Although the draft promises more control in the future, we have to stick to those two colors for now.</li>



<li><strong>We&#8217;re stuck with white when using colors where neither black nor white is a sufficient contrast</strong>, or they both have the same contrast.</li>



<li><strong><code>contrast-color()</code> only works with colors for now.</strong> So, in cases where you&#8217;re working with text on background images or using font weights to increase contrast, you&#8217;ll have to find a different way to meet contrast requirements. And even if it can be technically used with gradients, these too can only go between black to white which might not provide enough contrast between the gradient colors.</li>



<li><strong><code>contrast-color()</code> doesn&#8217;t account for the <code>font-size</code></strong>, which is a defining criterion, in choosing a contrast color. Hopefully, this will be accounted for in the future.</li>
</ul>



<p>So, at the time of writing, it seems it&#8217;s better to manually define colors that are contrasting enough in our themes as&nbsp;<code>contrast-color()</code>&nbsp;isn&#8217;t really feasible right now.</p>



<h3 class="wp-block-heading" id="older-syntax">Older syntax</h3>



<p>Based on earlier <a href="https://css-tricks.com/exploring-color-contrast-for-the-first-time/">articles</a>, the <code>contrast-color()</code> function used to take multiple <code>color</code> arguments–the base color versus multiple contrasting color options to choose from:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">contrast-color(var(--bg) vs red, lightgreen, blue)</code></pre>



<p>This syntax no longer exists in the draft. It&#8217;s one color and one color only.</p>



<h3 class="wp-block-heading" id="specification">Specification</h3>



<p>The&nbsp;<code>contrast-color()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-color-5/#contrast-color" rel="noopener">CSS Color Module Level 5</a>&nbsp;specification.</p>



<h3 class="wp-block-heading" id="browser-support">Browser support</h3>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="contrast-color"></baseline-status>



<p>While browser support is limited at the time of this writing, it&#8217;s a good idea to include a fallback if you&#8217;re planning to use it on a project. We can use the <a href="https://css-tricks.com/almanac/rules/s/supports/"><code>@supports</code></a> at-rule to detect if the browser understands the function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.card {
  --bg-color: #2d5a27;
  background-color: var(--bg-color);

  /* Default Fallback */
  color: ghostwhite;
}

/* Use the function if supported */
@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg-color));
  }
}</code></pre>



<h3 class="wp-block-heading" id="references-earlier-articles-">Further reading:</h3>



<ul class="wp-block-list">
<li><a href="https://www.smashingmagazine.com/2022/05/accessible-design-system-themes-css-color-contrast/" rel="noopener">Manage Accessible Design System Themes With CSS Color-Contrast()</a> (Daniel Yuschick)</li>
</ul>



    		
    <div class="in-article-cards">
      <article class="in-article-card articles" id="mini-post-391853">

      <div class="tags">
      <a href="https://css-tricks.com/tag/accessibility/" rel="tag">accessibility</a> <a href="https://css-tricks.com/tag/color/" rel="tag">color</a> <a href="https://css-tricks.com/tag/contrast-color/" rel="tag">contrast-color()</a> <a href="https://css-tricks.com/tag/relative-color/" rel="tag">relative color</a>    </div>
  
  <time datetime="2026-02-11" title="Originally published Feb 11, 2026">
    <strong>
                
        Article
      </strong>

    on

    Feb 11, 2026  </time>

  <h3>
    <a href="https://css-tricks.com/approximating-contrast-color-with-other-css-features/">
      Approximating contrast-color() With Other CSS Features    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/kevinhamer/" aria-label="Author page of Kevin Hamer">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/b3681cc5fdff5f6445d6405c9a765816c05815cd85b88bdb69804b721ff0d14b.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b3681cc5fdff5f6445d6405c9a765816c05815cd85b88bdb69804b721ff0d14b.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/kevinhamer/">
      Kevin Hamer    </a>
  </div>

</article>
<article class="in-article-card articles" id="mini-post-386829">

      <div class="tags">
      <a href="https://css-tricks.com/tag/accessibility/" rel="tag">accessibility</a> <a href="https://css-tricks.com/tag/color/" rel="tag">color</a> <a href="https://css-tricks.com/tag/contrast-color/" rel="tag">contrast-color()</a> <a href="https://css-tricks.com/tag/css-functions/" rel="tag">CSS functions</a>    </div>
  
  <time datetime="2025-06-05" title="Originally published Jun 5, 2025">
    <strong>
                
        Article
      </strong>

    on

    Jun 5, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/">
      Exploring the CSS contrast-color() Function… a Second Time    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/danielschwarz/" aria-label="Author page of Daniel Schwarz">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/danielschwarz/">
      Daniel Schwarz    </a>
  </div>

</article>
<article class="in-article-card links" id="mini-post-389698">

      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a> <a href="https://css-tricks.com/tag/contrast-color/" rel="tag">contrast-color()</a> <a href="https://css-tricks.com/tag/css-functions/" rel="tag">CSS functions</a>    </div>
  
  <time datetime="2025-10-08" title="Originally published Oct 8, 2025">
    <strong>
                
        Link
      </strong>

    on

    Oct 8, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/the-thing-about-contrast-color/">
      The thing about contrast-color    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/geoffgraham/" aria-label="Author page of Geoff Graham">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/geoffgraham/">
      Geoff Graham    </a>
  </div>

</article>
    </div>
  



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/c/contrast-color/">contrast-color()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


The CSS contrast-color() function takes a <color> value (as well as a variable) and returns either black or white, whichever is the most contrasting color for that value.




In other words, contrast-color() is sort of an accessibility tool for conforming to WCAG contrast requirements.
.card {
  background-color: var(--swatch);
  color: contrast-color(var(--swatch));
}
For example, on the next demo update the background color to see the text color change automatically.
CodePen Embed Fallback
The contrast-color() function is defined in the CSS Color Module Level 5 specification.
Syntax
The CSS contrast-color() function syntax is is formatted like this:
contrast-color() = contrast-color( <color> )
Let’s break that down with examples.
Arguments
/* Using a custom variable */
contrast-color(var(--base-background));

/* Passing a color directly */
contrast-color(#34cdf2);
contrast-color(green);
contrast-color() takes a <color> as its only argument and resolves to white or black, depending on which has the highest contrast. If both white and black have the same contrast level, the function defaults to white.
Basic usage
The contrast-color() give us a simple alternative to defining multiple background and text colors, while also ensuring they are contrasting enough. Imagine we had the following scenario:
:root {
  --primary-text: #f1f8e9;
  --primary-bg: #2d5a27;
  --secondary-text: #311b92;
  --secondary-bg: #d1c4e9;
  --tertiary-text: #002b36;
  --tertiary-bg: #ff5722;
}

.primary {
  color: var(--primary-text);
  background-color: var(--primary-bg);
}

.secondary {
  color: var(--secondary-text);
  background-color: var(--secondary-bg);
}

.tertiary {
  color: var(--tertiary-text);
  background-color: var(--tertiary-bg);
}
We defined a text color for each background color in our variables, and if we had more than three possible backgrounds, we’d have had to define them all. Instead, using contrast-color(), we could define only the background color for each theme and let the function return the appropriate contrasting color for the texts.
:root {
  --primary: #2d5a27;
  --secondary: #d1c4e9;
  --tertiary: #ff5722;
}

.primary {
  color: contrast-color(var(--primary));
  background-color: var(--primary);
}

.secondary {
  color: contrast-color(var(--secondary));
  background-color: var(--secondary);
}

.tertiary {
  color: contrast-color(var(--tertiary-bg));
  background-color: var(--tertiary-bg);
}
It is important to note that contrast-color() is still a work in progress (at the time of this writing), and in some cases might not be appropriate from a design standpoint since it only returns black or white. Therefore, I recommend using it only in simple scenarios where either black or white make sense.
In fact, it has some shortcomings that are worth noting.
contrast-color() shortcomings
While contrast-color() appears to improve web accessibility, it has buts we should be aware of before using it.
It resolves to only black or white texts. Although the draft promises more control in the future, we have to stick to those two colors for now.
We’re stuck with white when using colors where neither black nor white is a sufficient contrast, or they both have the same contrast.
contrast-color() only works with colors for now. So, in cases where you’re working with text on background images or using font weights to increase contrast, you’ll have to find a different way to meet contrast requirements. And even if it can be technically used with gradients, these too can only go between black to white which might not provide enough contrast between the gradient colors.
contrast-color() doesn’t account for the font-size, which is a defining criterion, in choosing a contrast color. Hopefully, this will be accounted for in the future.
So, at the time of writing, it seems it’s better to manually define colors that are contrasting enough in our themes as contrast-color() isn’t really feasible right now.
Older syntax
Based on earlier articles, the contrast-color() function used to take multiple color arguments–the base color versus multiple contrasting color options to choose from:
contrast-color(var(--bg) vs red, lightgreen, blue)
This syntax no longer exists in the draft. It’s one color and one color only.
Specification
The contrast-color() function is defined in the CSS Color Module Level 5 specification.
Browser support




While browser support is limited at the time of this writing, it’s a good idea to include a fallback if you’re planning to use it on a project. We can use the @supports at-rule to detect if the browser understands the function:
.card {
  --bg-color: #2d5a27;
  background-color: var(--bg-color);

  /* Default Fallback */
  color: ghostwhite;
}

/* Use the function if supported */
@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg-color));
  }
}
Further reading:
Manage Accessible Design System Themes With CSS Color-Contrast() (Daniel Yuschick)
accessibility color contrast-color() relative color    
    
  
    
      Kevin Hamer    
  
accessibility color contrast-color() CSS functions    
    
  
    
      Daniel Schwarz    
  
color contrast-color() CSS functions    
    
  
    
      Geoff Graham    
  


contrast-color() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The contrast-color() function takes a <color> and returns either black or white, whichever is the most contrasting color for that value.
contrast-color() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

contrast-color()

<p>My shim might give the powers that be another reason to say native support isn't necessary, or if lots of people use my :nth-letter hack in the wild, the browser gods might recognize the need to implement it for real.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-nonexistent-nth-letter-selector-now/">Let’s Use the Nonexistent ::nth-letter Selector Now</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


My shim might give the powers that be another reason to say native support isn't necessary, or if lots of people use my :nth-letter hack in the wild, the browser gods might recognize the need to implement it for real.
Let’s Use the Nonexistent ::nth-letter Selector Now originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Let’s Use the Nonexistent ::nth-letter Selector Now

<p>Putting CSS’s more recent scrolling animation capabilities to the test to recreate a complex animation of the Apple Vision Pro headset from Apple's website.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/recreating-apples-vision-pro-animation-in-css/">Recreating Apple’s Vision Pro Animation in CSS</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>Apple’s product animations, particularly the scrolly teardowns (technical term), have always been inspiring. But these bleeding-edge animations have always used JavaScript and other technologies. Plus, they aren’t always responsive (or, at least, Apple switches to a static image at a certain width).</p>



<span id="more-392970"></span>



<p>I’ve been wowed by CSS’s more recent scrolling animation capabilities and wondered if I could rebuild one of these animations in just CSS <em>and</em> make it responsive. (In fact, CSS sure has come a long way since <a href="https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/">the last attempt in this publication</a>.) The one I’ll be attempting is from the <a href="https://www.apple.com/apple-vision-pro/" rel="noopener">Vision Pro site</a> and to see it you’ll need to scroll down until you hit a black background, a little more than halfway down the page. If you’re too <del>lazy</del> errr… efficient to go look yourself, and/or they decide to change the animation after this article goes live, you can watch this video:</p>



<figure class="wp-block-video"><video height="1836" style="aspect-ratio: 2400 / 1836;" width="2400" controls src="https://css-tricks.com/wp-content/uploads/2026/03/AppleSite.mov" playsinline></video></figure>



<p class="is-style-explanation"><strong>Note:</strong> While Apple’s version works in all major browsers, the CSS-only version, at the time of this writing, will not work in Firefox.</p>



<h3 class="wp-block-heading" id="apple-s-animation">Apple’s Animation</h3>



<p>The first thing we have to do is identify what’s going on in the original animation. There are two major stages.</p>



<h4 class="wp-block-heading" id="stage-1-exploding-hardware">Stage 1: “Exploding” Hardware</h4>



<p>Three electronic components rise in sequence from the Vision Pro device at the bottom of the page. Each of the three components is a set of two images that go both in front of and behind other components like a sub roll around a hot dog bun around a bread stick. (Yes, that’s a weird analogy, but you get it, don’t you?)</p>



<p>The first, outermost component (the sub roll) comprises the frontmost and the hindmost images allowing it to appear as if it’s both in front of and behind the other components.</p>



<p>The next component (the hot dog bun) wraps the third component (the bread stick) similarly. This provides depth, visual interest, and a 3D effect, as transparent areas in each image allow the images behind it to show through.</p>



<h4 class="wp-block-heading" id="stage-2-flip-up-to-eyepieces">Stage 2: Flip-Up to Eyepieces</h4>



<p>The final piece of the Vision Pro animation flips the device up in a smooth motion to show the eyepieces. Apple does this portion with a video, using JavaScript to advance the video as the user scrolls.</p>



<p>Let’s recreate these, one stage at a time.</p>



<h3 class="wp-block-heading" id="-exploding-hardware">“Exploding” Hardware</h3>



<p>Since Apple already created the six images for the components, we can borrow them. Initially, I started with a stack of <code>img</code> tags in a <code>div</code> and used <code>position: fixed</code> to keep the images at the bottom of the page and <code>position: absolute</code> to have them overlap each other. However, when I did this, I ran into two issues: (1) It wasn’t responsive — shrinking the width of the viewport made the images go off screen, and (2) the Vision Pro couldn’t scroll into view or scroll out of view as it does on the Apple site.</p>



<p>After banging my head against this for a bit, I went back and looked at how Apple constructed it. They had made each image a background image that was at <code>background-position: bottom center</code>, and used <code>background-size: cover</code> to keep it a consistent aspect ratio. I still needed them to be able to overlap though, but I didn’t want to pull them out of flow the way <code>position: absolute</code> does so I set <code>display:</code> <code>grid</code> on their parent element and assigned them all to the same grid area.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.visionpro { /* the overarching div that holds all the images */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.part { /* each of the images has a part class */
  grid-area: 1 / 1 / 2 / 2;
}</code></pre>



<p>As my logic professor used to say in the early aughts, <em>“Now we’re cooking with gas!”</em> (I don’t really know how that applies here, but it seemed appropriate. Somewhat illogical, I know.)</p>



<p>I then began animating the components. I started with a <a href="https://css-tricks.com/almanac/properties/s/scroll-timeline-name">scroll timeline</a> that would have allowed me to pin the animation timeline to scrolling the entire <code>html</code> element, but realized that if the Vision Pro (meaning the elements holding all of the images) was going to scroll both into and out of the viewport, then I should switch to a <a href="https://css-tricks.com/almanac/functions/v/view/">view timeline</a> so that scrolling the element into view would start the animation rather than trying to estimate a keyframe percentage to start on where the elements would be in view (a rather brittle and non-responsive way to handle it).</p>



<p>Scrolling the Vision Pro into view, pausing while it’s animating, and then scrolling it out of view is a textbook use of <code>position: sticky</code>. So I created a container <code>div</code> that fully encapsulated the Vision Pro <code>div</code> and set it to <code>position: relative</code>. I pushed the container <code>div</code> down past the viewport with a top margin, and set <code>top</code> on the vision pro <code>div</code> to 0. You could then scroll up till the <code>position: sticky</code> held the vision pro in place, the animation executed and then, when the container had been entirely scrolled through, it would carry the Vision Pro <code>div</code> up and out of the viewport.</p>



<p>Now, to tackle the component moves. When I first used a <code>translate</code> to move the images up, I had hoped to use the natural order of the elements to keep everything nicely stacked in my bread-based turducken. Alas, the browser’s sneaky optimization engine placed my sub roll entirely on top of my hot dog bun, which was entirely on top of my breadstick. Luckily, using <code>z-index</code> allowed me to separate the layers and get the overlap that is part of why Apple’s version looks so awesome.</p>



<p>Another problem I ran into was that, at sizes smaller than the 960-pixel width of the images, I couldn’t reliably and responsively move the components up. They needed to be far enough away that they didn’t interfere with Stage 2, but not so far away that they went fully out of the viewport. (Where’s a bear family and a blonde girl when you need them?) Thankfully, as it so often does, algebra saved my tuchus. Since I have the dimensions of the full-size image (960px by 608px), and the full width of the image is equal to the width of the viewport, I could write an equation like below to get the height and use that in my translation calculations for how far to move each component.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">--stage2-height: calc(min(100vw, 960px) * 608 / 960);</code></pre>



<p>However, this calculation breaks down when the viewport is shorter than <code>608px</code> and wider than <code>960px</code> because the width of the image is no longer equal to <code>100vw</code>. I initially wrote a similar equation to calculate the width:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">--stage2-width: calc(min(100vh, 608px) * 960 / 608);</code></pre>



<p>But it also only works if the height is <code>608px</code> or less, and they both won’t work while the other one applies. This would be a simple fix using an “if” statement. <a href="https://css-tricks.com/if-css-gets-inline-conditionals/">While CSS does have an <code>if()</code> function</a> as I’m writing this, it doesn’t work in Safari. While I know this whole thing won’t work in Firefox, I didn’t want to knock out a whole other browser if I could help it. So, I fixed it with a media query:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --stage2-height: calc(min(100vw, 960px) * 608 / 960);
  --stage2-width: calc(min(100vh, 608px) * 960 / 608);
}

@media screen and (max-height: 608px) {
  :root {
    --stage2-height: calc(var(--vid-width) * 608 / 960);
  }
}</code></pre>



<p>I patted myself on the back for my mathematical genius and problem-solving skills until I realized (as you smarty pants people have probably already figured out) that if the height is less than <code>608px</code>, then it’s equal to <code>100vh</code>. (Yes, <a href="https://css-tricks.com/the-large-small-and-dynamic-viewports/"><code>vh</code> is a complicated unit</a>, particularly on iOS, but for this proof of concept I’m ignoring its downsides).</p>



<p>So, really all I needed was:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --stage2-height: calc(min(100vw, 960px) * 608 / 960);
}

@media screen and (max-height: 608px) {
  :root {
    --stage2-height: 100vh;
  }
}</code></pre>



<p>But whatever my mathematical tangents (Ha! Terrible math pun!), this allowed me to base my vertical translations on the height of the Stage 2 graphics, e.g.:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">translate: 0 calc(var(--stage2-height) * -1 - 25vh);</code></pre>



<p>&#8230;and thus get them out of the way for the Stage 2 animation. That said, it wasn’t perfect, and at viewports narrower than <code>410px</code>, I still had to make an adjustment to the heights using a media query.</p>



<h3 class="wp-block-heading" id="flip-up-to-eyepieces">Flip-Up to Eyepieces</h3>



<p>Unfortunately, there’s no way to either start a video with just CSS or modify the frame rate with just CSS. However, we can create a set of keyframes that changes the background image over time, such as:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* ... */

50% {
  background-image: url(imgs/video/00037.jpg);
  z-index: -1;
}

51% {
  background-image: url(imgs/video/00039.jpg);
  z-index: -1;
}

52% {
  background-image: url(imgs/video/00041.jpg);
  z-index: -1;
}

/* ... */</code></pre>



<p>(Since there’s, like, 60-some images involved in this one, I’m not giving you the full set of keyframes, but you can go look at the <code>cssvideo</code> keyframes in the complete <a href="https://codepen.io/undeadinstitute/pen/bNweEOB?editors=1100" rel="noopener">CodePen</a> for the full Monty.)</p>



<p>The downside of this, however, is that instead of one video file, we’re downloading 60+ files for the same effect. You’ll notice that the file numbers skip a number between each iteration. This was me halving the number of frames so that we didn’t have 120+ images to download. (You might be able to speed things up with a sprite, but since this is more proof-of-concept than a production-ready solution, I didn’t have the patience to stitch 60+ images together).</p>



<p>The animation was a bit choppy on the initial scroll, even when running the demo locally.</p>



<figure class="wp-block-video"><video height="1806" style="aspect-ratio: 2342 / 1806;" width="2342" controls src="https://css-tricks.com/wp-content/uploads/2026/03/stutter.mov" playsinline></video></figure>



<p>So I added:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;link rel="preload" as="image" href="imgs/video/00011.jpg"></code></pre>



<p>&#8230;for every image, including the component images. That helped a lot because the server didn’t have to parse the CSS before downloading all the images.</p>



<p>Using the same view timeline as we do for Stage 1, we run an animation moving it into place and the <code>cssvideo</code> animation and the eyepieces appear to “flip up.”</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">animation: vpsf-move forwards, cssvideo forwards;
animation-timeline: --apple-vp, --apple-vp;</code></pre>



<h3 class="wp-block-heading" id="fine-tuning">Fine Tuning</h3>



<p>While a view timeline was great, the animation didn’t always begin or end exactly when I wanted it to. Enter <a href="https://css-tricks.com/almanac/properties/a/animation-range/"><code>animation-range</code></a>. While there’s a lot of options what I used on all of the <code>.part</code>s was</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">animation-range: contain cover;</code></pre>



<p>This made sure that the Vision Pro element was inside the viewport before it started (<code>contain</code>) and that it didn’t fully finish the animation until it was out of view (<code>cover</code>). This worked well for the parts because I wanted them fully in view before the components started rising and since their endpoint isn’t important they can keep moving until they’re off screen.</p>



<p>However, for Stage 2, I wanted to be sure the flip up animation had ended before it went off screen so for this one I used:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">animation-range: cover 10% contain;</code></pre>



<p>Both <code>cover</code> and <code>10%</code> refer to the start of the animation, using the <code>cover</code> keyword, but pushing its start 10% later. The <code>contain</code> ensures that the animation ends before it starts going off screen.</p>



<p>Here’s everything together:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_bNweEOB" src="//codepen.io/anon/embed/preview/bNweEOB?height=450&amp;theme-id=1&amp;slug-hash=bNweEOB&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed bNweEOB" title="CodePen Embed bNweEOB" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>And here’s a video in case your browser doesn’t support it yet:</p>



<figure class="wp-block-video"><video height="1804" style="aspect-ratio: 2342 / 1804;" width="2342" controls src="https://css-tricks.com/wp-content/uploads/2026/03/Codepenrecording.mov" playsinline></video></figure>



<h3 class="wp-block-heading" id="conclusion">Conclusion</h3>



<p>CSS sure has come a long way and while I definitely used some cutting edge features there were also a lot of relatively recent additions that made this possible too.</p>



<p>With scroll timelines, we can attach an animation to the scroll either of an entire element or just when an element is in view. The <code>animation-range</code> property let us fine-tune when the animation happened. <code>position: sticky</code> lets us easily hold something on screen while we animate it even as its scrolling. Grid layout allowed overlap elements without pulling them out of flow. Even <code>calc()</code>, viewport units, custom properties, and media queries all had their roles in making this possible. And that doesn’t even count the HTML innovations like preload. <em>Incredible!</em></p>



<p>Maybe we should add a W to WWW: The World Wide <em>Wondrous</em> Web. Okay, okay you can stop groaning, but I’m not wrong&#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/recreating-apples-vision-pro-animation-in-css/">Recreating Apple’s Vision Pro Animation in CSS</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Apple’s product animations, particularly the scrolly teardowns (technical term), have always been inspiring. But these bleeding-edge animations have always used JavaScript and other technologies. Plus, they aren’t always responsive (or, at least, Apple switches to a static image at a certain width).




I’ve been wowed by CSS’s more recent scrolling animation capabilities and wondered if I could rebuild one of these animations in just CSS and make it responsive. (In fact, CSS sure has come a long way since the last attempt in this publication.) The one I’ll be attempting is from the Vision Pro site and to see it you’ll need to scroll down until you hit a black background, a little more than halfway down the page. If you’re too lazy errr… efficient to go look yourself, and/or they decide to change the animation after this article goes live, you can watch this video:




Note: While Apple’s version works in all major browsers, the CSS-only version, at the time of this writing, will not work in Firefox.
Apple’s Animation
The first thing we have to do is identify what’s going on in the original animation. There are two major stages.
Stage 1: “Exploding” Hardware
Three electronic components rise in sequence from the Vision Pro device at the bottom of the page. Each of the three components is a set of two images that go both in front of and behind other components like a sub roll around a hot dog bun around a bread stick. (Yes, that’s a weird analogy, but you get it, don’t you?)
The first, outermost component (the sub roll) comprises the frontmost and the hindmost images allowing it to appear as if it’s both in front of and behind the other components.
The next component (the hot dog bun) wraps the third component (the bread stick) similarly. This provides depth, visual interest, and a 3D effect, as transparent areas in each image allow the images behind it to show through.
Stage 2: Flip-Up to Eyepieces
The final piece of the Vision Pro animation flips the device up in a smooth motion to show the eyepieces. Apple does this portion with a video, using JavaScript to advance the video as the user scrolls.
Let’s recreate these, one stage at a time.
“Exploding” Hardware
Since Apple already created the six images for the components, we can borrow them. Initially, I started with a stack of img tags in a div and used position: fixed to keep the images at the bottom of the page and position: absolute to have them overlap each other. However, when I did this, I ran into two issues: (1) It wasn’t responsive — shrinking the width of the viewport made the images go off screen, and (2) the Vision Pro couldn’t scroll into view or scroll out of view as it does on the Apple site.
After banging my head against this for a bit, I went back and looked at how Apple constructed it. They had made each image a background image that was at background-position: bottom center, and used background-size: cover to keep it a consistent aspect ratio. I still needed them to be able to overlap though, but I didn’t want to pull them out of flow the way position: absolute does so I set display: grid on their parent element and assigned them all to the same grid area.
.visionpro { /* the overarching div that holds all the images */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.part { /* each of the images has a part class */
  grid-area: 1 / 1 / 2 / 2;
}
As my logic professor used to say in the early aughts, “Now we’re cooking with gas!” (I don’t really know how that applies here, but it seemed appropriate. Somewhat illogical, I know.)
I then began animating the components. I started with a scroll timeline that would have allowed me to pin the animation timeline to scrolling the entire html element, but realized that if the Vision Pro (meaning the elements holding all of the images) was going to scroll both into and out of the viewport, then I should switch to a view timeline so that scrolling the element into view would start the animation rather than trying to estimate a keyframe percentage to start on where the elements would be in view (a rather brittle and non-responsive way to handle it).
Scrolling the Vision Pro into view, pausing while it’s animating, and then scrolling it out of view is a textbook use of position: sticky. So I created a container div that fully encapsulated the Vision Pro div and set it to position: relative. I pushed the container div down past the viewport with a top margin, and set top on the vision pro div to 0. You could then scroll up till the position: sticky held the vision pro in place, the animation executed and then, when the container had been entirely scrolled through, it would carry the Vision Pro div up and out of the viewport.
Now, to tackle the component moves. When I first used a translate to move the images up, I had hoped to use the natural order of the elements to keep everything nicely stacked in my bread-based turducken. Alas, the browser’s sneaky optimization engine placed my sub roll entirely on top of my hot dog bun, which was entirely on top of my breadstick. Luckily, using z-index allowed me to separate the layers and get the overlap that is part of why Apple’s version looks so awesome.
Another problem I ran into was that, at sizes smaller than the 960-pixel width of the images, I couldn’t reliably and responsively move the components up. They needed to be far enough away that they didn’t interfere with Stage 2, but not so far away that they went fully out of the viewport. (Where’s a bear family and a blonde girl when you need them?) Thankfully, as it so often does, algebra saved my tuchus. Since I have the dimensions of the full-size image (960px by 608px), and the full width of the image is equal to the width of the viewport, I could write an equation like below to get the height and use that in my translation calculations for how far to move each component.
--stage2-height: calc(min(100vw, 960px) * 608 / 960);
However, this calculation breaks down when the viewport is shorter than 608px and wider than 960px because the width of the image is no longer equal to 100vw. I initially wrote a similar equation to calculate the width:
--stage2-width: calc(min(100vh, 608px) * 960 / 608);
But it also only works if the height is 608px or less, and they both won’t work while the other one applies. This would be a simple fix using an “if” statement. While CSS does have an if() function as I’m writing this, it doesn’t work in Safari. While I know this whole thing won’t work in Firefox, I didn’t want to knock out a whole other browser if I could help it. So, I fixed it with a media query:
:root {
  --stage2-height: calc(min(100vw, 960px) * 608 / 960);
  --stage2-width: calc(min(100vh, 608px) * 960 / 608);
}

@media screen and (max-height: 608px) {
  :root {
    --stage2-height: calc(var(--vid-width) * 608 / 960);
  }
}
I patted myself on the back for my mathematical genius and problem-solving skills until I realized (as you smarty pants people have probably already figured out) that if the height is less than 608px, then it’s equal to 100vh. (Yes, vh is a complicated unit, particularly on iOS, but for this proof of concept I’m ignoring its downsides).
So, really all I needed was:
:root {
  --stage2-height: calc(min(100vw, 960px) * 608 / 960);
}

@media screen and (max-height: 608px) {
  :root {
    --stage2-height: 100vh;
  }
}
But whatever my mathematical tangents (Ha! Terrible math pun!), this allowed me to base my vertical translations on the height of the Stage 2 graphics, e.g.:
translate: 0 calc(var(--stage2-height) * -1 - 25vh);
…and thus get them out of the way for the Stage 2 animation. That said, it wasn’t perfect, and at viewports narrower than 410px, I still had to make an adjustment to the heights using a media query.
Flip-Up to Eyepieces
Unfortunately, there’s no way to either start a video with just CSS or modify the frame rate with just CSS. However, we can create a set of keyframes that changes the background image over time, such as:
/* ... */

50% {
  background-image: url(imgs/video/00037.jpg);
  z-index: -1;
}

51% {
  background-image: url(imgs/video/00039.jpg);
  z-index: -1;
}

52% {
  background-image: url(imgs/video/00041.jpg);
  z-index: -1;
}

/* ... */
(Since there’s, like, 60-some images involved in this one, I’m not giving you the full set of keyframes, but you can go look at the cssvideo keyframes in the complete CodePen for the full Monty.)
The downside of this, however, is that instead of one video file, we’re downloading 60+ files for the same effect. You’ll notice that the file numbers skip a number between each iteration. This was me halving the number of frames so that we didn’t have 120+ images to download. (You might be able to speed things up with a sprite, but since this is more proof-of-concept than a production-ready solution, I didn’t have the patience to stitch 60+ images together).
The animation was a bit choppy on the initial scroll, even when running the demo locally.




So I added:
<link rel="preload" as="image" href="imgs/video/00011.jpg">
…for every image, including the component images. That helped a lot because the server didn’t have to parse the CSS before downloading all the images.
Using the same view timeline as we do for Stage 1, we run an animation moving it into place and the cssvideo animation and the eyepieces appear to “flip up.”
animation: vpsf-move forwards, cssvideo forwards;
animation-timeline: --apple-vp, --apple-vp;
Fine Tuning
While a view timeline was great, the animation didn’t always begin or end exactly when I wanted it to. Enter animation-range. While there’s a lot of options what I used on all of the .parts was
animation-range: contain cover;
This made sure that the Vision Pro element was inside the viewport before it started (contain) and that it didn’t fully finish the animation until it was out of view (cover). This worked well for the parts because I wanted them fully in view before the components started rising and since their endpoint isn’t important they can keep moving until they’re off screen.
However, for Stage 2, I wanted to be sure the flip up animation had ended before it went off screen so for this one I used:
animation-range: cover 10% contain;
Both cover and 10% refer to the start of the animation, using the cover keyword, but pushing its start 10% later. The contain ensures that the animation ends before it starts going off screen.
Here’s everything together:
CodePen Embed Fallback
And here’s a video in case your browser doesn’t support it yet:




Conclusion
CSS sure has come a long way and while I definitely used some cutting edge features there were also a lot of relatively recent additions that made this possible too.
With scroll timelines, we can attach an animation to the scroll either of an entire element or just when an element is in view. The animation-range property let us fine-tune when the animation happened. position: sticky lets us easily hold something on screen while we animate it even as its scrolling. Grid layout allowed overlap elements without pulling them out of flow. Even calc(), viewport units, custom properties, and media queries all had their roles in making this possible. And that doesn’t even count the HTML innovations like preload. Incredible!
Maybe we should add a W to WWW: The World Wide Wondrous Web. Okay, okay you can stop groaning, but I’m not wrong…
Recreating Apple’s Vision Pro Animation in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Putting CSS’s more recent scrolling animation capabilities to the test to recreate a complex animation of the Apple Vision Pro headset from Apple's website.
Recreating Apple’s Vision Pro Animation in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Recreating Apple’s Vision Pro Animation in CSS

<p>I use a Markdown Component for two main reasons: (1) It reduces the amount of markup I need to write, and (2) it converts typographic symbols. Here's how it works.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/astro-markdown-component/">Enhancing Astro With a Markdown Component</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>There are two ways to enhance Markdown in an Astro project:</p>



<ol class="wp-block-list">
<li><a href="https://css-tricks.com/markdown-astro/">Through MDX</a></li>



<li>Through a Markdown Component</li>
</ol>



<p>This article focuses on the Markdown Component.</p>



<span id="more-392286"></span>



<h3 class="wp-block-heading" id="why-use-a-markdown-component">Why Use a Markdown Component</h3>



<p>I use a Markdown Component for two main reasons:</p>



<ol class="wp-block-list">
<li>It reduces the amount of markup I need to write.</li>



<li>It converts typographic symbols like <code>'</code> to opening or closing quotes (<code>'</code> or <code>'</code>).</li>
</ol>



<p>So, I can skip several HTML tags — like <code>&lt;p&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;li&gt;</code>, and <code>&lt;a&gt;</code>. I can also skip heading tags if I don&#8217;t need to add classes to them.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="card">
  &lt;!-- prettier-ignore -->
  &lt;Markdown>
    ## Card Title
    This is a paragraph with **strong** and *italic* text.
    This is the second paragraph with a [link](https://link-somewhere.com)

    - List
    - Of
    - Items
  &lt;/Markdown>
&lt;/div></code></pre>



<p>Notice the <code>prettier-ignore</code> comment? It tells prettier not to format the contents within the <code>&lt;Markdown&gt;</code> block so Prettier won&#8217;t mess up my Markdown content.</p>



<p>The HTML output will be as follows:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="card">
  &lt;h2> Card Title &lt;/h2>
  &lt;p>This is a paragraph with &lt;strong>strong&lt;/strong> and &lt;em>italic&lt;/em> text.&lt;/p>
  &lt;p>This is the second paragraph with a &lt;a href="https://link-somewhere.com">link&lt;/a>&lt;/p>

  &lt;ul>
    &lt;li> List &lt;/li>
    &lt;li> Of &lt;/li>
    &lt;li> Items &lt;/li>
  &lt;/ul>
&lt;/div></code></pre>



<h3 class="wp-block-heading" id="installing-the-markdown-component">Installing the Markdown Component</h3>



<p>Fun Fact: Astro came with a <code>&lt;Markdown&gt;</code> component in its early release, but this <code>&lt;Markdown&gt;</code> component was <a href="https://docs.astro.build/en/guides/upgrade-to/v1/#markdown--component-removed" rel="noopener">migrated to a separate plugin in Version 1</a>, and <a href="https://docs.astro.build/en/guides/upgrade-to/v3/#removed-markdown--component" rel="noopener">completely removed in version 3</a>.</p>



<p>I was upset about it. But I decided to build a Markdown component for myself since I liked using one. <a href="https://splendidlabz.com/docs/astro/components/markdown/#features" rel="noopener">You can the documentation here</a>.</p>



<p>Using the Markdown component is simple: Just import and use it in the way I showed you above.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
import { Markdown } from '@splendidlabz/astro'
---

&lt;Markdown>
  ...
&lt;/Markdown></code></pre>



<h3 class="wp-block-heading" id="respects-indentation-automatically">Respects Indentation Automatically</h3>



<p>You can write your Markdown naturally, as if you&#8217;re writing content normally. This Markdown component detects the indentation and outputs the correct values (without wrapping them in <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags).</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>
  &lt;div>
    &lt;!-- prettier-ignore -->
    &lt;Markdown>
      This is a paragraph

      This is a second paragraph
    &lt;/Markdown>
  &lt;/div>
&lt;/div></code></pre>



<p>Here&#8217;s the output:</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>
  &lt;div>
    &lt;p>This is a paragraph&lt;/p>
    &lt;p>This is a second paragraph&lt;/p>
  &lt;/div>
&lt;/div></code></pre>



<h3 class="wp-block-heading" id="inline-option">Inline Option</h3>



<p>There&#8217;s an <code>inline</code> option that tells the <code>&lt;Markdown&gt;</code> component not to generate paragraph tags.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;h2 class="max-w-[12em]">
  &lt;Markdown inline> Ain't this cool? &lt;/Markdown>
&lt;/h2></code></pre>



<p>Here&#8217;s the output:</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;h2 class="max-w-[12em]">
  Ain't this cool?
&lt;/h2></code></pre>



<h3 class="wp-block-heading" id="gotchas-and-caveats">Gotchas and Caveats</h3>



<p>Prettier messes up the <code>&lt;!-- prettier-ignore --&gt;</code> block if you have unicode characters like emojis and em dashes anywhere before the block.</p>



<p>Here&#8217;s the original code:</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- prettier-ignore -->
&lt;Markdown>
  Markdown block that contains Unicode characters &#x1f917;
&lt;/Markdown>

&lt;!-- prettier-ignore -->
&lt;Markdown>
  Second Markdown block.
&lt;/Markdown></code></pre>



<p>Here&#8217;s what it looks like after saving:</p>



<pre rel="Markdown" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- prettier-ignore -->
&lt;Markdown>
  Markdown block that contains unicode characters &#x1f917;
&lt;/Markdown>

&lt;!-- prettier-ignore -->
&lt;Markdown>
  Second Markdown block.
&lt;/Markdown></code></pre>



<p>Unfortunately, we can&#8217;t do much about emojis because the issue stems from Prettier&#8217;s formatter.</p>



<p>But, we can use <code>en</code> and <code>em</code> dashes by writing <code>--</code> and <code>---</code>, respectively.</p>



<h3 id="content-workaround" class="wp-block-heading"><strong>Content Workaround</strong></h3>



<p>You can prevent Prettier from breaking all those <code>&lt;!-- prettier-ignore --&gt;</code> comments by not using them!</p>



<p>To do this, you just put your content inside a <code>content</code> property. No need to worry about whitespace as well — that&#8217;s taken care of for you.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">&lt;Markdown content=`
  This is a paragraph

  This is another paragraph
`/></code></pre>



<p>Personally, I think it doesn’t look at nice as slot version above&#8230;</p>



<p>But it lets you use markdown directly with any JS or json content you load!</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">---
const content = `
  This is a paragraph

  This is another paragraph
`
---

&lt;Markdown {content} /></code></pre>



<h3 class="wp-block-heading" id="taking-it-further">Taking it Further</h3>



<p>I&#8217;ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.</p>



<p>So I built <a href="https://zellwk.com/courses/practical-astro/content-systems/" rel="noopener">Practical Astro: Content Systems</a> — 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.</p>



<p>If you want a cleaner, calmer content workflow, check it out.</p>



<p>I also write about Astro Patterns and Using Tailwind + CSS together on <a href="https://zellwk.com/newsletter/css-tricks/" rel="noopener">my blog</a>. Come by and say hi!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/astro-markdown-component/">Enhancing Astro With a Markdown Component</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


There are two ways to enhance Markdown in an Astro project:
Through MDX
Through a Markdown Component
This article focuses on the Markdown Component.




Why Use a Markdown Component
I use a Markdown Component for two main reasons:
It reduces the amount of markup I need to write.
It converts typographic symbols like ' to opening or closing quotes (' or ').
So, I can skip several HTML tags — like <p>, <strong>, <em>, <ul>, <ol>, <li>, and <a>. I can also skip heading tags if I don’t need to add classes to them.
<div class="card">
  
  <Markdown>
    ## Card Title
    This is a paragraph with **strong** and *italic* text.
    This is the second paragraph with a [link](https://link-somewhere.com)

    - List
    - Of
    - Items
  </Markdown>
</div>
Notice the prettier-ignore comment? It tells prettier not to format the contents within the <Markdown> block so Prettier won’t mess up my Markdown content.
The HTML output will be as follows:
<div class="card">
  <h2> Card Title </h2>
  <p>This is a paragraph with <strong>strong</strong> and <em>italic</em> text.</p>
  <p>This is the second paragraph with a <a href="https://link-somewhere.com">link</a></p>

  <ul>
    <li> List </li>
    <li> Of </li>
    <li> Items </li>
  </ul>
</div>
Installing the Markdown Component
Fun Fact: Astro came with a <Markdown> component in its early release, but this <Markdown> component was migrated to a separate plugin in Version 1, and completely removed in version 3.
I was upset about it. But I decided to build a Markdown component for myself since I liked using one. You can the documentation here.
Using the Markdown component is simple: Just import and use it in the way I showed you above.
---
import { Markdown } from '@splendidlabz/astro'
---

<Markdown>
  ...
</Markdown>
Respects Indentation Automatically
You can write your Markdown naturally, as if you’re writing content normally. This Markdown component detects the indentation and outputs the correct values (without wrapping them in <pre> and <code> tags).
<div>
  <div>
    
    <Markdown>
      This is a paragraph

      This is a second paragraph
    </Markdown>
  </div>
</div>
Here’s the output:
<div>
  <div>
    <p>This is a paragraph</p>
    <p>This is a second paragraph</p>
  </div>
</div>
Inline Option
There’s an inline option that tells the <Markdown> component not to generate paragraph tags.
<h2 class="max-w-[12em]">
  <Markdown inline> Ain't this cool? </Markdown>
</h2>
Here’s the output:
<h2 class="max-w-[12em]">
  Ain't this cool?
</h2>
Gotchas and Caveats
Prettier messes up the  block if you have unicode characters like emojis and em dashes anywhere before the block.
Here’s the original code:

<Markdown>
  Markdown block that contains Unicode characters 🤗
</Markdown>


<Markdown>
  Second Markdown block.
</Markdown>
Here’s what it looks like after saving:

<Markdown>
  Markdown block that contains unicode characters 🤗
</Markdown>


<Markdown>
  Second Markdown block.
</Markdown>
Unfortunately, we can’t do much about emojis because the issue stems from Prettier’s formatter.
But, we can use en and em dashes by writing -- and ---, respectively.
Content Workaround
You can prevent Prettier from breaking all those  comments by not using them!
To do this, you just put your content inside a content property. No need to worry about whitespace as well — that’s taken care of for you.
<Markdown content=`
  This is a paragraph

  This is another paragraph
`/>
Personally, I think it doesn’t look at nice as slot version above…
But it lets you use markdown directly with any JS or json content you load!
---
const content = `
  This is a paragraph

  This is another paragraph
`
---

<Markdown {content} />
Taking it Further
I’ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.
So I built Practical Astro: Content Systems — 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.
If you want a cleaner, calmer content workflow, check it out.
I also write about Astro Patterns and Using Tailwind + CSS together on my blog. Come by and say hi!
Enhancing Astro With a Markdown Component originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

I use a Markdown Component for two main reasons: (1) It reduces the amount of markup I need to write, and (2) it converts typographic symbols. Here's how it works.
Enhancing Astro With a Markdown Component originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Enhancing Astro With a Markdown Component

<p>Although Astro has built-in support for Markdown via .md files, I'd argue that your Markdown experience can be enhanced with MDX.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/markdown-astro/">Markdown + Astro = &#x2764;&#xfe0f;</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>Markdown is a great invention that lets us write less markup. It also handles typographical matters like converting straight apostrophes (<code>'</code>) to opening or closing quotes (<code>'</code> or <code>'</code>) for us.</p>



<p>Although Astro has built-in support for Markdown via <code>.md</code> files, I&#8217;d argue that your Markdown experience can be enhanced in two ways:</p>



<ol class="wp-block-list">
<li>MDX</li>



<li>Markdown Component</li>
</ol>



<p>I&#8217;ve cover these in depth in <a href="https://zellwk.com/courses/practical-astro/content-systems/" rel="noopener">Practical Astro: Content Systems</a>.</p>



<p>We&#8217;re going to focus on MDX today.</p>



<span id="more-392278"></span>



<h3 class="wp-block-heading" id="mdx">MDX</h3>



<p><a href="https://mdxjs.com" rel="noopener">MDX</a> is a superset of Markdown. <strong>It lets you use components in Markdown</strong> and simple JSX in addition to all other Markdown features.</p>



<p>For Astro, you can also use components from any frontend framework that you have installed. So you can do something like:</p>



<pre rel="MDX" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
# Frontmatter...
---

import AstroComp from '@/components/AstroComp.astro'
import SvelteComp from '@/components/AstroComp.astro'

&lt;AstroComp> ... &lt;/AstroComp>
&lt;SvelteComp> ... &lt;/SvelteComp></code></pre>



<p>It can be a great substitute for content-heavy stuff because it lets you write markup like the following.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="card">
  ### Card Title

  Content goes here

  - List
  - Of
  - Items

  Second paragraph
&lt;/div></code></pre>



<p>Astro will convert the MDX into the following HTML:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="card">
  &lt;h2>Card Title&lt;/h2>

  &lt;p>Content goes here &lt;/p>

  &lt;ul>
    &lt;li> List &lt;/li>
    &lt;li> Of &lt;/li>
    &lt;li> Items &lt;/li>
  &lt;/ul>

  &lt;p>Second paragraph&lt;/p>
&lt;/div></code></pre>



<p>Notice what I did above:</p>



<ul class="wp-block-list">
<li>I used <code>##</code> instead of a full <code>h2</code> tag.</li>



<li>I used <code>-</code> instead of <code>&lt;ul></code> and <code>&lt;li></code> to denote lists.</li>



<li>I didn’t need any paragraph tags.</li>
</ul>



<p>Writing the whole thing in HTML directly would have been somewhat of a pain.</p>



<h3 class="wp-block-heading" id="installing-mdx">Installing MDX</h3>



<p>Astro folks have built an integration for MDX so it&#8217;s easy-peasy to add it to your project. Just follow <a href="https://docs.astro.build/en/guides/integrations-guide/mdx/#installation" rel="noopener">these instructions</a>.</p>



<h3 class="wp-block-heading" id="three-main-ways-to-use-mdx">Three Main Ways to Use MDX</h3>



<p>These methods also work with standard Markdown files.</p>



<ol class="wp-block-list">
<li>Import it directly into an Astro file</li>



<li>Through content collections</li>



<li>Through a layout</li>
</ol>



<h4 id="import-it-directly" class="wp-block-heading">Import it Directly</h4>



<p>The first way is simply to import your MDX file and use it directly as a component.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
import MDXComp from '../components/MDXComp.mdx'
---

&lt;MDXComp /></code></pre>



<p>Because of this, MDX can kinda function like a partial.</p>



<h4 id="through-content-collections" class="wp-block-heading">Through Content Collections</h4>



<p>First, you feed your MDX into a content collection. Note that you have to add the <code>mdx</code> pattern to your glob here.</p>



<h4 class="wp-block-heading" id="import-it-directly">Import it directly</h4>



<p>The first way is simply to import your MDX file and use it directly as a component.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// src/content.config.js
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
});

export const collections = { blog };</code></pre>



<p>Then you retrieve the MDX file from the content collection.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
import { getEntry, render } from 'astro:content'
const { slug } = Astro.props
const post = await getEntry('blog', slug)
const { Content } = await render(post)
---

&lt;Content /></code></pre>



<p>As you&#8217;re doing this, <strong>you can pass components into the MDX files</strong> so you don&#8217;t have to import them individually in every file.</p>



<p>For example, here&#8217;s how I would pass the <code><a href="https://splendidlabz.com/docs/astro/components/image/" rel="noopener">Image</a></code> component from <a href="https://splendidlabz.com" rel="noopener">Splendid Labz</a> into each of my MDX files.</p>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
import { Image } from '@splendidlabz/astro'
// ...
const { Content } = await render(post)
const components = { Image }
---

&lt;Content {components} /></code></pre>



<p>In my MDX files, I can now use <code>Image</code> without importing it.</p>



<pre rel="MDX" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;Image src="..." alt="..." /></code></pre>



<h3 id="use-a-layout" class="wp-block-heading">Use a Layout</h3>



<p>Finally, you can add a layout frontmatter in the MDX file.</p>



<pre rel="MDX" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">---
title: Blog Post Title
layout: @/layouts/MDX.astro
---</code></pre>



<p>This <code>layout</code> frontmatter should point to an Astro file.</p>



<p>In that file:</p>



<ul class="wp-block-list">
<li>You can extract frontmatter properties from <code>Astro.props.content</code>.</li>



<li>The MDX content can be rendered with <code>&lt;slot></code>.</li>
</ul>



<pre rel="Astro" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">---
import Base from './Base.astro'
const props = Astro.props.content
const { title } = props
---

&lt;Base>
  &lt;h1>{title}&lt;/h1>
  &lt;slot />
&lt;/Base></code></pre>



<h3 class="wp-block-heading" id="caveats">Caveats</h3>



<h4 class="wp-block-heading" id="formatting-and-linting-fails">Formatting and Linting Fails</h4>



<p>ESLint and Prettier don&#8217;t format MDX files well, so you&#8217;ll end up manually indenting most of your markup.</p>



<p>This is fine for small amounts of markup. But if you have lots of them&#8230; then the Markdown Component will be a much better choice.</p>



<p>More on that in another upcoming post.</p>



<h4 class="wp-block-heading" id="rss-issues">RSS Issues</h4>



<p>The <a href="https://docs.astro.build/en/recipes/rss/" rel="noopener">Astro RSS integration</a> doesn&#8217;t support MDX files out of the box.</p>



<p>Thankfully, this can be handled easily with Astro containers. I&#8217;ll show you how to do this in <a href="https://zellwk.com/courses/practical-astro/" rel="noopener">Practical Astro</a>.</p>



<h3 class="wp-block-heading" id="taking-it-further">Taking it Further</h3>



<p>I&#8217;ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.</p>



<p>So I built <a href="https://zellwk.com/courses/practical-astro/content-systems/" rel="noopener">Practical Astro: Content Systems</a>, 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.</p>



<p>If you want a cleaner, calmer content workflow, check it out.</p>



<p>I also write about Astro Patterns and Using Tailwind + CSS together on <a href="https://zellwk.com/newsletters/css-tricks/" rel="noopener">my blog</a>. Come by and say hi!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/markdown-astro/">Markdown + Astro = &#x2764;&#xfe0f;</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Markdown is a great invention that lets us write less markup. It also handles typographical matters like converting straight apostrophes (') to opening or closing quotes (' or ') for us.
Although Astro has built-in support for Markdown via .md files, I’d argue that your Markdown experience can be enhanced in two ways:
MDX
Markdown Component
I’ve cover these in depth in Practical Astro: Content Systems.
We’re going to focus on MDX today.




MDX
MDX is a superset of Markdown. It lets you use components in Markdown and simple JSX in addition to all other Markdown features.
For Astro, you can also use components from any frontend framework that you have installed. So you can do something like:
---
# Frontmatter...
---

import AstroComp from '@/components/AstroComp.astro'
import SvelteComp from '@/components/AstroComp.astro'

<AstroComp> ... </AstroComp>
<SvelteComp> ... </SvelteComp>
It can be a great substitute for content-heavy stuff because it lets you write markup like the following.
<div class="card">
  ### Card Title

  Content goes here

  - List
  - Of
  - Items

  Second paragraph
</div>
Astro will convert the MDX into the following HTML:
<div class="card">
  <h2>Card Title</h2>

  <p>Content goes here </p>

  <ul>
    <li> List </li>
    <li> Of </li>
    <li> Items </li>
  </ul>

  <p>Second paragraph</p>
</div>
Notice what I did above:
I used ## instead of a full h2 tag.
I used - instead of <ul> and <li> to denote lists.
I didn’t need any paragraph tags.
Writing the whole thing in HTML directly would have been somewhat of a pain.
Installing MDX
Astro folks have built an integration for MDX so it’s easy-peasy to add it to your project. Just follow these instructions.
Three Main Ways to Use MDX
These methods also work with standard Markdown files.
Import it directly into an Astro file
Through content collections
Through a layout
Import it Directly
The first way is simply to import your MDX file and use it directly as a component.
---
import MDXComp from '../components/MDXComp.mdx'
---

<MDXComp />
Because of this, MDX can kinda function like a partial.
Through Content Collections
First, you feed your MDX into a content collection. Note that you have to add the mdx pattern to your glob here.
Import it directly
The first way is simply to import your MDX file and use it directly as a component.
// src/content.config.js
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
});

export const collections = { blog };
Then you retrieve the MDX file from the content collection.
---
import { getEntry, render } from 'astro:content'
const { slug } = Astro.props
const post = await getEntry('blog', slug)
const { Content } = await render(post)
---

<Content />
As you’re doing this, you can pass components into the MDX files so you don’t have to import them individually in every file.
For example, here’s how I would pass the Image component from Splendid Labz into each of my MDX files.
---
import { Image } from '@splendidlabz/astro'
// ...
const { Content } = await render(post)
const components = { Image }
---

<Content {components} />
In my MDX files, I can now use Image without importing it.
<Image src="..." alt="..." />
Use a Layout
Finally, you can add a layout frontmatter in the MDX file.
---
title: Blog Post Title
layout: @/layouts/MDX.astro
---
This layout frontmatter should point to an Astro file.
In that file:
You can extract frontmatter properties from Astro.props.content.
The MDX content can be rendered with <slot>.
---
import Base from './Base.astro'
const props = Astro.props.content
const { title } = props
---

<Base>
  <h1>{title}</h1>
  <slot />
</Base>
Caveats
Formatting and Linting Fails
ESLint and Prettier don’t format MDX files well, so you’ll end up manually indenting most of your markup.
This is fine for small amounts of markup. But if you have lots of them… then the Markdown Component will be a much better choice.
More on that in another upcoming post.
RSS Issues
The Astro RSS integration doesn’t support MDX files out of the box.
Thankfully, this can be handled easily with Astro containers. I’ll show you how to do this in Practical Astro.
Taking it Further
I’ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.
So I built Practical Astro: Content Systems, 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.
If you want a cleaner, calmer content workflow, check it out.
I also write about Astro Patterns and Using Tailwind + CSS together on my blog. Come by and say hi!
Markdown + Astro = ❤️ originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Although Astro has built-in support for Markdown via .md files, I'd argue that your Markdown experience can be enhanced with MDX.
Markdown + Astro = ❤️ originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Markdown + Astro = ❤️

<p>This issue of What’s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-9/">What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p>This issue of <strong>What’s !important</strong> brings you <code>clip-path</code> jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.</p>



<span id="more-393515"></span>



<h3 id="creating-a-jigsaw-puzzle-using-clippath" class="wp-block-heading">Creating a jigsaw puzzle using <code>clip-path</code></h3>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_yyazxZv/f10deb6b871f36edff1c2a225f974676" src="//codepen.io/anon/embed/yyazxZv/f10deb6b871f36edff1c2a225f974676?height=450&amp;theme-id=1&amp;slug-hash=yyazxZv/f10deb6b871f36edff1c2a225f974676&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed yyazxZv/f10deb6b871f36edff1c2a225f974676" title="CodePen Embed yyazxZv/f10deb6b871f36edff1c2a225f974676" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p><a href="https://css-tricks.com/author/amitsheen/">Amit Sheen</a> demonstrated <a href="https://frontendmasters.com/blog/creating-puzzle-peices-in-css/" rel="noopener">how to create a full jigsaw puzzle using <code>clip-path</code></a>. While I doubt that you’ll need to create a jigsaw puzzle anytime soon, Amit’s walkthrough offers a fantastic way to acquaint yourself with this evolving CSS property that’s becoming more and more popular every day.</p>



<p>For example, Chrome Canary shipped <a href="https://bsky.app/profile/yisibl.bsky.social/post/3mj26ecigjk2x" rel="noopener">rounded <code>clip-path</code> polygons</a> only last week:</p>



<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:qgw47oogw2rjbhs2or2pcq37/app.bsky.feed.post/3mj26ecigjk2x" data-bluesky-cid="bafyreifwoqpmm4niuyjnokdlqg4zlcob7xcjkzynpvyhf75uccy26jy4ga" data-bluesky-embed-color-mode="system"><p lang="zh">I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. 

This is one of my favorite CSS features! Thanks to @lea.verou.me for bringing it to CSS.

Enable the `enable-experimental-web-platform-features` flag in Chrome Canary
codepen.io/yisi/pen/NPR&#8230;<br><br><a href="https://bsky.app/profile/did:plc:qgw47oogw2rjbhs2or2pcq37/post/3mj26ecigjk2x?ref_src=embed" rel="noopener">[image or embed]</a></p>&mdash; yisibl.bsky.social (<a href="https://bsky.app/profile/did:plc:qgw47oogw2rjbhs2or2pcq37?ref_src=embed" rel="noopener">@yisibl.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:qgw47oogw2rjbhs2or2pcq37/post/3mj26ecigjk2x?ref_src=embed" rel="noopener">Apr 9, 2026 at 7:25</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>



<p>And there’s also <a href="https://github.com/w3c/csswg-drafts/issues/8946" rel="noopener">talk of implementing other <code>corner-shape</code> keywords</a> such as <code>bevel</code>, too.</p>



<p>Finally, since we’re on the topic, and because I somehow completely missed it for <strong><a href="https://css-tricks.com/whats-important-8/">What’s !important #8</a></strong>, here’s <a href="https://karlkoch.me/writing/on-clip-path-animations" rel="noopener">Karl Koch demonstrating some really neat <code>clip-path</code> animations</a>.</p>



<figure class="wp-block-video"><video height="1006" style="aspect-ratio: 1384 / 1006;" width="1384" controls loop muted src="https://css-tricks.com/wp-content/uploads/2026/04/2.mp4"></video></figure>



<p><em>Get clippin’!</em></p>



<h3 id="view-transitions-toolkit" class="wp-block-heading">View transitions toolkit</h3>



<p>The Chrome DevRel team created a <a href="https://chrome.dev/view-transitions-toolkit/" rel="noopener">view transitions toolkit</a>, a collection of utilities that make working with view transitions a bit easier.</p>



<p>Here’s my favorite demo from the site:</p>



<figure class="wp-block-video"><video height="1844" style="aspect-ratio: 2940 / 1844;" width="2940" controls loop muted src="https://css-tricks.com/wp-content/uploads/2026/04/1.mp4"></video></figure>



<p><a href="https://developer.chrome.com/blog/element-scoped-view-transitions" rel="noopener">Chrome shipped element-scoped view transitions</a> only last month, so there’s no better time to dive into this toolkit.</p>



<h3 id="how-nameonly-containers-can-be-used-for-scoping" class="wp-block-heading">How name-only containers can be used for scoping</h3>



<p>Chris Coyier discussed the use of <a href="https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/" rel="noopener">name-only containers for scoping</a>, and how they compare to class names and <code>@scope</code>. Personally, I prefer <code>@scope</code> because it tends to result in cleaner HTML, and it seems that Chris has updated his stance to be more <code>@scope</code>-aligned too, but it really comes down to personal preference. What’s your take on it?</p>



<h3 id="hey-remember-subgrid" class="wp-block-heading">Hey, remember subgrid?</h3>



<p>At one point, <a href="https://css-tricks.com/complete-guide-css-grid-layout/#subgrid">subgrid</a> was one of the most highly-anticipated CSS features, but it’s been two and half years since it became Baseline Newly Available, and it’s barely made a dent in the CSS landscape. This is a shame, because subgrid can help us to break out of grids properly and avoid the ‘ol Michael Scofield/nested wrappers/negative margins extravaganza.</p>



<p>But don’t worry, David Bushell’s <a href="https://dbushell.com/2026/04/02/css-subgrid-is-super-good/" rel="noopener">very simple explanation of subgrid</a> has you covered.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="686" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3-1024x686.jpeg?resize=1024%2C686&#038;ssl=1" alt="A subgrid-powered web layout featuring Lorem Ipsum placeholder text and some images. Red vertical alignment markers depict the grid columns." class="wp-image-393518" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3.jpeg?resize=1024%2C686&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3.jpeg?resize=300%2C201&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3.jpeg?resize=768%2C514&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3.jpeg?resize=1536%2C1029&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/3.jpeg?w=1998&amp;ssl=1 1998w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">Source: <a href="https://dbushell.com/2026/04/02/css-subgrid-is-super-good/" rel="noopener">David Bushell</a> (although the red grid lines were added by me).</figcaption></figure>



<h3 id="you-might-not-needjavascript" class="wp-block-heading">You Might Not Need…<em>JavaScript?</em></h3>



<p>Remember <a href="https://youmightnotneedjquery.com/" rel="noopener">You Might Not Need jQuery</a>? Pavel Laptev’s <a href="https://blog.gitbutler.com/the-great-css-expansion" rel="noopener">The Great CSS Expansion</a> has a similar vibe, noting CSS alternatives to JavaScript libraries (and JavaScript in general) that are smaller and more performant.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="642" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-1024x642.png?resize=1024%2C642&#038;ssl=1" alt="A screenshot of a technical article featuring the Anchor Positioning heading, a comparison table of JavaScript libraries for anchor positioning, and a CSS code example." class="wp-image-393519" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-scaled.png?resize=1024%2C642&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-scaled.png?resize=768%2C481&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-scaled.png?resize=1536%2C962&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/4-scaled.png?resize=2048%2C1283&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<h3 id="missed-hits" class="wp-block-heading">Missed hits</h3>



<ul class="wp-block-list">
<li><a href="https://developer.chrome.com/release-notes/147" rel="noopener">Chrome 147</a>
<ul class="wp-block-list">
<li><a href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/"><code>contrast-color()</code></a> (now baseline)</li>



<li><a href="https://una.im/border-shape" rel="noopener"><code>border-shape</code></a> (no Safari or Firefox support)</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement" rel="noopener">CSSPseudoElement</a> JavaScript interface (no Safari or Firefox support)</li>



<li><code>scroll</code> range for view timelines (no Safari or Firefox support)</li>



<li>Element-scoped view transitions, as mentioned earlier (no Safari or Firefox support)</li>
</ul>
</li>



<li><a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-240" rel="noopener">Safari TP 240</a>
<ul class="wp-block-list">
<li><code>revert-rule</code> keyword (already supported by Chrome and Firefox)</li>
</ul>
</li>



<li><a href="https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-241" rel="noopener">Safari TP 241</a>
<ul class="wp-block-list">
<li><a href="https://css-tricks.com/almanac/properties/o/overflow-anchor/"><code>overflow-anchor</code></a> (already supported by Chrome and Firefox)</li>



<li><a href="https://css-tricks.com/we-completely-missed-width-height-stretch/"><code>stretch</code></a> (already supported by Chrome)</li>
</ul>
</li>
</ul>



<p>It’s becoming increasingly difficult to keep up with all of these new CSS features. I attempted way too many rounds of Keith Cirkel’s new <a href="https://www.keithcirkel.co.uk/css-or-bs/" rel="noopener">CSS or BS? quiz</a>, and my best score was only 18/20. Sad times. Let me know your score in the comments (<em>unless it’s higher than mine…</em>).</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="642" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-1024x642.png?resize=1024%2C642&#038;ssl=1" alt="A screenshot from an online quiz titled CSS or BS? showing the CSS property font-synthesis in a speech bubble, with buttons to select whether the property is real or fake." class="wp-image-393520" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-scaled.png?resize=1024%2C642&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-scaled.png?resize=768%2C481&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-scaled.png?resize=1536%2C962&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/5-scaled.png?resize=2048%2C1283&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-9/">What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


This issue of What’s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.




Creating a jigsaw puzzle using clip-path
CodePen Embed Fallback
Amit Sheen demonstrated how to create a full jigsaw puzzle using clip-path. While I doubt that you’ll need to create a jigsaw puzzle anytime soon, Amit’s walkthrough offers a fantastic way to acquaint yourself with this evolving CSS property that’s becoming more and more popular every day.
For example, Chrome Canary shipped rounded clip-path polygons only last week:
I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. 

This is one of my favorite CSS features! Thanks to @lea.verou.me for bringing it to CSS.

Enable the `enable-experimental-web-platform-features` flag in Chrome Canary
codepen.io/yisi/pen/NPR…
[image or embed]
— yisibl.bsky.social (@yisibl.bsky.social) Apr 9, 2026 at 7:25




And there’s also talk of implementing other corner-shape keywords such as bevel, too.
Finally, since we’re on the topic, and because I somehow completely missed it for What’s !important #8, here’s Karl Koch demonstrating some really neat clip-path animations.




Get clippin’!
View transitions toolkit
The Chrome DevRel team created a view transitions toolkit, a collection of utilities that make working with view transitions a bit easier.
Here’s my favorite demo from the site:




Chrome shipped element-scoped view transitions only last month, so there’s no better time to dive into this toolkit.
How name-only containers can be used for scoping
Chris Coyier discussed the use of name-only containers for scoping, and how they compare to class names and @scope. Personally, I prefer @scope because it tends to result in cleaner HTML, and it seems that Chris has updated his stance to be more @scope-aligned too, but it really comes down to personal preference. What’s your take on it?
Hey, remember subgrid?
At one point, subgrid was one of the most highly-anticipated CSS features, but it’s been two and half years since it became Baseline Newly Available, and it’s barely made a dent in the CSS landscape. This is a shame, because subgrid can help us to break out of grids properly and avoid the ‘ol Michael Scofield/nested wrappers/negative margins extravaganza.
But don’t worry, David Bushell’s very simple explanation of subgrid has you covered.
Source: David Bushell (although the red grid lines were added by me).



You Might Not Need…JavaScript?
Remember You Might Not Need jQuery? Pavel Laptev’s The Great CSS Expansion has a similar vibe, noting CSS alternatives to JavaScript libraries (and JavaScript in general) that are smaller and more performant.




Missed hits
Chrome 147

contrast-color() (now baseline)
border-shape (no Safari or Firefox support)
CSSPseudoElement JavaScript interface (no Safari or Firefox support)
scroll range for view timelines (no Safari or Firefox support)
Element-scoped view transitions, as mentioned earlier (no Safari or Firefox support)
Safari TP 240

revert-rule keyword (already supported by Chrome and Firefox)
Safari TP 241

overflow-anchor (already supported by Chrome and Firefox)
stretch (already supported by Chrome)
It’s becoming increasingly difficult to keep up with all of these new CSS features. I attempted way too many rounds of Keith Cirkel’s new CSS or BS? quiz, and my best score was only 18/20. Sad times. Let me know your score in the comments (unless it’s higher than mine…).


What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

This issue of What’s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.
What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.