CSS-TRICKS

<p>The <code>light-dark()</code> function is currently designed to support just two color schemes. Should it support others? Sunkanmi Fafowora says yes <em>and</em> no.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/should-the-css-light-dark-function-support-more-than-light-and-dark-values/">Should the CSS light-dark() Function Support More Than Light and Dark Values?</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>One of the newer CSS features that has piqued my interest: the&nbsp;<a href="https://css-tricks.com/almanac/functions/l/light-dark/"><code>light-dark()</code></a>&nbsp;function. And I’ve been closely following it ever since <a href="https://web.dev/articles/light-dark" rel="noopener">it became Baseline back in May 2024</a>.</p>



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




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="light-dark"></baseline-status>


<h3 class="wp-block-heading" id="the-lightdark-function-briefly">The <code>light-dark()</code> function, briefly</h3>


<p>If you don&#8217;t know, the&nbsp;<code>light-dark()</code>&nbsp;function takes two color arguments: one for light mode and one for dark mode. Hence, the name&nbsp;<code>light-dark()</code>. It toggles between the two light and dark values based on a user&#8217;s preferences. <a href="https://css-tricks.com/come-to-the-light-dark-side/">Sara Joy has a wonderful article</a> where you can get a much more detailed explanation.</p>



<p>The key thing is that the function requires you to use the&nbsp;<a href="https://css-tricks.com/almanac/properties/c/color-scheme/"><code>color-scheme</code></a>&nbsp;property to activate those two color modes:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(brown, black);
}</code></pre>



<p>And, depending on the user&#8217;s preference, one of those two modes is applied.</p>


<h3 class="wp-block-heading" id="just-two-modes">Just two modes?</h3>


<p>That said, I&#8217;ve been wondering for a while now: <strong>Should&nbsp;the <code>light-dark()</code> function support more than light and dark color modes?</strong></p>



<p><a href="https://css-tricks.com/almanac/functions/l/light-dark/">I wrote about <code>light-dark()</code> for the CSS-Tricks&nbsp;Almanac.</a> During my research, I found myself wishing the function could do more, specifically that it lacks support for other types of color schemes that a user might prefer, such as grayscale, high contrast, and low contrast.</p>



<p>Does <code>light-dark()</code> even need a high-contrast mode?</p>



<p>I&#8217;d say both yes <em>and</em> no. Let’s go back in time to when <code>light-dark()</code> was initially proposed somewhere around 2022. <a href="https://github.com/emilio" rel="noopener">Emilio Cobos</a> asked <a href="https://github.com/w3c/csswg-drafts/issues/7561" rel="noopener">for a function to support light and dark mode changes</a>, and <a href="https://github.com/w3c/csswg-drafts/pull/9439" rel="noopener">it was added to the specifications</a>.</p>



<p>Done and handled, right? Not so fast. <a href="https://github.com/w3c/csswg-drafts/issues/7561#event-10554262492" rel="noopener">The ticket was indeed closed</a> when <a href="https://github.com/w3c/csswg-drafts/issues/7561#issuecomment-1754069460" rel="noopener">Jacob Miller chimed in</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Just saw this from&nbsp;<a href="https://github.com/bramus" rel="noopener">@bramus</a>&#8216;s post, and I suspect that things are already closed / there&#8217;s no changing things now, but I see this as an approach that doesn&#8217;t actually solve for the issues people are facing with theming, and does so in a way that will create a trap for them when pursuing proper theming support.</p>



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



<p>We shouldn&#8217;t ship single-purpose tools for the browser, but rather ones that scale and we can build upon.</p>
</blockquote>



<p>Good thing he chimed in, because that prompted Bramus to <a href="https://github.com/w3c/csswg-drafts/issues/7561#issuecomment-1755088882" rel="noopener">reopen the ticket</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I think this was mistakingly done so. The end goal is to have something like&nbsp;<code>schemed-value()</code>, with&nbsp;<code>light-dark()</code>&nbsp;being an intermediary step towards the final solution.</p>
</blockquote>



<p>That&#8217;s a big deal! Bramus is saying that the&nbsp;<code>light-dark()</code>&nbsp;function is an intermediary solution on the way to a &nbsp;<code>schemed-value()</code>&nbsp;function. In other words, shipping <code>light-dark()</code> was never the intended end goal. It&#8217;s a step along the way to this other more robust <code>schemed-value()</code> feature.</p>


<h3 class="wp-block-heading" id="custom-color-schemes">Custom color schemes</h3>


<p><a href="https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/#schemed-value" rel="noopener">Bramus has already written</a> a bunch about the <code>schemed-value()</code> concept. It could look something like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(
    light lightblue, /* Value used for light color-scheme */ 
    dark crimson, /* Value used for dark color-scheme */ 
    --custom green /* Value used for --custom color-scheme */
    );
}</code></pre>



<p>This isn&#8217;t possible with <code>light-dark()</code>. In fact, before the function can support more than two modes, the&nbsp;<a href="https://css-tricks.com/almanac/properties/c/color-scheme/"><code>color-scheme</code></a>&nbsp;property has to be extended with more than the <code>light</code> and <code>dark</code> values. Only then can&nbsp;<code>light-dark()</code> be extended because, remember, <code>light-dark()</code>&nbsp;needs the&nbsp;<code>color-scheme</code>&nbsp;property in order to do its thing.</p>



<p>Specifically, we&#8217;d need <code>color-scheme</code> to accept some sort of &#8220;custom&#8221; color scheme value. <a href="https://github.com/w3c/csswg-drafts/issues/9660#issuecomment-1834713634" rel="noopener">Tab Atkins provides a possible example</a>&nbsp;in the ticket. The idea is to register a custom color scheme using a <code>@color-scheme</code> at-rule that defines the scheme&#8217;s properties, such as what particular color keywords are mapped to, and then use that color scheme&#8217;s ident on the <code>color-scheme</code> property that is declared on the root element:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@color-scheme --high-contast {
  base-scheme: dark;
  canvascolor: black;
  canvastext: white;
  accentcolor: white;
  /* other properties set to specific colors */
}

html {
  color-scheme: --high-contrast;
}</code></pre>



<p>With that in place, the custom color scheme can be used as its own standalone value in the forthcoming&nbsp;<code>schemed-value()</code>&nbsp;function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@color-scheme --high-contast {
  /* ... */
}

html {
  color-scheme: --high-contrast light dark;
}

body {
  color: schemed-value(--high-contrast, black, white);
}</code></pre>



<p>Breaking it all down:</p>



<ul class="wp-block-list">
<li>We register a custom color scheme (e.g. <code>--high-contrast</code>) in a <code>@color-scheme</code> at-rule.</li>



<li>We define the color scheme&#8217;s properties in the at-rule, such as whether its base theme is <code>light</code> or <code>dark</code> and what certain values color keywords map to.</li>



<li>We declare the custom color scheme on the <code>color-scheme</code> property at the root level (i.e., <code>html { color-scheme: --high-contrast;}</code>).</li>



<li>We apply the custom color scheme by declaring it on color-related properties by way of the <code>schemed-value()</code> function.</li>
</ul>



<p>So, not only will&nbsp;<code>light-dark()</code>&nbsp;change, the CSS&nbsp;<code>color-scheme</code>&nbsp;property will most likely have its own at-rule to allow for custom <code>color-scheme</code> values.</p>


<h3 class="wp-block-heading" id="we-need-more-color-theme-support-but-not-in-lightdark">We need more color theme support, but not in <code>light-dark()</code></h3>


<p>This begs my earlier question: Does the <code>light-dark()</code> function really need to support more than two color scheme modes? <a href="https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/#schemed-value" rel="noopener">Bramus has an answer</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>When <code>schemed-value()</code> ever becomes a thing,&nbsp;<code>light-dark()</code>&nbsp;would become syntactic sugar for it.</p>
</blockquote>



<p><em>A-ha!</em> This means <code>light-dark()</code>&nbsp;doesn&#8217;t need to support multiple modes because&nbsp;<code>schemed-value()</code>&nbsp;has the power to extend&nbsp;<code>light-dark()</code>&nbsp;by its own virtue:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">light-dark(&lt;color>, &lt;color>); = schemed-value(light &lt;color>, dark &lt;color>);</code></pre>



<p>Is <code>light-dark()</code> an intermediary step? Yes, it is. And should it be extended to support multiple modes, including custom color schemes? It certainly could, but it doesn&#8217;t have to be. Instead, we can register and define a custom color scheme in an at-rule and make sure the <code>color-scheme</code> property can read it. That way, we get the simplicity of a two-mode function that can be further abstracted to support additional custom modes, if needed.</p>



<p>In fact, it goes beyond color schemes. <a href="http://github.com/w3c/csswg-drafts/issues/12513" rel="noopener">There is even an open ticket to extend&nbsp;<code>light-dark()</code>&nbsp;for images</a>, and the discussions surrounding it seem to agree on a new function specifically designed for it.</p>


<h3 class="wp-block-heading" id="what-about-custom-functions">What about custom functions?</h3>


<p>But, wait! Doesn&#8217;t a lot of this sound a lot like what we&#8217;ve been hearing about the work happening with <a href="https://css-tricks.com/functions-in-css/">custom functions</a>? Indeed,&nbsp;<a href="https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-2237170305" rel="noopener">Tab came back with a possible approach using the&nbsp;<code>if()</code> function</a>, and the&nbsp;<a href="https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-2267203890" rel="noopener">Chris Lilley retagged the ticket as a result</a>. That&#8217;s when <a href="https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-2888805091" rel="noopener">Bramus demonstrated</a> how we could reasonably replicate the <code>light-dark()</code> function with a custom CSS function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  /* ensures light mode comes first */
  --scheme: light;

  /* dark mode is set here */
  @media (prefers-color-scheme: dark) {
    --scheme: dark;
  }
}

/* custom function returns any two values depending on whether system is in light or dark mode */
@function --light-dark(--light-color, --dark-color) {
  result: if(style(--scheme: dark): var(--dark-color) ; else: var(--light-color));
}

p {
  font-size: --light-dark(
    2rem,
    2.5rem
  ); /* returns 2rem if system is in light mode and 2.5rem if system is in dark mode */
}</code></pre>



<p>Nothing is set in stone!&nbsp;The only thing we know for sure is that we have a working&nbsp;<code>light-dark()</code> function and it&#8217;s Baseline widely available for use. Custom functions a work in progress and only available in&nbsp;<a href="https://caniuse.com/?search=%40function" rel="noopener">Chromium-based browsers</a> at the time I&#8217;m writing this.</p>


<h3 class="wp-block-heading" id="the-path-forward">The path forward</h3>


<p><a href="https://css-tricks.com/css-color-functions/">I’ve been exploring everything color-related for a while now</a>, and I’d like to know your thoughts: Are you excited about the upcoming changes to&nbsp;<code>light-dark()</code>? Do you think&nbsp;<code>light-dark()</code>&nbsp;should support more color modes like high contrast?</p>



<p>Let me know your thoughts in the comment section below. Feel free to also comment on any of the W3C GitHub comment threads linked in this post to share your thoughts and concerns for the coming new features.</p>


<h3 class="wp-block-heading" id="more-on-lightdark">More on <code>light-dark()</code></h3>


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

  <time datetime="2025-01-09" title="Originally published Jan 9, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Jul 8, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/l/light-dark/">
      light-dark()    </a>
  </h3>

          <a href="https://css-tricks.com/almanac/functions/l/light-dark/" class="almanac-example">
      <code class="language-css">html { color: light-dark(#000, #fff); }</code>
    </a>
  
      <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>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sunkanmifafowora/" aria-label="Author page of Sunkanmi Fafowora">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sunkanmifafowora/">
      Sunkanmi Fafowora    </a>
  </div>

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

  <time datetime="2024-10-25" title="Originally published Oct 25, 2024">
    <strong>
                
        Article
      </strong>

    on

    Oct 29, 2024  </time>

  <h3>
    <a href="https://css-tricks.com/come-to-the-light-dark-side/">
      Come to the light-dark() Side    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/dark-mode/" rel="tag">dark mode</a> <a href="https://css-tricks.com/tag/functions/" rel="tag">functions</a> <a href="https://css-tricks.com/tag/ui-ix-design/" rel="tag">UI/IX Design</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sarajw/" aria-label="Author page of Sara Joy">
      <img data-recalc-dims="1" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/sara-wallen-80x80.png?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sarajw/">
      Sara Joy    </a>
  </div>

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

  <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="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/css-functions/" rel="tag">CSS functions</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/danielschwarz/" aria-label="Author page of Daniel Schwarz">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d 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 articles" id="mini-post-387215">

  <time datetime="2025-06-25" title="Originally published Jun 25, 2025">
    <strong>
                
        Article
      </strong>

    on

    Jun 26, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/">
      Poking at the CSS if() Function a Little More: Conditional Color Theming    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/css-functions/" rel="tag">CSS functions</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/danielschwarz/" aria-label="Author page of Daniel Schwarz">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b6c928ce1b901c34f86f3856b5a3bcefe9a4fb94698b9778fb3df5802d66e25d 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>
    </div>
  
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/should-the-css-light-dark-function-support-more-than-light-and-dark-values/">Should the CSS light-dark() Function Support More Than Light and Dark Values?</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


One of the newer CSS features that has piqued my interest: the light-dark() function. And I’ve been closely following it ever since it became Baseline back in May 2024.








The light-dark() function, briefly
If you don’t know, the light-dark() function takes two color arguments: one for light mode and one for dark mode. Hence, the name light-dark(). It toggles between the two light and dark values based on a user’s preferences. Sara Joy has a wonderful article where you can get a much more detailed explanation.
The key thing is that the function requires you to use the color-scheme property to activate those two color modes:
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(brown, black);
}
And, depending on the user’s preference, one of those two modes is applied.
Just two modes?
That said, I’ve been wondering for a while now: Should the light-dark() function support more than light and dark color modes?
I wrote about light-dark() for the CSS-Tricks Almanac. During my research, I found myself wishing the function could do more, specifically that it lacks support for other types of color schemes that a user might prefer, such as grayscale, high contrast, and low contrast.
Does light-dark() even need a high-contrast mode?
I’d say both yes and no. Let’s go back in time to when light-dark() was initially proposed somewhere around 2022. Emilio Cobos asked for a function to support light and dark mode changes, and it was added to the specifications.
Done and handled, right? Not so fast. The ticket was indeed closed when Jacob Miller chimed in:
Just saw this from @bramus‘s post, and I suspect that things are already closed / there’s no changing things now, but I see this as an approach that doesn’t actually solve for the issues people are facing with theming, and does so in a way that will create a trap for them when pursuing proper theming support.
[…]
We shouldn’t ship single-purpose tools for the browser, but rather ones that scale and we can build upon.
Good thing he chimed in, because that prompted Bramus to reopen the ticket:
I think this was mistakingly done so. The end goal is to have something like schemed-value(), with light-dark() being an intermediary step towards the final solution.
That’s a big deal! Bramus is saying that the light-dark() function is an intermediary solution on the way to a  schemed-value() function. In other words, shipping light-dark() was never the intended end goal. It’s a step along the way to this other more robust schemed-value() feature.
Custom color schemes
Bramus has already written a bunch about the schemed-value() concept. It could look something like this:
:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(
    light lightblue, /* Value used for light color-scheme */ 
    dark crimson, /* Value used for dark color-scheme */ 
    --custom green /* Value used for --custom color-scheme */
    );
}
This isn’t possible with light-dark(). In fact, before the function can support more than two modes, the color-scheme property has to be extended with more than the light and dark values. Only then can light-dark() be extended because, remember, light-dark() needs the color-scheme property in order to do its thing.
Specifically, we’d need color-scheme to accept some sort of “custom” color scheme value. Tab Atkins provides a possible example in the ticket. The idea is to register a custom color scheme using a @color-scheme at-rule that defines the scheme’s properties, such as what particular color keywords are mapped to, and then use that color scheme’s ident on the color-scheme property that is declared on the root element:
@color-scheme --high-contast {
  base-scheme: dark;
  canvascolor: black;
  canvastext: white;
  accentcolor: white;
  /* other properties set to specific colors */
}

html {
  color-scheme: --high-contrast;
}
With that in place, the custom color scheme can be used as its own standalone value in the forthcoming schemed-value() function:
@color-scheme --high-contast {
  /* ... */
}

html {
  color-scheme: --high-contrast light dark;
}

body {
  color: schemed-value(--high-contrast, black, white);
}
Breaking it all down:
We register a custom color scheme (e.g. --high-contrast) in a @color-scheme at-rule.
We define the color scheme’s properties in the at-rule, such as whether its base theme is light or dark and what certain values color keywords map to.
We declare the custom color scheme on the color-scheme property at the root level (i.e., html { color-scheme: --high-contrast;}).
We apply the custom color scheme by declaring it on color-related properties by way of the schemed-value() function.
So, not only will light-dark() change, the CSS color-scheme property will most likely have its own at-rule to allow for custom color-scheme values.
We need more color theme support, but not in light-dark()
This begs my earlier question: Does the light-dark() function really need to support more than two color scheme modes? Bramus has an answer:
When schemed-value() ever becomes a thing, light-dark() would become syntactic sugar for it.
A-ha! This means light-dark() doesn’t need to support multiple modes because schemed-value() has the power to extend light-dark() by its own virtue:
light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>);
Is light-dark() an intermediary step? Yes, it is. And should it be extended to support multiple modes, including custom color schemes? It certainly could, but it doesn’t have to be. Instead, we can register and define a custom color scheme in an at-rule and make sure the color-scheme property can read it. That way, we get the simplicity of a two-mode function that can be further abstracted to support additional custom modes, if needed.
In fact, it goes beyond color schemes. There is even an open ticket to extend light-dark() for images, and the discussions surrounding it seem to agree on a new function specifically designed for it.
What about custom functions?
But, wait! Doesn’t a lot of this sound a lot like what we’ve been hearing about the work happening with custom functions? Indeed, Tab came back with a possible approach using the if() function, and the Chris Lilley retagged the ticket as a result. That’s when Bramus demonstrated how we could reasonably replicate the light-dark() function with a custom CSS function:
:root {
  /* ensures light mode comes first */
  --scheme: light;

  /* dark mode is set here */
  @media (prefers-color-scheme: dark) {
    --scheme: dark;
  }
}

/* custom function returns any two values depending on whether system is in light or dark mode */
@function --light-dark(--light-color, --dark-color) {
  result: if(style(--scheme: dark): var(--dark-color) ; else: var(--light-color));
}

p {
  font-size: --light-dark(
    2rem,
    2.5rem
  ); /* returns 2rem if system is in light mode and 2.5rem if system is in dark mode */
}
Nothing is set in stone! The only thing we know for sure is that we have a working light-dark() function and it’s Baseline widely available for use. Custom functions a work in progress and only available in Chromium-based browsers at the time I’m writing this.
The path forward
I’ve been exploring everything color-related for a while now, and I’d like to know your thoughts: Are you excited about the upcoming changes to light-dark()? Do you think light-dark() should support more color modes like high contrast?
Let me know your thoughts in the comment section below. Feel free to also comment on any of the W3C GitHub comment threads linked in this post to share your thoughts and concerns for the coming new features.
More on light-dark()
html { color: light-dark(#000, #fff); }
    
  
      
accessibility color    
    
  
    
      Sunkanmi Fafowora    
  
dark mode functions UI/IX Design    
    
  
    
      Sara Joy    
  
accessibility color CSS functions    
    
  
    
      Daniel Schwarz    
  
CSS functions    
    
  
    
      Daniel Schwarz    
  
Should the CSS light-dark() Function Support More Than Light and Dark Values? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The light-dark() function is currently designed to support just two color schemes. Should it support others? Sunkanmi Fafowora says yes and no.
Should the CSS light-dark() Function Support More Than Light and Dark Values? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Should the CSS light-dark() Function Support More Than Light and Dark Values?

<p>In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-elevator-a-pure-css-state-machine-with-floor-navigation/">CSS Elevator: A Pure CSS State Machine With Floor Navigation</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>As a developer with a passion for state machines, I’ve often found myself inspired by articles like “<a href="https://css-tricks.com/a-complete-state-machine-made-with-html-checkboxes-and-css/">A Complete State Machine Made with HTML Checkboxes and CSS</a>.” The power of pure CSS-driven state machines intrigued me, and I began to wonder: could I create something simpler, more interactive, and without the use of macros? This led to a project where I built an elevator simulation in CSS, complete with direction indicators, animated transitions, counters, and even accessibility features.</p>



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



<p>In this article, I’ll walk you through how I used modern CSS features — like <a href="https://css-tricks.com/a-complete-guide-to-custom-properties/">custom properties</a>, <a href="https://css-tricks.com/styling-counters-in-css/">counters</a>, the <code><a href="https://css-tricks.com/almanac/pseudo-selectors/h/has/" data-type="link" data-id="https://css-tricks.com/almanac/pseudo-selectors/h/has/">:has()</a></code> pseudo-class, and <code><a href="https://css-tricks.com/almanac/rules/p/property/" data-type="page" data-id="381807">@property</a></code> — to build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.</p>



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


<h3 class="wp-block-heading" id="defining-the-state-with-css-variables">Defining the State with CSS Variables</h3>


<p>The backbone of this elevator system is the use of CSS custom properties to track its state. Below, I define several <code>@property</code> rules to allow transitions and typed values:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@property --current-floor {
  syntax: "&lt;integer>";
  initial-value: 1;
  inherits: true;
}

@property --previous {
  syntax: "&lt;number>";
  initial-value: 1;
  inherits: true;
}

@property --relative-speed {
  syntax: "&lt;number>";
  initial-value: 4;
  inherits: true;
}

@property --direction {
  syntax: "&lt;integer>";
  initial-value: 0;
  inherits: true;
}</code></pre>



<p>These variables allow me to compare the elevator’s current floor to its previous one, calculate movement speed, and drive animations and transitions accordingly.</p>



<p>A regular CSS custom property (<code>--current-floor</code>) is great for passing values around, <a href="https://css-tricks.com/interpolating-numeric-css-variables/">but the browser treats everything like a string</a>: it doesn’t know if 5 is a number, a color, or the name of your cat. And if it doesn’t know, it can’t animate it.</p>



<p>That’s where <code>@property</code> comes in. By “registering” the variable, I can tell the browser exactly what it is (<code>&lt;number&gt;</code>, <code>&lt;length&gt;</code>, etc.), give it a starting value, and let it handle the smooth in-between frames. Without it, my elevator would just snap from floor to floor,&nbsp; and that’s not the ride experience I was going for.</p>


<h3 class="wp-block-heading" id="a-simple-ui-radio-buttons-for-floors">A Simple UI: Radio Buttons for Floors</h3>


<p>Radio buttons provide the state triggers. Each floor corresponds to a radio input, and I use <code>:has()</code> to detect which one is selected:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;input type="radio" id="floor1" name="floor" value="1" checked>
&lt;input type="radio" id="floor2" name="floor" value="2">
&lt;input type="radio" id="floor3" name="floor" value="3">
&lt;input type="radio" id="floor4" name="floor" value="4"></code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.elevator-system:has(#floor1:checked) {
  --current-floor: 1;
  --previous: var(--current-floor);
}

.elevator-system:has(#floor2:checked) {
  --current-floor: 2;
  --previous: var(--current-floor);
}</code></pre>



<p>This combination lets the elevator system become a state machine, where selecting a radio button triggers transitions and calculations.</p>


<h3 class="wp-block-heading" id="motion-via-dynamic-variables">Motion via Dynamic Variables</h3>


<p>To simulate elevator movement, I use <code>transform: translateY(...)</code> and calculate it with the <code>--current-floor</code> value:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.elevator {
  transform: translateY(calc((1 - var(--current-floor)) * var(--floor-height)));
  transition: transform calc(var(--relative-speed) * 1s);
}</code></pre>



<p>The travel duration is proportional to how many floors the elevator must traverse:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">--abs: calc(abs(var(--current-floor) - var(--previous)));
--relative-speed: calc(1 + var(--abs));</code></pre>



<p>Let’s break that down:</p>



<ul class="wp-block-list">
<li><code>--abs</code> gives the absolute number of floors to move.</li>



<li><code>--relative-speed</code> makes the animation slower when moving across more floors.</li>
</ul>



<p>So, if the elevator jumps from floor 1 to 4, the animation lasts longer than it does going from floor 2 to 3. All of this is derived using just math expressions in the CSS <code>calc()</code> function.</p>


<h3 class="wp-block-heading" id="determining-direction-and-arrow-behavior">Determining Direction and Arrow Behavior</h3>


<p>The elevator’s arrow points up or down based on the change in floor:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">--direction: clamp(-1, calc(var(--current-floor) - var(--previous)), 1);

.arrow {
  scale: calc(var(--direction) * 2);
  opacity: abs(var(--direction));
  transition: all 0.15s ease-in-out;
}</code></pre>



<p>Here’s what’s happening:</p>



<ul class="wp-block-list">
<li>The <code>clamp()</code> function limits the result between <code>-1</code> and <code>1</code>.</li>



<li><code>1</code> means upward movement, <code>-1</code> is downward, and <code>0</code> means stationary.</li>



<li>This result is used to scale the arrow, flipping it and adjusting its opacity accordingly.</li>
</ul>



<p>It’s a lightweight way to convey directional logic using math and visual cues with no scripting.</p>



<figure class="wp-block-video"><video controls src="https://css-tricks.com/wp-content/uploads/2025/08/arrows-up-down.mov" playsinline></video></figure>


<h3 class="wp-block-heading" id="simulating-memory-with-delay">Simulating Memory with <code>--delay</code></h3>


<p>CSS doesn’t store previous state natively. I simulate this by delaying updates to the <code>--previous</code> property:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.elevator-system {
  transition: --previous calc(var(--delay) * 1s);
  --delay: 1;
}</code></pre>



<p>While the delay runs, the <code>--previous</code> value lags behind the <code>--current-floor</code>. That lets me calculate direction and speed during the animation. Once the delay ends, <code>--previous</code> catches up. This delay-based memory trick allows CSS to approximate state transitions normally done with JavaScript.</p>


<h3 class="wp-block-heading" id="floor-counters-and-unicode-styling">Floor Counters and Unicode Styling</h3>


<p>Displaying floor numbers elegantly became a joy thanks to <a href="https://css-tricks.com/almanac/functions/c/counters/" data-type="link" data-id="https://css-tricks.com/almanac/functions/c/counters/">CSS counters</a>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#floor-display:before {
  counter-reset: display var(--current-floor);
  content: counter(display, top-display);
}</code></pre>



<p>I defined a custom counter style using Unicode circled numbers:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@counter-style top-display {
  system: cyclic;
  symbols: "\278A" "\2781" "\2782" "\2783";
  suffix: "";
}</code></pre>



<p>The <code>\278A</code> to <code>\2783</code> characters correspond to the ➊, ➋, ➌, ➃  symbols and give a unique, visual charm to the display. The elevator doesn’t just say “3,” but displays it with typographic flair. This approach is handy when you want to go beyond raw digits and apply symbolic or visual meaning using nothing but CSS.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="728" height="260" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/unicode-numbers.png?resize=728%2C260&#038;ssl=1" alt="Unicode characters replacing numbers 1 through 4 with circled alternatives" class="wp-image-388693" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/unicode-numbers.png?w=728&amp;ssl=1 728w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/unicode-numbers.png?resize=300%2C107&amp;ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>


<h3 class="wp-block-heading" id="accessibility-with-arialive">Accessibility with <code>aria-live</code></h3>


<p>Accessibility matters. While CSS can’t change DOM text, it can still update screenreader-visible content using <code>::before</code> and <code>counter()</code>.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="sr-only" aria-live="polite" id="floor-announcer">&lt;/div></code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#floor-announcer::before {
  counter-reset: floor var(--current-floor);
  content: "Now on floor " counter(floor);
}</code></pre>



<p>Add a <code>.sr-only</code> class to <a href="https://css-tricks.com/hiding-content-responsibly/">visually hide it but expose it to assistive tech</a>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}</code></pre>



<p>This keeps the experience inclusive and aligned with accessibility standards.</p>


<h3 class="wp-block-heading" id="practical-applications-of-these-techniques">Practical Applications of These Techniques</h3>


<p>This elevator is more than a toy. It’s a blueprint. Consider these real-world uses:</p>



<ul class="wp-block-list">
<li>Interactive prototypes without JavaScript</li>



<li>Progress indicators in forms using live state</li>



<li>Game UIs with inventory or status mechanics</li>



<li>Logic puzzles or educational tools (CSS-only state tracking!)</li>



<li>Reduced JavaScript dependencies for performance or sandboxed environments</li>
</ul>



<p>These techniques are especially useful in static apps or restricted scripting environments (e.g., emails, certain content management system widgets).</p>


<h3 class="wp-block-heading" id="final-thoughts">Final Thoughts</h3>


<p>What started as a small experiment turned into a functional CSS state machine that animates, signals direction, and announces changes, completely without JavaScript. Modern CSS can do more than we often give it credit for. With <code>:has()</code>, <code>@property</code>, counters, and a bit of clever math, you can build systems that are reactive, beautiful, and even accessible.</p>



<p>If you try out this technique, I’d love to see your take. And if you remix the elevator  (maybe add more floors or challenges?), send it my way!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-elevator-a-pure-css-state-machine-with-floor-navigation/">CSS Elevator: A Pure CSS State Machine With Floor Navigation</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


As a developer with a passion for state machines, I’ve often found myself inspired by articles like “A Complete State Machine Made with HTML Checkboxes and CSS.” The power of pure CSS-driven state machines intrigued me, and I began to wonder: could I create something simpler, more interactive, and without the use of macros? This led to a project where I built an elevator simulation in CSS, complete with direction indicators, animated transitions, counters, and even accessibility features.




In this article, I’ll walk you through how I used modern CSS features — like custom properties, counters, the :has() pseudo-class, and @property — to build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.
CodePen Embed Fallback
Defining the State with CSS Variables
The backbone of this elevator system is the use of CSS custom properties to track its state. Below, I define several @property rules to allow transitions and typed values:
@property --current-floor {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}

@property --previous {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --relative-speed {
  syntax: "<number>";
  initial-value: 4;
  inherits: true;
}

@property --direction {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
These variables allow me to compare the elevator’s current floor to its previous one, calculate movement speed, and drive animations and transitions accordingly.
A regular CSS custom property (--current-floor) is great for passing values around, but the browser treats everything like a string: it doesn’t know if 5 is a number, a color, or the name of your cat. And if it doesn’t know, it can’t animate it.
That’s where @property comes in. By “registering” the variable, I can tell the browser exactly what it is (<number>, <length>, etc.), give it a starting value, and let it handle the smooth in-between frames. Without it, my elevator would just snap from floor to floor,  and that’s not the ride experience I was going for.
A Simple UI: Radio Buttons for Floors
Radio buttons provide the state triggers. Each floor corresponds to a radio input, and I use :has() to detect which one is selected:
<input type="radio" id="floor1" name="floor" value="1" checked>
<input type="radio" id="floor2" name="floor" value="2">
<input type="radio" id="floor3" name="floor" value="3">
<input type="radio" id="floor4" name="floor" value="4">
.elevator-system:has(#floor1:checked) {
  --current-floor: 1;
  --previous: var(--current-floor);
}

.elevator-system:has(#floor2:checked) {
  --current-floor: 2;
  --previous: var(--current-floor);
}
This combination lets the elevator system become a state machine, where selecting a radio button triggers transitions and calculations.
Motion via Dynamic Variables
To simulate elevator movement, I use transform: translateY(...) and calculate it with the --current-floor value:
.elevator {
  transform: translateY(calc((1 - var(--current-floor)) * var(--floor-height)));
  transition: transform calc(var(--relative-speed) * 1s);
}
The travel duration is proportional to how many floors the elevator must traverse:
--abs: calc(abs(var(--current-floor) - var(--previous)));
--relative-speed: calc(1 + var(--abs));
Let’s break that down:
--abs gives the absolute number of floors to move.
--relative-speed makes the animation slower when moving across more floors.
So, if the elevator jumps from floor 1 to 4, the animation lasts longer than it does going from floor 2 to 3. All of this is derived using just math expressions in the CSS calc() function.
Determining Direction and Arrow Behavior
The elevator’s arrow points up or down based on the change in floor:
--direction: clamp(-1, calc(var(--current-floor) - var(--previous)), 1);

.arrow {
  scale: calc(var(--direction) * 2);
  opacity: abs(var(--direction));
  transition: all 0.15s ease-in-out;
}
Here’s what’s happening:
The clamp() function limits the result between -1 and 1.
1 means upward movement, -1 is downward, and 0 means stationary.
This result is used to scale the arrow, flipping it and adjusting its opacity accordingly.
It’s a lightweight way to convey directional logic using math and visual cues with no scripting.



Simulating Memory with --delay
CSS doesn’t store previous state natively. I simulate this by delaying updates to the --previous property:
.elevator-system {
  transition: --previous calc(var(--delay) * 1s);
  --delay: 1;
}
While the delay runs, the --previous value lags behind the --current-floor. That lets me calculate direction and speed during the animation. Once the delay ends, --previous catches up. This delay-based memory trick allows CSS to approximate state transitions normally done with JavaScript.
Floor Counters and Unicode Styling
Displaying floor numbers elegantly became a joy thanks to CSS counters:
#floor-display:before {
  counter-reset: display var(--current-floor);
  content: counter(display, top-display);
}
I defined a custom counter style using Unicode circled numbers:
@counter-style top-display {
  system: cyclic;
  symbols: "\278A" "\2781" "\2782" "\2783";
  suffix: "";
}
The \278A to \2783 characters correspond to the ➊, ➋, ➌, ➃  symbols and give a unique, visual charm to the display. The elevator doesn’t just say “3,” but displays it with typographic flair. This approach is handy when you want to go beyond raw digits and apply symbolic or visual meaning using nothing but CSS.



Accessibility with aria-live
Accessibility matters. While CSS can’t change DOM text, it can still update screenreader-visible content using ::before and counter().
<div class="sr-only" aria-live="polite" id="floor-announcer"></div>
#floor-announcer::before {
  counter-reset: floor var(--current-floor);
  content: "Now on floor " counter(floor);
}
Add a .sr-only class to visually hide it but expose it to assistive tech:
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
This keeps the experience inclusive and aligned with accessibility standards.
Practical Applications of These Techniques
This elevator is more than a toy. It’s a blueprint. Consider these real-world uses:
Interactive prototypes without JavaScript
Progress indicators in forms using live state
Game UIs with inventory or status mechanics
Logic puzzles or educational tools (CSS-only state tracking!)
Reduced JavaScript dependencies for performance or sandboxed environments
These techniques are especially useful in static apps or restricted scripting environments (e.g., emails, certain content management system widgets).
Final Thoughts
What started as a small experiment turned into a functional CSS state machine that animates, signals direction, and announces changes, completely without JavaScript. Modern CSS can do more than we often give it credit for. With :has(), @property, counters, and a bit of clever math, you can build systems that are reactive, beautiful, and even accessible.
If you try out this technique, I’d love to see your take. And if you remix the elevator  (maybe add more floors or challenges?), send it my way!
CSS Elevator: A Pure CSS State Machine With Floor Navigation originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.
CSS Elevator: A Pure CSS State Machine With Floor Navigation originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS Elevator: A Pure CSS State Machine With Floor Navigation

<p>Here's an approach for animating products added to a shopping cart that handles an infinite number of items using a variation of the ol' Checkbox Hack.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-radio-button-shopping-cart-trick/">A Radio Button Shopping Cart Trick</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p class="is-style-explanation"><strong>Editor&#8217;s note:</strong> This is a really clever idea that Preethi shared, but you will also see that it comes with accessibility drawbacks because it uses duplicated interactive elements. There are other ways to approach this sort of thing, as Preethi mentions, and we&#8217;ll look at one of them in a future article.</p>



<p>Two large pizzas for yourself, or twelve small ones for the kids party — everyone’s gone through the process of adding items to an online cart. Groceries. Clothing. Deli orders. It’s great when that process is simple, efficient, and maybe even a little quirky.</p>



<p>This post covers a design referred as infinite selection. <em>Metaphorically</em> infinite.</p>



<p>Here’s how it works:</p>



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



<p>That’s right, you click an item and it jumps right into the shopping cart, complete with a smooth transition that shows it happening. You can add as many items as you want!</p>



<p>And guess what: all of it is done in CSS — well, except the part that keeps count of selected items — and all it took is a combination of radio form inputs in the markup.</p>



<p>I’m going to walk you through the code, starting with the layout, but before that, I want to say up-front that this is just one approach. There are for sure other ways to go about this, and this specific way comes with its own considerations and limitations that we’ll get into.</p>



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


<h3 class="wp-block-heading" id="the-layout">The Layout</h3>


<p>Each item (or product, whatever you want to call it) is a wrapper that contains two radio form inputs sharing the same <code>name</code> value — a <em>radio group</em>.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="items flat-white">
  &lt;input type="radio" name="r3" title="Flat White">
  &lt;input type="radio" name="r3" title="Flat White">
&lt;/div></code></pre>



<p>When you check one in a duo, the other gets unchecked automatically, leading to a see-saw of check and uncheck between the two, no matter which one is clicked.</p>



<p>Each item (or radio group) is absolutely positioned, as are the two inputs it contains:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.items {   
  position: absolute;

  input { 
    position: absolute; 
    inset: 0; 
  }
}</code></pre>



<p>The <code>inset</code> property is stretching the inputs to cover the entire space, making sure they are clickable without leaving any dead area around them.</p>



<p>Now we arrange everything in a layout. We’ll use <code>translate</code> to move the items from a single point (where the centered cart is) to another point that is a litte higher and spread out. You can code this layout anyway you like, as long as the radio buttons inside can make their way to the cart when they are selected.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.items {
  --y: 100px; /* Vertical distance from the cart */

  &amp;:not(.cart) {
    transform: translate(var(--x), calc(-1 * var(--y)));
  }
  &amp;.espresso { 
    --x: 0px;  /* Horizontal dist. from the cart */
  }
  &amp;.cappuccino { 
    --x: -100%; 
  }
  &amp;.flat-white { 
    --x: 100%; 
  }
}</code></pre>



<p>So, yeah, a little bit of configuration to get things just right for your specific use case. It’s a little bit of <a href="https://css-tricks.com/magic-numbers-in-css/">magic numbering</a> that perhaps another approach could abstract away.</p>


<h3 class="wp-block-heading" id="selecting-items">Selecting Items</h3>


<p>When an item (<code>&lt;input&gt;</code>) is selected (<code>:checked</code>), it shrinks and moves (<code>translate</code>) to where the cart is:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">input:checked {
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
}</code></pre>



<p>What happens under the hood is that the second radio input in the group is <em>checked</em>, which immediately <em>unchecks</em> the first input in the group, thanks to the fact that they share the same <code>name</code> attribute in the HTML. This gives us a bit of boolean logic a là the <a href="https://css-tricks.com/the-checkbox-hack/">Checkbox Hack</a> that we can use to trigger the transition.</p>



<p>So, if that last bit of CSS moves the selected item to the shopping cart, then we need a <code>transition</code> to animate it. Otherwise, the item sorta zaps itself over, Star Trek style, without you telling.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">input:checked{
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
  transition: transform .6s linear;
}</code></pre>


<h3 class="wp-block-heading" id="keeping-count">Keeping Count</h3>


<p>The whole point of this post is getting a selected item to the cart. There’s no “Cart” page to speak of, at least for the purposes of this demo. So, I thought it would be a good idea to show how many items have been added to the cart. A little label with the count should do the trick.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">let n = 0;
const CART_CNT = document.querySelector("output");
document.querySelectorAll("[type='radio']").forEach(radio => {
  radio.onclick = () => {
    CART_CNT.innerText = ++n;
    CART_CNT.setAttribute("arial-label", `${n}`)
  }
});</code></pre>



<p>Basically, we’re selecting the cart object (the <code>&lt;output&gt;</code> element) and, for each click on a radio input, we increase an integer that represents the count, which is slapped onto the shopping card icon as a label. Sorry, no removing items from the cart for this example… you’re completely locked in. &#x1f605;</p>


<h3 class="wp-block-heading" id="accessibility-">Accessibility?</h3>


<p>Honestly, I wrestled with this one and there probably isn’t a bulletproof way to get this demo read consistently by screen readers. We’re working with two interactive elements in each group, and need to juggle how they’re exposed to assistive tech when toggling their states. As it is, there are cases where one radio input is read when toggling into an item, and the other input is read when toggling back to it. In other cases, both inputs in the groups are announced, which suggests multiple options in each group when there’s only one.</p>



<p>I did add a hidden <code>&lt;span&gt;</code> in the markup that is revealed with keyboard interaction as a form of instruction. I’ve also inserted an <code>aria-label</code> on the <code>&lt;output&gt;</code> that announces the total number of cart items as they are added.</p>



<p>Here’s the final demo once again:</p>



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


<h3 class="wp-block-heading" id="maybe-use-view-transitions-instead-">Maybe Use View Transitions Instead?</h3>


<p>I wanted to share this trick because I think it’s a clever approach that isn’t immediately obvious at first glance. But this also smells like a situation where the modern <a href="https://css-tricks.com/toe-dipping-into-view-transitions/">View Transition API</a> might be relevant.</p>



<p><a href="https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/#example-3-running-multiple-transitions" rel="noopener">Adrian Bece writes all about it in a Smashing Magazine piece.</a> In fact, his example is exactly the same: animating items added to a shopping cart. What’s nice about this is that it only takes two elements to build the transition: the item and the cart label. Using CSS, we can hook those elements up with a <a href="https://css-tricks.com/almanac/properties/v/view-transition-name/"><code>view-transition-name</code></a>, define a <a href="https://css-tricks.com/almanac/rules/k/keyframes/"><code>@keyframes</code></a> animation for moving the item, then trigger it on click. No duplicate elements or state juggling needed!</p>



<p>Alternatively, if you’re working with just a few items then perhaps a checkbox input is another possible approach that only requires a single element per item. the downside, of course, is that it limits how many items you can add to the card.</p>



<p>But if you need to add an <em>infinite</em> number of items and the View Transition API is out of scope, then perhaps this radio input approach is worth considering.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-radio-button-shopping-cart-trick/">A Radio Button Shopping Cart Trick</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Editor’s note: This is a really clever idea that Preethi shared, but you will also see that it comes with accessibility drawbacks because it uses duplicated interactive elements. There are other ways to approach this sort of thing, as Preethi mentions, and we’ll look at one of them in a future article.
Two large pizzas for yourself, or twelve small ones for the kids party — everyone’s gone through the process of adding items to an online cart. Groceries. Clothing. Deli orders. It’s great when that process is simple, efficient, and maybe even a little quirky.
This post covers a design referred as infinite selection. Metaphorically infinite.
Here’s how it works:
CodePen Embed Fallback
That’s right, you click an item and it jumps right into the shopping cart, complete with a smooth transition that shows it happening. You can add as many items as you want!
And guess what: all of it is done in CSS — well, except the part that keeps count of selected items — and all it took is a combination of radio form inputs in the markup.
I’m going to walk you through the code, starting with the layout, but before that, I want to say up-front that this is just one approach. There are for sure other ways to go about this, and this specific way comes with its own considerations and limitations that we’ll get into.



The Layout
Each item (or product, whatever you want to call it) is a wrapper that contains two radio form inputs sharing the same name value — a radio group.
<div class="items flat-white">
  <input type="radio" name="r3" title="Flat White">
  <input type="radio" name="r3" title="Flat White">
</div>
When you check one in a duo, the other gets unchecked automatically, leading to a see-saw of check and uncheck between the two, no matter which one is clicked.
Each item (or radio group) is absolutely positioned, as are the two inputs it contains:
.items {   
  position: absolute;

  input { 
    position: absolute; 
    inset: 0; 
  }
}
The inset property is stretching the inputs to cover the entire space, making sure they are clickable without leaving any dead area around them.
Now we arrange everything in a layout. We’ll use translate to move the items from a single point (where the centered cart is) to another point that is a litte higher and spread out. You can code this layout anyway you like, as long as the radio buttons inside can make their way to the cart when they are selected.
.items {
  --y: 100px; /* Vertical distance from the cart */

  &:not(.cart) {
    transform: translate(var(--x), calc(-1 * var(--y)));
  }
  &.espresso { 
    --x: 0px;  /* Horizontal dist. from the cart */
  }
  &.cappuccino { 
    --x: -100%; 
  }
  &.flat-white { 
    --x: 100%; 
  }
}
So, yeah, a little bit of configuration to get things just right for your specific use case. It’s a little bit of magic numbering that perhaps another approach could abstract away.
Selecting Items
When an item (<input>) is selected (:checked), it shrinks and moves (translate) to where the cart is:
input:checked {
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
}
What happens under the hood is that the second radio input in the group is checked, which immediately unchecks the first input in the group, thanks to the fact that they share the same name attribute in the HTML. This gives us a bit of boolean logic a là the Checkbox Hack that we can use to trigger the transition.
So, if that last bit of CSS moves the selected item to the shopping cart, then we need a transition to animate it. Otherwise, the item sorta zaps itself over, Star Trek style, without you telling.
input:checked{
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
  transition: transform .6s linear;
}
Keeping Count
The whole point of this post is getting a selected item to the cart. There’s no “Cart” page to speak of, at least for the purposes of this demo. So, I thought it would be a good idea to show how many items have been added to the cart. A little label with the count should do the trick.
let n = 0;
const CART_CNT = document.querySelector("output");
document.querySelectorAll("[type='radio']").forEach(radio => {
  radio.onclick = () => {
    CART_CNT.innerText = ++n;
    CART_CNT.setAttribute("arial-label", `${n}`)
  }
});
Basically, we’re selecting the cart object (the <output> element) and, for each click on a radio input, we increase an integer that represents the count, which is slapped onto the shopping card icon as a label. Sorry, no removing items from the cart for this example… you’re completely locked in. 😅
Accessibility?
Honestly, I wrestled with this one and there probably isn’t a bulletproof way to get this demo read consistently by screen readers. We’re working with two interactive elements in each group, and need to juggle how they’re exposed to assistive tech when toggling their states. As it is, there are cases where one radio input is read when toggling into an item, and the other input is read when toggling back to it. In other cases, both inputs in the groups are announced, which suggests multiple options in each group when there’s only one.
I did add a hidden <span> in the markup that is revealed with keyboard interaction as a form of instruction. I’ve also inserted an aria-label on the <output> that announces the total number of cart items as they are added.
Here’s the final demo once again:
CodePen Embed Fallback
Maybe Use View Transitions Instead?
I wanted to share this trick because I think it’s a clever approach that isn’t immediately obvious at first glance. But this also smells like a situation where the modern View Transition API might be relevant.
Adrian Bece writes all about it in a Smashing Magazine piece. In fact, his example is exactly the same: animating items added to a shopping cart. What’s nice about this is that it only takes two elements to build the transition: the item and the cart label. Using CSS, we can hook those elements up with a view-transition-name, define a @keyframes animation for moving the item, then trigger it on click. No duplicate elements or state juggling needed!
Alternatively, if you’re working with just a few items then perhaps a checkbox input is another possible approach that only requires a single element per item. the downside, of course, is that it limits how many items you can add to the card.
But if you need to add an infinite number of items and the View Transition API is out of scope, then perhaps this radio input approach is worth considering.
A Radio Button Shopping Cart Trick originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Here's an approach for animating products added to a shopping cart that handles an infinite number of items using a variation of the ol' Checkbox Hack.
A Radio Button Shopping Cart Trick originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Radio Button Shopping Cart Trick

<p>Images in long-form content can (and often should) do more than illustrate. They help set the pace, influence how readers feel, and add character that words alone can’t always convey.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/getting-creative-with-images-in-long-form-content/">Getting Creative With Images in Long-Form Content</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


When you picture placing images in long-form content — like articles, case studies, or reports — the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly.
Why do so many long-form articles feel visually flat? Why do images so often seem bolted on, rather than part of the story? And how does that affect engagement, comprehension, or tone?
Images in long-form content can (and often should) do more than illustrate. They can shape how people navigate, engage with, and interpret what they’re reading. They help set the pace, influence how readers feel, and add character that words alone can’t always convey.
So, how do you use images to add personality, rhythm, and even surprise someone along the way? Here’s how I do it.




Patty Meltt is an up-and-coming country music sensation.



My brief: Patty Meltt is an up-and-coming country music sensation, and she needed a website to launch her new album and tour. She wanted it to be distinctive-looking and memorable, so she called Stuff & Nonsense. Patty’s not real, but the challenges of designing and developing sites like hers are.
First, a not-so-long-form recap.
You probably already know that grids make designs feel predictable, rhythmic, and structured, which helps readers feel comfortable when consuming long-form content. Grids bring balance. They help keep things aligned, organized, and easy to follow, which makes complex information feel less overwhelming.
Complex information feels less overwhelming, but the result is underwhelming.



But once I’ve established a grid, breaking it occasionally can be a powerful way to draw attention to key content, add personality, and prevent layouts from feeling formulaic or flat.
Pulling images into margins creates a casual, energetic feel.



For example, in long-form content, I might pull images into the margins or nudge them out of alignment to create a more casual, energetic feel. I could expand an image’s inline size out of its column using negative margin values:
figure {
  inline-size: 120%;
  margin-inline-start: -10%; 
  margin-inline-end: -10%;
}
Used sparingly, these breaks serve as punctuation, guiding the reader’s eye and adding moments of visual interest to the text’s flow.
Text width or full-bleed
Once we start thinking creatively about images in long-form content, one question usually comes to mind: how wide should those images be?
The image sits within the column width.



Should they sit flush with the edges of the text column?
img {
  inline-size: 100%;
  max-inline-size: 100%;
}
The figure element expands to fill the viewport width.



Or expand to fill the entire width of the page?
figure {
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}
Both approaches are valid, but it’s important to understand how they serve different purposes.
Book and newspaper layouts traditionally keep images confined to the text column, reinforcing the flow of words. Magazines, on the other hand, regularly break the grid with full-bleed imagery for dramatic effect.
In articles, news stories, and reports, images set inside the column flow with the copy, giving a sense of order and rhythm. This works especially well for charts, diagrams, and infographics, where it’s important to keep things clear and easy to read. But in the wrong context, this approach can feel predictable and lacking in energy
Stretching images beyond the content column to fill the full width of the viewport creates instant impact. These moments act like dramatic pauses — they purposefully break the reading rhythm, reset attention, and shift focus from words to visuals. That said, these images should always serve a purpose. They lose their impact quickly if they’re overused or feel like filler.
Using a modular grid for multiple images
So far, I’ve focused on single images in the flow of text. But what if I want to present a collection? How can I arrange a sequence of images that belong together?




Instead of stacking images vertically, I can use a modular grid to create a cohesive arrangement with precise control over placement and scale. What’s a modular grid? It’s a structure built from repeated units — typically squares or rectangles — arranged horizontally and vertically to bring order to varied content. I can place individual images within single modules, or span multiple modules to create larger, more impactful zones.
figure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

figure > *:nth-child(1) {
  grid-column: 1 / -1;
}




Modular grids also help us break free from conventional, column-based layouts, adding variety and keeping things visually interesting without relying on full-bleed images every time. They give me the flexibility to mix landscape and portrait images within the same space. I can vary scale, making some images larger for emphasis and others smaller in support. It’s a layout technique that groups related visuals, reinforcing the relationship between them.
CSS Shapes and expressive possibilities
Whatever shape the subject takes, every image sits inside a box. By default, text flows above or below that box. If I float an image left or right, the adjacent text wraps around the rectangle, regardless of what’s inside. When a subject fills its box edge to edge, this wrapping feels natural.




But when the subject is cut out or has an irregular outline, that rectangular wrap can feel awkward.




CSS Shapes solves that problem by allowing text to wrap around any custom shape I define. Letting text flow around a shape isn’t just decorative — it adds energy and keeps the page feeling lively. Using shape-outside affects the reading experience. It slows people down slightly, creates visual rhythm, and adds contrast to the steady march of regular text blocks. It also brings text and image into a closer relationship, making them feel part of a shared composition rather than isolated elements.




Most shape-outside explanations start with circles or ellipses, but I think they should begin with something more expressive: wrapping text around an image’s alpha channel.
img {
  float: left;
  width: 300px;
  height: auto;
  shape-outside: url('patty.webp');
  shape-image-threshold: .5;
  shape-margin: 1rem;
}
No clipping paths. No polygons. Just letting the natural silhouette of the image shape the text. It’s a small detail that makes a design feel more considered, more crafted, and more human.
Integrating captions into a design
Captions don’t have to sit quietly beneath an image. They can play a far more expressive role in shaping how an image is perceived and understood. Most captions look like afterthoughts to me — small, grey text, tucked beneath a picture.




But when I think more deliberately about their positioning and styling, captions become an active part of the design. They can help guide attention, highlight important points, and bring a bit more personality to the page.
No rule says captions must sit below an image. Why not treat them as design elements in their own right? I might position a caption to the left or right of an image.
figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

figure img {
  grid-column: 1 / 6;
}

figcaption {
  grid-column: 6;
}




Or let it overlap part of the picture itself:
figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

figure img {
  grid-column: 1 / 6;
  grid-row: 1;
}

figcaption {
  grid-column: 5 / -1;
  grid-row: 1;
}




Captions connect images and text. Done well, they can elevate as well as explain. They don’t have to look conventional either; you can style them to look like pull quotes or side notes.




I might design a caption to echo a pull quote, or combine it with graphic elements to make it feel less like a label and more like part of the story it’s helping to tell.
The power of whitespace
Until now, I’ve concentrated on the images themselves — how they’re captioned, positioned, and sized. But there’s something else that’s just as important: the space around them.
Whitespace isn’t empty space; it’s active. It shapes how content feels, how it flows, and how it’s read. The margins, padding, and negative space around an image influence how much attention it attracts and how comfortably it sits within a page.
Tight spacing creates tension.



Tighter spacing is useful when grouping images, but it also creates tension. In contrast, generous margins give an image more breathing room.
figure {
  margin-block: 3rem;
}
Generous margins create pauses.



Like a line break in a poem or a pause in conversation, whitespace slows things down and gives people natural moments to pause while reading.
Conclusion
Images in long-form content aren’t just illustrations. They shape how people experience what they’re reading — how they move through it, how it feels, and what they remember. By thinking beyond the default rectangle, we can use images to create rhythm, personality, and even moments of surprise.
Whether it’s by breaking the grid, choosing full-bleed over inline, wrapping text, or designing playful captions, it’s about being deliberate. So next time you’re laying out a long article, don’t wonder, “Where can I put an image?” Ask, “How can this image help shape someone’s experience?”
Getting Creative With Images in Long-Form Content originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Images in long-form content can (and often should) do more than illustrate. They help set the pace, influence how readers feel, and add character that words alone can’t always convey.
Getting Creative With Images in Long-Form Content originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Getting Creative With Images in Long-Form Content

<p>In this third and final chapter, we’re stepping into interactivity by adding JavaScript, starting with a simple <code>:hover</code> effect, and ending with a fully responsive bulging text that follows your mouse in real time.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/3d-layered-text-interactivity-and-dynamism/">3D Layered Text: Interactivity and Dynamicism</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


In the previous two chapters, we built a layered 3D text effect, added depth and color, and then brought it to life with motion. We explored static structure, animated variations, and even some clever decoration tricks. But everything so far has been hard-coded.
This time, we’re going dynamic.
In this final chapter, we’re stepping into the world of interactivity by adding JavaScript into the mix. We’ll start by generating the layers programmatically, giving us more flexibility and cleaner code (and we’ll never have to copy-paste divs again). Then, we’ll add some interaction. Starting with a simple :hover effect, and ending with a fully responsive bulging text that follows your mouse in real time. Let’s go.





3D Layered Text Article Series
The Basics
Motion and Variations
Interactivity and Dynamicism (you are here!)



Clean Up
Before we jump into JavaScript, let us clean things up a bit. We will pause the animations for now and go back to the static example we wrapped up with in the first chapter. No need to touch the CSS just yet. Let us start with the HTML.
We will strip it down to the bare essentials. All we really need is one element with the text. The class stays. It is still the right one for the job.
<div class="layeredText">Lorem Ipsum</div>
Scripting
It is time. Let us start adding some JavaScript. Don’t worry, the impact on performance will be minimal. We’re only using JavaScript to set up the layers and define a few CSS variables. That’s it. All the actual style calculations still happen off the main thread, maintain high frames per second, and don’t stress the browser.
We will begin with a simple function called generateLayers. This is where all the magic of layer generation will happen. To work its magic, the function will receive the element we want to use as the container for the layers.
function generateLayers(element) {
  // magic goes here
}
To trigger the function, we will first create a small variable that holds all the elements with the layeredText class. And yes, we can have more than one on the page, as we will see later. Then, we will pass each of these elements into the generateLayers function to generate the layers.
const layeredElements = document.querySelectorAll('.layeredText');

layeredElements.forEach(generateLayers);
Fail Safe
Now let us dive into the generateLayers function itself and start with a small fail safe mechanism. There are situations, especially when working with frameworks or libraries that manage your DOM, where a component might get rendered more than once or a function might run multiple times. It should not happen, but we want to be ready just in case.
So, before we do anything, we will check if the element already contains a div with the .layers class. If it does, we will simply exit the function and do nothing:
function generateLayers(element) {
  if (element.querySelector('.layers')) return;
  
  // rest of the logic goes here
}
Tip: In the real world, I would treat this as a chance to catch a rendering bug. Instead of silently returning, I would probably send a message back to the dev team with the relevant data and expect the issue to be fixed.
Counting Layers
One last thing we need to cover before we start building the layers is the number of layers. If you remember, we have a CSS variable called --layers-count, but that will not help us here. Besides, we want this to be more dynamic than a single hardcoded value.
Here is what we will do. We will define a constant in our JavaScript called DEFAULT_LAYERS_COUNT. As the name suggests, this will be our default value. But we will also allow each element to override it by using an attribute like data-layers="14".
Then we will take that number and push it back into the CSS using setProperty on the parent element, since we rely on that variable in the styles.
const DEFAULT_LAYERS_COUNT = 24;

function generateLayers(element) {  
  if (element.querySelector('.layers')) return;
  
  const layersCount = element.dataset.layers || DEFAULT_LAYERS_COUNT;
  element.style.setProperty('--layers-count', layersCount);
}
Adding Content
Now we have everything we need, and we can finally generate the layers. We will store the original text content in a variable. Then we will build the markup, setting the innerHTML of the parent element to match the structure we used in all the previous examples. That means a span with the original content, followed by a div with the .layers class.
Inside that div, we will run a loop based on the number of layers, adding a new layer in each iteration:
function generateLayers(element) {

  // previous code

  const content = element.textContent;

  element.innerHTML = `
    <span>${content}</span>
    <div class="layers" aria-hidden="true">
      ${Array.from({ length: layersCount}, (_, i) =>
        `<div class="layer" style="--i: ${i + 1};">${content}</div>`
      ).join('')}
    </div>
  `;
}
And that is it. Our 3D text is ready, and all the layers are now built entirely through JavaScript. Try playing around with it. Change the text inside the layeredText element. Add your name, your project name, your brand. Let me know how it looks.
CodePen Embed Fallback
Quick note: I also removed the --layers-count variable from the CSS, since it is now set dynamically with JavaScript. While I was at it, I moved the font settings out of the .layeredText element, since they should be applied globally or to a more appropriate wrapper. Just a bit of housekeeping to keep things clean.
Normalizing Height
Since we already added a way to set the number of layers dynamically, let us take advantage of it.
Here is an example with three different div elements, each using a different number of layers. The first one (A) has 8 layers, the second (B) has 16, and the third (C) has 24.
CodePen Embed Fallback
You can clearly see the difference in height between the letters, since the total height depends on the number of layers. When it comes to color though, we used the normalized value (remember that?), so the gradient looks consistent regardless of height or layer count.
We can just as easily normalize the total height of the layers. All we need to do is replace the --layer-offset variable with a new one called --text-height. Instead of setting the distance between each layer, we define the total height for the full stack. That lets us multiply the normalized value by --text-height, and get a consistent size no matter how many layers we have.
.layeredText {
  --text-height: 36px;

  .layer {
    --n: calc(var(--i) / var(--layers-count));

    transform: translateZ(calc(var(--n) * var(--text-height)));
    color: hsl(200 30% calc(var(--n) * 100%));
  }
}
CodePen Embed Fallback
Counter Interaction
We are ready to start reacting to user input. But before we do anything, we need to think about the things we do not want to interact with, and that means the extra layers.
We already handled them for screen readers using aria-hidden, but even with regular mouse interactions, these layers can get in the way. In some cases, they might block access to clickable elements underneath.
To avoid all of that, we will add pointer-events: none; to the .layers element. This makes the layers completely ‘transparent’ to mouse clicks and hover effects.
.layers {
  pointer-events: none;
}
Hovering Links
Now we can finally start responding to user input and adding a bit of interaction. Let’s say I want to use this 3D effect on links, as a hover effect. It might be a little over the top, but we are here to have fun.
We will start with this simple markup, just a paragraph of Lorem ipsum, but with two links inside. Each link has the .layeredText class. Right now, those links will already have depth and layers applied, but that is not what we want. We want the 3D effect to appear only on hover.
To make that happen, we will define a new :hover block in .layeredText and move all the 3D related styles into it. That includes the color and shadow of the span, the color and translateZ of each .layer, and to make it look even better, we will also animate the opacity of the layers.
.layeredText {
  &:hover {
    span {
      color: black;
      text-shadow: 0 0 0.1em #003;
    }

    .layer {
      color: hsl(200 30% calc(var(--n) * 100%));
      transform: translateZ(calc(var(--i) * var(--layer-offset) + 0.5em));
      opacity: 1;
    }
  }
}
Now we need to define the base appearance, the styles that apply when there is no hover. We will give the span and the layers a soft bluish color, apply a simple transition, and set the layers to be fully transparent by default.
.layeredText {
  display: inline-block;

  span, .layer {
    color: hsl(200 100% 75%);
    transition: all 0.5s;
  }

  .layer {
    opacity: 0;
  }
}
Also, I added display: inline-block; to the .layeredText element. This helps prevent unwanted line breaks and allows us to apply transforms to the element, if needed. The result is a hover effect that literally makes each word pop right off the page:
CodePen Embed Fallback
Of course, if you are using this as a hover effect but you also have some elements that should always appear with full depth, you can easily define that in your CSS.
For example, let us say we have both a heading and a link with the .layeredText class, but we want the heading to always show the full 3D effect. In this case, we can update the hover block selector to target both:
.layeredText {
  &:is(h1, :hover) {
    /* full 3D styles here */
  }
}
This way, links will only show the effect on hover, while the heading stays bold and dimensional all the time.
CodePen Embed Fallback
Mouse Position
Now we can start working with the mouse position in JavaScript. To do that, we need two things: the position of the mouse on the page, and the position of each element on the page.
We will start with the mouse position, since that part is easy. All we need to do is add a mousemove listener, and inside it, define two CSS variables on the body: --mx for the horizontal mouse position, and --my for the vertical position.
window.addEventListener('mousemove', e => {
  document.body.style.setProperty('--mx', e.pageX);
  document.body.style.setProperty('--my', e.pageY);
});
Notice that I am using e.pageX and e.pageY, not e.clientX and e.clientY. That is because I want the mouse position relative to the entire page, not just the viewport. This way it works correctly even when the page is scrolled.
Position Elements
Now we need to get the position of each element, specifically the top and left values. We will define a function called setRects that loops through all layeredElements, finds their position using a getBoundingClientRect function, and sets it to a couple of CSS custom properties.
function setRects() {
  layeredElements.forEach(element => {
    const rect = element.getBoundingClientRect();
    element.style.setProperty('--top', rect.top + window.scrollY);
    element.style.setProperty('--left', rect.left + window.scrollX);
  });
}
Once again, I am using window.scrollX and scrollY to get the position relative to the entire page, not just the viewport.
Keep in mind that reading layout values from the DOM can be expensive in terms of performance, so we want to do it as little as possible. We will run this function once after all the layers are in place, and again only when the page is resized, since that could change the position of the elements.
setRects();
window.addEventListener('resize', setRects);
The Moving Red Dot
That is it. We are officially done writing JavaScript for this article. At this point, we have the mouse position and the position of every element stored as CSS values.
Great. So, what do we do with them?
Remember the examples from the previous chapter where we used background-image? That is the key. Let us take that same idea and use a simple radial gradient, from red to white.
.layer {
  background-clip: text;
  color: transparent;
  background-image: radial-gradient(circle at center, red 24px, white 0);
}
But instead of placing the center of the circle in the middle of the element, we will shift it based on the mouse position. To calculate the position of the mouse relative to the element, we simply subtract the element’s position from the mouse position. Then we multiply by 1px, since the value must be in pixels, and plug it into the at part of the gradient.
.layer {
  background-image:
    radial-gradient(
      circle at calc((var(--mx) - var(--left)) * 1px)
                calc((var(--my) - var(--top)) * 1px),
      red 24px,
      white 0
    );
}
The result is text with depth and a small red dot that follows the movement of your mouse.
CodePen Embed Fallback
Okay, a small red dot is not exactly mind blowing. But remember, you are not limited to that. Once you have the mouse position, you can use it to drive all sorts of dynamic effects. In just a bit, we will start building the bulging effect that kicked off this entire series, but in other cases, depending on your needs, you might want to normalize the mouse values first.
Normalizing Mouse Position
Just like we normalized the index of each layer earlier, we can normalize the mouse position by dividing it by the total width or height of the body. This gives us a value between 0 and 1.
document.body.style.setProperty('--nx', e.pageX / document.body.clientWidth);
document.body.style.setProperty('--ny', e.pageY / document.body.clientHeight);
Normalizing the mouse values lets us work with relative positioning that is independent of screen size. This is perfect for things like adding a responsive tilt to the text based on the mouse position.
CodePen Embed Fallback
Bulging Text
Now we are finally ready to build the last example. The idea is very similar to the red dot example, but instead of applying the background-image only to the top layer, we will apply it across all the layers. The color is stored in a custom variable and used to paint the gradient.
.layer {
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
  background-clip: text;
  background-image:
    radial-gradient(
      circle at calc((var(--mx) - var(--left)) * 1px)
                calc((var(--my) - var(--top)) * 1px),
                var(--color) 24px,
                transparent 0
    );
}
Now we get something similar to the red dot we saw earlier, but this time the effect spreads across all the layers.
CodePen Embed Fallback
Brighter Base
We are almost there. Before we go any further with the layers, I want to make the base text look a bit weaker when the hover effect is not active. That way, we create a stronger contrast when the full effect kicks in.
So, we will make the span text transparent and increase the opacity of its shadow:
span {
  color: transparent;
  text-shadow: 0 0 0.1em #0004;
}
Keep in mind, this makes the text nearly unreadable when the hover effect is not active. That is why it is important to use a proper media query to detect whether the device supports hover. Apply this styling only when it does, and adjust it for devices that do not.
@media (hover: hover) {
  /* when hover is supported */
}
Fixing Sizes
This is it. The only thing left is to fine tune the size of the gradient for each layer. And we are done. But I do not want the bulge to have a linear shape. Using the normalized value alone will give me evenly spaced steps across all layers. That results in a shape with straight edges, like a cone.
To get a more convex appearance, we can take advantage of the new trigonometric functions available in CSS. We will take the normalized value, multiply it by 90 degrees, and pass it through a cos() function. Just like the normalized value, the cosine will return a number between 0 and 1, but with a very different distribution. The spacing between values is non-linear, which gives us that smooth convex curve.
--cos: calc(cos(var(--n) * 90deg));
Now we can use this variable inside the gradient. Instead of giving the color a fixed radius, we will multiply --cos by whatever size we want the effect to be. I also added an absolute value to the calculation, so that even when --cos is very low (close to zero), the gradient still has a minimum visible size.
And, of course, we do not want sharp, distracting edges. We want a smooth fade. So, instead of giving the transparent a hard stop point, we will give it a larger value. The difference between the var(--color) and the transparent values will control how soft the transition is.
background-image:
  radial-gradient(
    circle at calc((var(--mx) - var(--left)) * 1px)
              calc((var(--my) - var(--top)) * 1px),
              var(--color) calc(var(--cos) * 36px + 24px),
              transparent calc(var(--cos) * 72px)
  );
And just like that, we get an interactive effect that follows the mouse and gives the impression of bulging 3D text:
CodePen Embed Fallback
Wrapping Up
At this point, our 3D layered text has gone from a static stack of HTML elements to a fully interactive, mouse-responsive effect. We built dynamic layers with JavaScript, normalized depth and scale, added responsive hover effects, and used live input to shape gradients and create a bulging illusion that tracks the user’s every move.
But more than anything, this chapter was about control. Controlling structure through code. Controlling behavior through input. And controlling perception through light, color, and movement. And we did it all with native web technologies.
This is just the beginning. You can keep going with noise patterns, lighting, reflections, physics, or more advanced motion behaviors. Now you have the tools to explore them, and to create bold, animated, expressive typography that jumps right off the screen.
Now go make something that moves.

3D Layered Text Article Series
The Basics
Motion and Variations
Interactivity and Dynamicism (you are here!)





3D Layered Text: Interactivity and Dynamicism originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

In this third and final chapter, we’re stepping into interactivity by adding JavaScript, starting with a simple :hover effect, and ending with a fully responsive bulging text that follows your mouse in real time.
3D Layered Text: Interactivity and Dynamicism originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

3D Layered Text: Interactivity and Dynamicism

<p>In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/3d-layered-text-motion-and-variations/">3D Layered Text: Motion and Variations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


In the previous chapter, we built a basic 3D layered text effect using nothing but HTML and CSS. It looks great and has a solid visual presence, but it’s completely static. That is about to change.
In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.





3D Layered Text Article Series
The Basics
Motion and Variations (you are here!)
Interactivity and Dynamicism




⚠️ Motion Warning: This article contains multiple animated examples that may include flashing or fast moving visuals. If you are sensitive to motion, please proceed with caution.
‘Counter’ Animation
Let’s start things off with a quick animation tip that pairs perfectly with layered 3D text. Sometimes, we want to rotate the element without actually changing the orientation of the text so it stays readable. The trick here is to combine multiple rotations across two axes. First, rotate the text on the z-axis. Then, add a tilt on the x-axis. Finally, rotate the text back on the z-axis.
@keyframes wobble {
  from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); }
}
Since we rotate on the z-axis and then reverse that rotation, the text keeps its original orientation. But because we add a tilt on the x-axis in the middle, and the x-axis itself keeps rotating, the angle of the tilt changes as well. This creates a kind of wobble effect that shows off the text from every angle and emphasizes the sense of depth.
CodePen Embed Fallback
If we want to take this a few steps further, we can combine the wobble with a floating effect. We will animate the .layers slightly along the z-axis:
.layers {
  animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
  from { transform: translateZ(0.3em); }
  to { transform: translateZ(0.6em); }
}
To really sell the effect, we will leave the original span in place — like a shadowed anchor — change its color to transparent, and animate the blur factor of its text-shadow:
span {
  color: transparent;
  animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
  from { text-shadow: 0 0 0.1em #000; }
  to { text-shadow: 0 0 0.2em #000; }
}
Syncing those two animations together gives the whole thing a more realistic feel:
CodePen Embed Fallback
Splitting Letters
OK, this is starting to look a lot better now that things are moving. But the whole word is still moving as one. Can we make each letter move independently? The answer, as usual, is “yes, but…”
It is absolutely possible to split each word into a separate letters and animate them individually. But it also means a lot more elements moving on the screen, and that can lead to performance issues. If you go this route, try not to animate too many letters at once, and consider reducing the number of layers.
In the next example, for instance, I reduced the layer count to sixteen. There are five letters, and to place them side by side, I gave the .scene a display: flex, then added a small delay to each letter using :nth-child:
CodePen Embed Fallback
New Angles
Until now, we have only been moving the text along the z-axis, but we can definitely take it further. Each layer can be moved or rotated in any direction you like, and if we base those transformations on the --n variable, we can create all sorts of interesting effects. Here are a few I played with, just to give you some ideas.
In the first one, I am animating the translateX to create a shifting effect:
CodePen Embed Fallback
In the others, I am adding a bit of rotation. The first one is applied to the y-axis for the sloping effect:
CodePen Embed Fallback
This next example applies rotation on the x-axis for the tilting:
CodePen Embed Fallback
And, finally, we can apply it on the z-axis for a rotating example:
CodePen Embed Fallback
Layer Delay
Working with separate layers does not just let us tweak the animation for each one; it also lets us adjust the animation-delay for every layer individually, which can lead to some really interesting effects. Let us take this pulsing example:
CodePen Embed Fallback
Right now, the animation is applied to the .layeredText element itself, and I am simply changing its scale:
.layeredText {
  animation: pulsing 2s infinite ease-out;
}

@keyframes pulsing {
  0%, 100% { scale: 1; }
  20% { scale: 1.2; }
}
But we can apply the animation to each layer separately and give each one a slight delay. Note that the span is part of the stack. It is a layer, too, and sometimes you will want to include it in the animation:
.layer {
  --delay: calc(var(--n) * 0.3s);
}

:is(span, .layer) {
  animation: pulsing 2s var(--delay, 0s) infinite ease-out;
}
Here I am using the :is selector to target both the individual layers and the span itself with the same animation. The result is a much more lively and engaging effect:
CodePen Embed Fallback
Pseudo Decorations
In the previous chapter, I mentioned that I usually prefer to save pseudo elements for decorative purposes. This is definitely a technique worth using. We can give each layer one or two pseudo elements, add some content, position them however we like, and the 3D effect will already be there.
It can be anything from simple outlines to more playful shapes. Like arrows, for example:
CodePen Embed Fallback
Notice that I am using the :is selector to include the span here, too, but sometimes we will not want to target all the layers — only a specific portion of them. In that case, we can use :nth-child to select just part of the stack. For example, if I want to target only the bottom twelve layers (out of twenty four total), the decoration only covers half the height of the text. I can do something like :nth-child(-n + 12) , and the full selector would be:
:is(span, .layer:nth-child(-n + 12))::before {
  /* pseudo style */
}
This is especially useful when the decoration overlaps with the text, and you do not want to cover it or make it hard to read.
CodePen Embed Fallback
Of course, you can animate these pseudo elements too. So how about a 3D “Loading” text with a built-in spinner?
CodePen Embed Fallback
I made a few changes to pull this off. First, I selected twelve layers from the middle of the stack using a slightly more advanced selector: .layer:nth-child(n + 6):nth-child(-n + 18). This targets the layers from number six to eighteen.
Second, to fake the shadow, I added a blur filter to the span‘s pseudo element. This creates a nice soft effect, but it can cause performance issues in some cases, so use it with care.
:is(span, .layer:nth-child(n + 6):nth-child(-n + 18))::before {
  /* spinner style */
}

span {
  /* span style */

  &::before {
    filter: blur(0.1em);
  }
}
Face Painting
But you don’t have to use pseudo elements to add some visual interest. You can also style any text with a custom pattern using background-image. Just select the top layer with the :last-child selector, set its text color to transparent so the background shows through, and use background-clip: text.
.layer {
  /* layer style */
    
  &:last-child {
    color: transparent;
    background-clip: text;
    background-image: ... /* use your imagination */
  }
}
Here is a small demo using striped lines with repeating-linear-gradient, and rings made with repeating-radial-gradient:
CodePen Embed Fallback
And, yes, you can absolutely use an image too:
CodePen Embed Fallback
Animating Patterns
Let us take the previous idea a couple of steps further. Instead of applying a pattern just to the top layer, we will apply it to all the layers, creating a full 3D pattern effect. Then we will animate it.
We’ll start with the colors. First, we give all the layers a transparent text color. The color we used before will now be stored in a custom property called --color, which we will use in just a moment.
.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
}
Now let’s define the background, and we’ll say we want a moving checkerboard pattern. We can create it using repeating-conic-gradient with two colors. The first will be our --color variable, and the second could be transparent. But in this case, I think black with very low opacity works better.
We just need to set the background-size to control the pattern scale, and of course, make sure to apply background-clip: text here too:
.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
  background-image:
    repeating-conic-gradient(var(--color) 0 90deg, hsl(0 0% 0% / 5%) 0 180deg);
  background-size: 0.2em 0.2em;
  background-clip: text;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
  animation: checkers 24s infinite linear;
}

@keyframes checkers {
  to { background-position: 1em 0.4em; }
}
As you can see, I have already added the animation property. In this case, it is very simple to animate the pattern. Just slowly move the background-position, and that is it. Now we have text with a moving 3D pattern:
CodePen Embed Fallback
Variable Fonts
So far, we have been using a single font, and as I mentioned earlier, font choice is mostly a matter of taste or brand guidelines. But since we are already working with layered text, we absolutely have to try it with variable fonts. The idea behind variable fonts is that each one includes axes you can manipulate to change its appearance. These can include width, weight, slant, or just about anything else.
Here are a few examples I really like. The first one uses the Climate Crisis font, which has a YEAR axis that ranges from 1979 to 2025. With each year, the letters melt slightly and shrink a bit. It is a powerful ecological statement, and when you stack the text in layers, you can actually see the changes and get a pretty striking 3D effect:
CodePen Embed Fallback
Another great option is Bitcount, a variable font with a classic weight axis ranging from 100 to 900. By changing the weight based on the layer index, you get a layered effect that looks like peaks rising across the text:
CodePen Embed Fallback
And here is an example that might give your browser a bit of a workout. The font Kablammo includes a MORF axis, and adjusting it completely changes the shape of each letter. So, I figured it would be fun to animate that axis (yes, font-variation-settings is animatable), and add a short delay between the layers, like we saw earlier, to give the animation a more dynamic and lively feel.
CodePen Embed Fallback
Delayed Position
Before we wrap up this second chapter, I want to show you one more animation. By now you have probably noticed that there is always more than one way to do things, and sometimes it is just a matter of finding the right approach. Even the positioning of the layers, which we have been handling statically with translateZ, can be done a little differently.
If we animate the layers to move along the z-axis, from zero to the full height of the text, and add an equal delay between each one, we end up with the same visual 3D effect, only in motion.
.layer {
  --n: calc(var(--i) / var(--layers-count));
  --delay: calc(var(--n) * -3s);

  animation: layer 3s var(--delay) infinite ease-in-out;
}

@keyframes layer {
  from { transform: translateZ(0); }
  to { transform: translateZ(calc(var(--layers-count) * var(--layer-offset))); }
}
This is a more advanced technique, suited for more complex animations. It is not something you need for every use case, but for certain effects, it can look very cool.
CodePen Embed Fallback
Wrapping Up
So far, we have brought the layered text effect to life with movement, variation, and creative styling. We also saw how even small changes can have a huge visual impact when applied across layers.
But everything we have done so far has been pre defined and self contained. In the next chapter, we are going to add a layer of interactivity. Literally. From simple :hover transitions to using JavaScript to track the mouse position, we will apply real-time transformations and build a fully responsive bulging effect.

3D Layered Text Article Series
The Basics
Motion and Variations (you are here!)
Interactivity and Dynamicism


3D Layered Text: Motion and Variations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.
3D Layered Text: Motion and Variations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

3D Layered Text: Motion and Variations

<p>A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/3d-layered-text-the-basics/">3D Layered Text: The Basics</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Recently, a client asked me to create a bulging text effect. These are exactly the kinds of creative challenges I live for. I explored several directions, JavaScript solutions, SVG filters, but then I remembered the concept of 3D layered text. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of.








Visually, it’s striking, and it’s also a perfect project to learn all sorts of valuable CSS animation techniques. From the fundamentals of layering, through element indexing, to advanced background-image tricks. And yes, we’ll use a touch of JavaScript, but don’t worry about it right now.
There is a lot to explore here, so this article is actually the first of a three part series. In this chapter, we will focus on the core technique. You will learn how to build the layered 3D text effect from scratch using HTML and CSS. We will cover structure, stacking, indexing, perspective, and how to make it all come together visually.
In chapter two, we will add movement. Animations, transitions, and clever visual variations that bring the layers to life.
In chapter three, we will introduce JavaScript to follow the mouse position and build a fully interactive version of the effect. This will be the complete bulging text example that inspired the entire series.

3D Layered Text Article Series
The Basics (you are here!)
Motion and Variations
Interactivity and Dynamicism



The Method
Before we dive into the text, let’s talk about 3D. CSS actually allows you to create some wild three-dimensional effects. Trust me, I’ve done it. It’s pretty straightforward to move and position elements in a 3D space, and have full control over perspective. But there’s one thing CSS doesn’t give us: depth.
If I want to build a cube, I can’t just give an element a width, a height, and a depth. There is no depth, it doesn’t work that way. To build a cube or any other 3D structure in CSS, we have two main approaches: constructive and layered.
Constructive
The constructive method is very powerful, but can feel a bit fiddly, with plenty of transforms and careful attention to perspective. You take a bunch of flat elements and assemble them together, somewhere between digital Lego bricks and origami. Each side of the shape gets its own element, positioned and rotated precisely in the 3D space. Suddenly, you have a cube, a pyramid, or any other structure you want to create.
And the results can be super satisfying. There’s something unique about assembling 3D objects piece by piece, watching flat elements transform into something with real presence. The constructive method opens up a world where you can experiment, improvise, and invent new forms. You could even, for example, build a cute robot bouncing on a pogo stick.
CodePen Embed Fallback
Layered
But here we’re going to focus on the layered method. This approach isn’t about building a 3D object out of sides or polygons. Instead, it’s all about stacking multiple layers, sometimes dozens of them, and using subtle shifts in position and color to create the illusion of depth. You’re tricking the eye into seeing volume and bulges where there’s really just a clever pile of flat elements.
This technique is super flexible. Think of a cube of sticky memo papers, but instead of squares, the papers are cut to shape your design. It’s perfect for text, 3D shapes, and UI elements, especially with round edges, and you can push it as far as your creativity (and patience) will take you.
CodePen Embed Fallback
Accessibility note: Keep in mind that this method can easily become a nightmare for screen reader users, especially when applied to text. Make sure to wrap all additional and decorative layers with aria-hidden="true". That way, your creative effects won’t interfere with accessibility and ensure that people using assistive technologies can still have a good experience.
Creating a 3D Layered Text
Let’s kick things off with a basic static example, using “lorem ipsum” as a placeholder (feel free to use any text you want). We’ll start with a simple container element with a class of .text. Inside, we’ll put the original text in a span (it will help later when we want to style this text separately from the layered copies), and another div with a class of “layers” where we’ll soon add the individual layers. (And don’t forget the aria-hidden.)
<div class="text">
  <span>Lorem ipsum</span>
  <div class="layers" aria-hidden="true"></div>
</div>
Now that we have our wrapper in place, we can start building out the layers themselves. In chapter three, we will see how to build the layers dynamically with JavaScript, but you can generate them easily with a simple loop in your preprocessor (if you are using one), or just add them manually in the code. Check out the pro tip below for a quick way to do that. The important thing is that we end up with something that looks like this.
<div class="layers" aria-hidden="true">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  
</div>
Great, now we have our layers, but they are still empty. Before we add any content, let’s quickly cover how to assign their indexes.
Indexing the layers
Indexing simply means assigning each layer a variable (let’s call it --i) that holds its index. So, the first layer gets --i: 1;, the second gets --i: 2;, and so on. We’ll use these numbers later on as values for calculating each layer’s position and appearance.
There are a couple of ways to add these variables to your layers. You can define the value for each layer using :nth-child in CSS, (again, a simple loop in your preprocessor, if you’re using one), or you can do it inline, giving each layer element a style attribute with the right --i value.
.layer {
  &:nth-child(1): { --i: 1; }
  &:nth-child(2): { --i: 2; }
  &:nth-child(3): { --i: 3; }
  /* ... More layers */
}
…or:
<div class="layers" aria-hidden="true">
  <div class="layer" style="--i: 1;"></div>
  <div class="layer" style="--i: 2;"></div>
  <div class="layer" style="--i: 3;"></div>
  
</div>
In this example, we will go with the inline approach. It gives us full control, keeps things easy to understand, and avoids dependency between the markup and the stylesheet. It also makes the examples copy friendly, which is great if you want to try things out quickly or tweak the markup directly.
Pro tip: If you’re working in an IDE with Emmet support, you can generate all your layers at once by typing .layer*24[style="--i: $;"] and pressing Tab. The .layer is your class, *24 is the number of elements, attributes go in square brackets [ ], and $ is the incrementing number. But, If you’re reading this in the not-so-distant future, you might be able to use sibling-index() and not even need these tricks. In that case, you won’t need to add variables to your elements at all, just swap out var(--i) for sibling-index() in the next code examples.
Adding Content
Now let us talk about adding content to the layers. Each layer needs to contain the original text. There are a few ways to do this. In the next chapter, we will see how to handle this with JavaScript, but if you are looking for a CSS-only dynamic solution, you can add the text as the content of one of the layer’s pseudo elements. This way, you only need to define the text in a single variable, which makes it a great fit for titles, short labels, or anything that might change dynamically.
.layer {
  --text: "Lorem ipsum";
  
  &::before {
    content: var(--text);
  }
}
The downside, of course, is that we are creating extra elements, and I personally prefer to save pseudo elements for decorative purposes, like the border effect we saw earlier. We will look at more examples of that in the next chapter.
A better, more straightforward approach is to simply place the text inside each layer. The downside to this method is that if you want to change the text, you will have to update it in every single layer. But since in this case the example is static and I do not plan on changing the text, we will simply use Emmet, putting the text inside curly braces {}.
So, we will type .layers*24[style="--i: $;"]{Lorem ipsum} and press Tab to generate the layers.
<div class="text">
  Lorem ipsum
  <div class="layers" aria-hidden="true">
    <div class="layer" style="--i: 1;">Lorem ipsum</div>
    <div class="layer" style="--i: 2;">Lorem ipsum</div>
    <div class="layer" style="--i: 3;">Lorem ipsum</div>
    
  </div>
</div>
Let’s Position
Now we can start working on the styling and positioning. The first thing we need to do is make sure all the layers are stacked in the same place. There are a few ways to do this as well , but I think the easiest approach is to use position: absolute with inset: 0 on the .layers and on each .layer, making sure every layer matches the container’s size exactly. Of course, we’ll set the container to position: relative so that all the layers are positioned relative to it.
.text {
  position: relative;

  .layers, .layer {
    position: absolute;
    inset: 0;
  }
}
Adding Depth
Now comes the part that trips some people up, adding perspective. To give the text some depth, we’re going to move each layer along the z-axis, and to actually see this effect, we need to add a bit of perspective.
As with everything so far, there are a few ways to do this. You could give perspective to each layer individually using the perspective() function, but my recommendation is always to apply perspective at the parent level. Just wrap the element (or elements) you want to bring into the 3D world inside a wrapper div (here I’m using .scene) and apply the perspective to that wrapper.
After setting the perspective on the parent, you’ll also need to use transform-style: preserve-3d; on each child of the .scene. Without this, browsers flatten all transformed children into a single plane, causing any z-axis movement to be ignored and everything to look flat. Setting preserve-3d; ensures that each layer’s 3D position is maintained inside the parent’s 3D context, which is crucial for the depth effect to come through.
.scene {
  perspective: 400px;
  
  * {
    transform-style: preserve-3d;
  }
}
In this example, I’m using a fairly low value for the perspective, but you should definitely play around with it to suit your own design. This value represents the distance between the viewer and the object, which directly affects how much depth we see in the transformed layers. A smaller value creates a stronger, more exaggerated 3D effect, while a larger value makes the scene appear flatter. This property is what lets us actually see the z-axis movement in action.
Layer Separation
Now we can move the layers along the z-axis, and this is where we start using the index values we defined earlier. Let’s start by defining two custom properties that we’ll use in a moment: --layers-count, which holds the number of layers, and --layer-offset, which is the spacing between each layer.
.text {
  --layers-count: 24;
  --layer-offset: 1px;
}
Now let’s set the translateZ value for each layer. We already have the layer’s index and the spacing between layers, so all we need to do is multiply them together inside the transform property.
.layer {  
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
}
This feels like a good moment to stop and look at what we have so far. We created the layers, stacked them on top of each other, added some content, and moved them along the z-axis to give them depth. And this is where we’re at:
CodePen Embed Fallback
If you really try, and focus hard enough, you might see something that kind of looks like 3D. But let’s be honest, it does not look good. To create a real sense of depth, we need to bring in some color, add a bit of shadow, and maybe rotate things a bit for a more dynamic perspective.
Forging Shadows
Sometimes we might want (or need) to use the value of --i as is, like in the last snippet, but for some calculations, it’s often better to normalize the value. This means dividing the index by the total number of layers, so we end up with a value that ranges from 0 to 1. By normalizing, we keep our calculations flexible and proportional, so the effect remains balanced even if the number of layers changes.
.layer {
  --n: calc(var(--i) / var(--layers-count));
}
Now we can adjust the color for each layer, or more precisely, the brightness of the color. We’ll use the normalized value on the ‘light’ of a simple HSL function, and add a touch of saturation with a bluish hue.
.layer {
  color: hsl(200 30% calc(var(--n) * 100%));
}
Gradually changing the brightness between layers helps create a stronger sense of depth in the text. And without it, you risk losing some of the finer details
CodePen Embed Fallback
Second, remember that we wrapped the original text in a span so we could style it? Now is the time to use it. Since this text sits on the bottom layer, we want to give it a darker color than the rest. Black works well here, and in most cases, although in the next chapter we will look at examples where it actually needs to be transparent.
span {
  color: black;
  text-shadow: 0 0 0.1em #003;
}
Final Touches
Before we wrap this up, let us change the font. This is of course a matter of personal taste or brand guidelines. In my case, I am going with a bold, chunky font that works well for most of the examples. You should feel free to use whatever font fits your style.
Let us also add a slight rotation to the text, maybe on the x-axis, so the lettering appears at a better angle:
.text {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  transform: rotateX(30deg);
}
And there you have it, combining all the elements we’ve covered so far: the layers, indexes, content, perspective, positioning, and lighting. The result is a beautiful, three-dimensional text effect. It may be static for now, but we’ll take care of that soon.
CodePen Embed Fallback
Wrapping Up
At this point, we have a solid 3D text effect built entirely with HTML and CSS. We covered everything from structure and indexing to layering, depth, and color. It may still be static, but the foundation is strong and ready for more.
In the next chapters, we are going to turn things up. We will add motion, introduce transitions, and explore creative ways to push this effect further. This is where it really starts to come alive.

3D Layered Text Article Series
The Basics (you are here!)
Motion and Variations
Interactivity and Dynamicism


3D Layered Text: The Basics originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.
3D Layered Text: The Basics originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

3D Layered Text: The Basics

<p>Short story: Slapping <code>hidden=until-found</code> on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/covering-hiddenuntil-found/">Covering hidden=until-found</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>Filing this in the &#8220;Missed First Time Around&#8221; category. It popped up in the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/139#html" rel="noopener">Firefox 139 release notes</a> and I was, like, <em>ooo neat</em>. Then I saw <a href="https://developer.chrome.com/blog/new-in-chrome-102/#more" rel="noopener">it&#8217;s been in Chrome since at least 2022</a>. And as I wrote this, <a href="https://webkit.org/blog/17216/release-notes-for-safari-technology-preview-225/" rel="noopener">it landed in Safari Technology Preview 125</a>. So there you have it.</p>



<p>Turns out there are a few good posts and tutorials about <code>hidden=until-found</code> floating out there, so I thought I&#8217;d jot down a few key takeaways for later reference.</p>



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


<h3 class="wp-block-heading" id="it-makes-hidden-content-findable">It makes hidden content &#8220;findable&#8221;</h3>


<p>Short story: Slapping <code>hidden=until-found</code> on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div hidden="until-found">
  &lt;!-- hidden content -->
&lt;/div></code></pre>



<p>You&#8217;ll see, or more accurately <em>not</em> see, that the content is hidden with that in place:</p>



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


<h3 class="wp-block-heading" id="its-contentvisibility-hidden-under-the-hood">It&#8217;s <code>content-visibility: hidden</code> under the hood</h3>


<p>The browser takes that as a hint to hide the content and does so by implicitly setting <code>content-visibility: hidden</code> on the element in the user agent styles.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2402" height="1856" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=2402%2C1856&#038;ssl=1" alt="Inspecting an element with the attribute in place in Chrome DevTools." class="wp-image-388220" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?w=2402&amp;ssl=1 2402w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=300%2C232&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=1024%2C791&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=768%2C593&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=1536%2C1187&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-until-found-devtools.png?resize=2048%2C1582&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>If we do a <code>Ctrl</code>+<code>F</code> on the keyboard to activate in-page search and enter a query, then a match reveals the content, highlighting said matched query.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2402" height="1856" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=2402%2C1856&#038;ssl=1" alt="Showing a highlighted term on the page for a matched search query." class="wp-image-388221" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?w=2402&amp;ssl=1 2402w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=300%2C232&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=1024%2C791&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=768%2C593&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=1536%2C1187&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/hidden-tunil-found-match.png?resize=2048%2C1582&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>


<h3 class="wp-block-heading" id="why-we-need-this">Why we need this</h3>


<p>That&#8217;s what I was asking myself when I started digging into this a little deeper. The most prominent example of it being used is from the <a href="https://developer.chrome.com/docs/css-ui/hidden-until-found" rel="noopener">Chrome for Developers docs</a> as a faux-accordion. You know, a series of panels that open and close on click.</p>



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



<p>But isn&#8217;t that a solved deal now that we have the <a href="https://css-tricks.com/using-styling-the-details-element/"><code>&lt;details&gt;</code> element</a> at the ready? May as well use a semantic disclosure widget to, you know, <em>disclose content</em>. Indeed, browsers also set <code>content-visibility: hidden</code> on the <code><a href="https://css-tricks.com/almanac/pseudo-selectors/d/details-content/">::details-content</a></code> portion of the element that holds the content.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2402" height="1856" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=2402%2C1856&#038;ssl=1" alt="Inspecting the details element's Shadow DOM in Chrome DevTools." class="wp-image-388223" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?w=2402&amp;ssl=1 2402w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=300%2C232&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=1024%2C791&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=768%2C593&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=1536%2C1187&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/details-content-visibility.png?resize=2048%2C1582&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>I&#8217;m pretty sure <code>&lt;details&gt;</code> was not as widely supported in 2022 as it is today. It&#8217;s actually part of <a href="https://webkit.org/blog/16458/announcing-interop-2025/#details-element" rel="noopener">Interop 2025</a> and notice that one of the functionalities mentioned is the capability for in-page search. Chrome already supports it. Firefox recently shipped it (ostensibly as part of the <code>hidden=until-found</code> release). And Safari will presumably get there with Interop 2025. The example from the Chrome for Developers post demonstrates an approach for working around a not-fully-supported <code>&lt;details&gt;</code> element and now we have it.</p>



<p>So, why <code>hidden=until-closed</code>?</p>



<p>I don&#8217;t know. I&#8217;m sure there&#8217;s a good use case for hiding content accessibly in some fashion while making it searchable. I just can&#8217;t think of it off the top of my head. I mean, we have <code>popover</code> as well, but that takes a different approach with <code>display: none</code> which completely removes the content from in-page search.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="790" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none-1024x790.png?resize=1024%2C790&#038;ssl=1" alt="Showing the user agent styles for a popover element in Chrome DevTools." class="wp-image-388225" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none.png?resize=1024%2C790&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none.png?resize=300%2C232&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none.png?resize=768%2C593&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none.png?resize=1536%2C1186&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/popover-display-none.png?resize=2048%2C1581&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>


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


<p>We&#8217;ve already established that Chrome and Firefox are on board. Safari is the bigger holdout, but knowing that making the hidden content in <code>&lt;details&gt;</code> findable is part of Interop 2025 (and Firefox&#8217;s corresponding support for it as part of that effort) makes me think it&#8217;s around the corner. (Turns out that hunch was correct because <a href="https://webkit.org/blog/17216/release-notes-for-safari-technology-preview-225/" rel="noopener">it landed in Safari Technology Preview 125</a> after writing this.)</p>



<p>In the meantime, though, is it worth using <code>hidden=until-found</code>? Because if we&#8217;re aiming for a consistent cross-browser experience, we&#8217;d need to do some sort of swap between <code>content-visibility: hidden</code> to hide the content and <code>content-visible: auto</code> to reveal it.</p>



<p>Nathan Knowler <a href="https://knowler.dev/blog/polyfilling-hidden-until-found" rel="noopener">expertly explains</a> the conundrum this creates. We can&#8217;t set <code>content-visibility: hidden</code> on something without also removing it from in-page search. The <code>hidden=until-found</code> attribute works exactly like <code>content-visibility: hidden</code> but maintains that in-page search still works. In other words, we can&#8217;t polyfill the feature with <code>content-visibility</code>.</p>



<p>Thanks, Nathan, for going down the massive rabbit hole and finding a solution that leverages the Shadow DOM to look for the HTML attribute, check support, and revert its properties when needed to accessibly hide the content visually without fully nuking it from being found.</p>


<h2 class="wp-block-heading" id="styling">Styling</h2>


<p>Seems like there isn&#8217;t much to say about styling something that ain&#8217;t visible, but notice that the in-page search feature highlights content that matches the search query.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1794" height="1136" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?resize=1794%2C1136&#038;ssl=1" alt="Highlighting a single matched search term." class="wp-image-388228" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?w=1794&amp;ssl=1 1794w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?resize=300%2C190&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?resize=1024%2C648&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?resize=768%2C486&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/search-term-highlight.png?resize=1536%2C973&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>Looks like we may get a new <code>::search-text</code> pseudo that allows us to select the matched query and style the highlight color in the <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-search-text" rel="noopener">CSS Pseudo-Elements Module Level 4 specification</a>, which is currently in Editor&#8217;s Draft status at the time I&#8217;m writing this.</p>



<p>What about multiple matches? The current selection gets a different highlight from subsequent matches.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1720" height="1024" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?resize=1720%2C1024&#038;ssl=1" alt="Highlighting two matches for a search query. The first highlight is orange and the second highlight is yellow." class="wp-image-388227" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?w=1720&amp;ssl=1 1720w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?resize=300%2C179&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?resize=1024%2C610&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?resize=768%2C457&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/07/Screenshot-2025-07-18-at-8.57.43%E2%80%AFAM.png?resize=1536%2C914&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>We&#8217;ll presumably, according to the spec, be able to combine <code>::search-text</code> with the <code>:current</code> pseudo-class to target the current match: <code>::search-text:current</code>.</p>



<p>If you&#8217;re thinking we might get to mix-and-match <code>::search-text</code> with the corresponding <code>:past</code> and <code>:future</code> pseudo-classes, I&#8217;m afraid the spec says nay. But it does not shut the door on it completely:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>The&nbsp;<code>:past</code>&nbsp;and&nbsp;<code>:future</code>&nbsp;pseudo-classes&nbsp;are reserved for analogous use in the future. Any unsupported combination of these pseudo-classes with&nbsp;<code>::search-text</code>&nbsp;<em>must</em>&nbsp;be treated as invalid.</p>
</blockquote>


<h3 class="wp-block-heading" id="anything-else">Anything else?</h3>


<p>Not really, but I do like the note at the end of Christian Shaefer&#8217;s <a href="https://schepp.dev/posts/rethinking-find-in-page-accessibility-making-hidden-text-work-for-everyone/" rel="noopener">&#8220;Rethinking Find-in-Page Accessibility&#8221;</a> post that says consideration needs to go into what happens <em>after</em> a search query matches content on the page. Currently, the content remains visible even after in-page search is closed or canceled. Perhaps we&#8217;ll need some other HTML hint for that.</p>


<h3 class="wp-block-heading" id="links">Links</h3>


<p>A dump of things I found and used while researching this:</p>



<ul class="wp-block-list">
<li><a href="https://developer.chrome.com/docs/css-ui/hidden-until-found" rel="noopener">&#8220;Making collapsed content accessible with hidden=until-found&#8221;</a> (Joey Arhar)</li>



<li><a href="https://knowler.dev/blog/polyfilling-hidden-until-found" rel="noopener">&#8220;Polyfilling hidden until-found&#8221;</a> (Nathan Knowler)</li>



<li><a href="https://jamesmcgrath.net/blog/hidden-until-found" rel="noopener">&#8220;Hidden until found&#8221;</a> (James McGrath)</li>



<li><a href="https://github.com/WICG/display-locking/blob/main/explainers/hidden-content-explainer.md" rel="noopener">&#8220;The <code>hidden=until-found</code> HTML attribute and the <code>beforematch</code> event&#8221;</a> (WICG explainer)</li>



<li><a href="https://webkit.org/blog/16458/announcing-interop-2025/" rel="noopener">&#8220;Announcing Interop 2025&#8221;</a> (WebKit Blog)</li>



<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1761043" rel="noopener">Bugzilla Ticket #1761043</a></li>



<li><a href="https://github.com/mdn/content/issues/39306" rel="noopener">MDN content update</a> (GitHub)</li>



<li><code><a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-search-text" rel="noopener">::search-text</a></code> (CSS Pseudo-Elements Module Level 4)</li>
</ul>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/covering-hiddenuntil-found/">Covering hidden=until-found</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Filing this in the “Missed First Time Around” category. It popped up in the Firefox 139 release notes and I was, like, ooo neat. Then I saw it’s been in Chrome since at least 2022. And as I wrote this, it landed in Safari Technology Preview 125. So there you have it.
Turns out there are a few good posts and tutorials about hidden=until-found floating out there, so I thought I’d jot down a few key takeaways for later reference.



It makes hidden content “findable”
Short story: Slapping hidden=until-found on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.
<div hidden="until-found">
  
</div>
You’ll see, or more accurately not see, that the content is hidden with that in place:
CodePen Embed Fallback
It’s content-visibility: hidden under the hood
The browser takes that as a hint to hide the content and does so by implicitly setting content-visibility: hidden on the element in the user agent styles.




If we do a Ctrl+F on the keyboard to activate in-page search and enter a query, then a match reveals the content, highlighting said matched query.



Why we need this
That’s what I was asking myself when I started digging into this a little deeper. The most prominent example of it being used is from the Chrome for Developers docs as a faux-accordion. You know, a series of panels that open and close on click.
CodePen Embed Fallback
But isn’t that a solved deal now that we have the <details> element at the ready? May as well use a semantic disclosure widget to, you know, disclose content. Indeed, browsers also set content-visibility: hidden on the ::details-content portion of the element that holds the content.




I’m pretty sure <details> was not as widely supported in 2022 as it is today. It’s actually part of Interop 2025 and notice that one of the functionalities mentioned is the capability for in-page search. Chrome already supports it. Firefox recently shipped it (ostensibly as part of the hidden=until-found release). And Safari will presumably get there with Interop 2025. The example from the Chrome for Developers post demonstrates an approach for working around a not-fully-supported <details> element and now we have it.
So, why hidden=until-closed?
I don’t know. I’m sure there’s a good use case for hiding content accessibly in some fashion while making it searchable. I just can’t think of it off the top of my head. I mean, we have popover as well, but that takes a different approach with display: none which completely removes the content from in-page search.



 Browser support and polyfill
We’ve already established that Chrome and Firefox are on board. Safari is the bigger holdout, but knowing that making the hidden content in <details> findable is part of Interop 2025 (and Firefox’s corresponding support for it as part of that effort) makes me think it’s around the corner. (Turns out that hunch was correct because it landed in Safari Technology Preview 125 after writing this.)
In the meantime, though, is it worth using hidden=until-found? Because if we’re aiming for a consistent cross-browser experience, we’d need to do some sort of swap between content-visibility: hidden to hide the content and content-visible: auto to reveal it.
Nathan Knowler expertly explains the conundrum this creates. We can’t set content-visibility: hidden on something without also removing it from in-page search. The hidden=until-found attribute works exactly like content-visibility: hidden but maintains that in-page search still works. In other words, we can’t polyfill the feature with content-visibility.
Thanks, Nathan, for going down the massive rabbit hole and finding a solution that leverages the Shadow DOM to look for the HTML attribute, check support, and revert its properties when needed to accessibly hide the content visually without fully nuking it from being found.
Styling
Seems like there isn’t much to say about styling something that ain’t visible, but notice that the in-page search feature highlights content that matches the search query.




Looks like we may get a new ::search-text pseudo that allows us to select the matched query and style the highlight color in the CSS Pseudo-Elements Module Level 4 specification, which is currently in Editor’s Draft status at the time I’m writing this.
What about multiple matches? The current selection gets a different highlight from subsequent matches.




We’ll presumably, according to the spec, be able to combine ::search-text with the :current pseudo-class to target the current match: ::search-text:current.
If you’re thinking we might get to mix-and-match ::search-text with the corresponding :past and :future pseudo-classes, I’m afraid the spec says nay. But it does not shut the door on it completely:
The :past and :future pseudo-classes are reserved for analogous use in the future. Any unsupported combination of these pseudo-classes with ::search-text must be treated as invalid.
Anything else?
Not really, but I do like the note at the end of Christian Shaefer’s “Rethinking Find-in-Page Accessibility” post that says consideration needs to go into what happens after a search query matches content on the page. Currently, the content remains visible even after in-page search is closed or canceled. Perhaps we’ll need some other HTML hint for that.
Links
A dump of things I found and used while researching this:
“Making collapsed content accessible with hidden=until-found” (Joey Arhar)
“Polyfilling hidden until-found” (Nathan Knowler)
“Hidden until found” (James McGrath)
“The hidden=until-found HTML attribute and the beforematch event” (WICG explainer)
“Announcing Interop 2025” (WebKit Blog)
Bugzilla Ticket #1761043
MDN content update (GitHub)
::search-text (CSS Pseudo-Elements Module Level 4)
Covering hidden=until-found originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Short story: Slapping hidden=until-found on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.
Covering hidden=until-found originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Covering hidden=until-found

<p>It's easy to take URL superpowers for granted, even if you already have these patterns under your belt.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-few-things-about-the-anchor-elements-href-you-might-not-have-known/">A Few Things About the Anchor Element’s href You Might Not Have Known</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>I love &#8220;re-learning&#8221; things I thought I knew. HTML is full of those opportunities (<a href="https://css-tricks.com/covering-hiddenuntil-found/">case in point</a>, like today) since it&#8217;s where you typically start learning about web development. And in those early days, you don&#8217;t know what you don&#8217;t know.</p>



<p>So, thanks <a href="https://www.jim-nielsen.com" rel="noopener">Jim Nielsen</a> for <a href="https://blog.jim-nielsen.com/2025/href-value-possibilities/" rel="noopener">giving me a reason to give URL patterns another look</a>. It&#8217;s easy to take URL superpowers for granted, even if you already have these patterns under your belt.</p>



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



<p>The patterns:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;a href="#"> &lt;!-- Scrolls to the top of a document -->
&lt;a href=""> &lt;!-- Reloads the current page, preserving the search string but removing the hash string (if present). -->
&lt;a href="."> &lt;!-- Reloads the current page, removing both the search and hash strings -->
&lt;a href="?"> &lt;!-- Reloads the current page, removing both the search and hash strings (keeps `?`) -->
&lt;a href="data:"> &lt;!-- Link to data URLs, like text fragments -->
&lt;a href="video.mp4#t=10,20">  &lt;!-- Links to specific parts of a media file --></code></pre>



<p>But do yourself a favor and read Jim&#8217;s full post. He gets way more into the weeds, referencing the specification and stress testing different configurations. I mean, this is gold:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>But I’m writing because&nbsp;<code>#top</code>&nbsp;will also scroll to the top&nbsp;<em>if</em>&nbsp;there isn’t another element with&nbsp;<code>id="top"</code>&nbsp;in the document. I didn’t know that.</p>
</blockquote>



<p>Me neither.</p>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-few-things-about-the-anchor-elements-href-you-might-not-have-known/">A Few Things About the Anchor Element’s href You Might Not Have Known</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


I love “re-learning” things I thought I knew. HTML is full of those opportunities (case in point, like today) since it’s where you typically start learning about web development. And in those early days, you don’t know what you don’t know.
So, thanks Jim Nielsen for giving me a reason to give URL patterns another look. It’s easy to take URL superpowers for granted, even if you already have these patterns under your belt.




The patterns:
<a href="#"> 
<a href=""> 
<a href="."> 
<a href="?"> 
<a href="data:"> 
<a href="video.mp4#t=10,20">  
But do yourself a favor and read Jim’s full post. He gets way more into the weeds, referencing the specification and stress testing different configurations. I mean, this is gold:
But I’m writing because #top will also scroll to the top if there isn’t another element with id="top" in the document. I didn’t know that.
Me neither.


A Few Things About the Anchor Element’s href You Might Not Have Known originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

It's easy to take URL superpowers for granted, even if you already have these patterns under your belt.
A Few Things About the Anchor Element’s href You Might Not Have Known originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Few Things About the Anchor Element’s href You Might Not Have Known

<p>My brain can&#8217;t help but try to make connections between seemingly disparate ideas. And that&#8217;s what happened yesterday when I read:</p>
<ul class="wp-block-list">
<li>Hidde&#8217;s <a href="https://hidde.blog/component-conformance/" rel="noopener">&#8220;Can components conform to WCAG?&#8221;</a></li>
<li>Joas&#8217;s <a href="https://www.smashingmagazine.com/2025/08/automating-design-systems-tips-resources/" rel="noopener">&#8220;Automating Design Systems&#8221;</a></li>
<li>Zell&#8217;s <a href="https://css-tricks.com/we-might-need-something-between-root-and-relative-css-units-for-base-elements/">&#8220;We Might Need Something Between Root and Relative </a></li>
</ul>
<p>&#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/on-accessibility-conformance-design-systems-and-css-base-units/">On Accessibility Conformance, Design Systems, and CSS &#8220;Base&#8221; Units</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>My brain can&#8217;t help but try to make connections between seemingly disparate ideas. And that&#8217;s what happened yesterday when I read:</p>



<ul class="wp-block-list">
<li>Hidde&#8217;s <a href="https://hidde.blog/component-conformance/" rel="noopener">&#8220;Can components conform to WCAG?&#8221;</a></li>



<li>Joas&#8217;s <a href="https://www.smashingmagazine.com/2025/08/automating-design-systems-tips-resources/" rel="noopener">&#8220;Automating Design Systems&#8221;</a></li>



<li>Zell&#8217;s <a href="https://css-tricks.com/we-might-need-something-between-root-and-relative-css-units-for-base-elements/">&#8220;We Might Need Something Between Root and Relative CSS Units for “Base Elements&#8221;</a></li>
</ul>



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



<p>What we have is:</p>



<ul class="wp-block-list">
<li><strong>A semantic issue of saying that individual components can conform to WCAG.</strong> We might be able to &#8220;optimize&#8221; a component for accessibility, but accessible experiences are composed of complete web pages containing components designed to work together.</li>



<li><strong>A desire to automate all things in a design system.</strong> Update it here and it updates all over. But there&#8217;s still this matter of knowing if changing one component in a design system impacts other components.</li>



<li><strong>A musing over a possible new CSS &#8220;base&#8221; unit.</strong> The idea is to set one element as a &#8220;base&#8221; that allows other elements to inherit its font-related properties as roots for better vertical rhythm between elements, no matter their proximity.</li>
</ul>



<p>Makes me think:</p>



<ul class="wp-block-list">
<li>Could a base unit in CSS make components more interoperable? Like, if buttons could inherit its font size depending on what other component it is in? Sorta like container query units, but without needing additional wrappers in the markup.</li>



<li>Would that allow design systems changes to cascade between components more smoothly?</li>



<li>Will properties inherited through a base element make components more optimized for WCAG conformance when implemented on a page with other components?</li>



<li>Does this overlap with CSS <code><a href="https://css-tricks.com/almanac/rules/s/scope/">@scope</a></code> at all?</li>
</ul>



<p>Sorry for the shower thoughts, but it&#8217;s interesting to consider how these ideas work together.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/on-accessibility-conformance-design-systems-and-css-base-units/">On Accessibility Conformance, Design Systems, and CSS &#8220;Base&#8221; Units</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


My brain can’t help but try to make connections between seemingly disparate ideas. And that’s what happened yesterday when I read:
Hidde’s “Can components conform to WCAG?”
Joas’s “Automating Design Systems”
Zell’s “We Might Need Something Between Root and Relative CSS Units for “Base Elements”




What we have is:
A semantic issue of saying that individual components can conform to WCAG. We might be able to “optimize” a component for accessibility, but accessible experiences are composed of complete web pages containing components designed to work together.
A desire to automate all things in a design system. Update it here and it updates all over. But there’s still this matter of knowing if changing one component in a design system impacts other components.
A musing over a possible new CSS “base” unit. The idea is to set one element as a “base” that allows other elements to inherit its font-related properties as roots for better vertical rhythm between elements, no matter their proximity.
Makes me think:
Could a base unit in CSS make components more interoperable? Like, if buttons could inherit its font size depending on what other component it is in? Sorta like container query units, but without needing additional wrappers in the markup.
Would that allow design systems changes to cascade between components more smoothly?
Will properties inherited through a base element make components more optimized for WCAG conformance when implemented on a page with other components?
Does this overlap with CSS @scope at all?
Sorry for the shower thoughts, but it’s interesting to consider how these ideas work together.
On Accessibility Conformance, Design Systems, and CSS “Base” Units originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

My brain can’t help but try to make connections between seemingly disparate ideas. And that’s what happened yesterday when I read:
Hidde’s “Can components conform to WCAG?”
Joas’s “Automating Design Systems”
Zell’s “We Might Need Something Between Root and Relative 
…
On Accessibility Conformance, Design Systems, and CSS “Base” Units originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

On Accessibility Conformance, Design Systems, and CSS “Base” Units

<p>I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/we-might-need-something-between-root-and-relative-css-units-for-base-elements/">We Might Need Something Between Root and Relative CSS Units for &#8220;Base Elements&#8221;</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


CSS provides us with root and relative values.
Root values are like rem and rlh — they’re tied to the values written in the :root selector (the most common one would be the html element).
Relative values are like em, lh, ch and various others — they’re tied to the font-size in that specific element.
I’ve come to realize that perhaps we need to have a unit between root and relative values. Having such a unit allows us to size things without complex em or lh calculations.



Let me give you an example: Prose
Earlier this year, Jen Simmons wrote about the using the lh unit to style margin and padding for better typographical vertical rhythm.
p { margin-block: 1lh; } 
We can expand the concept a little further to include all other spaces around the text. One way of doing this is the “Lobotomized Owl” technique that Heydon Pickering popularized a while ago.
* + * {
  margin-top: 1lh;
}
Today, we can also use the :not(:first-child) to achieve the same effect — and that might be a tad more readable.
*:not(:first-child) {
  margin-top: 1lh;
}
Often, we need to constrain these selectors so they don’t spill everywhere and break the rest of the page. One great class for this is .prose.
.prose {
  *:not(:first-child) {
    margin-top: 1lh;
  }
}
This is simple and good — but what happens if you include typography of other sizes…? You’ll see this break down incredibly quickly (because 1lh of a <h2> element can be incredibly big).
CodePen Embed Fallback
One way around this issue is to use Flexbox on the parent element. By doing so, we can set gap to 1lh and we don’t have to deal with the value of 1lh changing on the h2 element. (Bonus, we also don’t have to deal with margin collapse.)
.prose {
  display: flex; 
  flex-direction: column;
  gap: 1lh;
}
CodePen Embed Fallback
But we introduce a new problem here: proximity confusion.
Content below <h2> belongs within the <h2>. But content above the <h2> belongs with the previous section header. We should, ideally, make the spacing different to clarify their relationship.
The simplest way is to add a little margin above the <h2>.
But we can’t add margin above <h2> with lh since the lh value on <h2> will be different from that of the surrounding elements.
CodePen Embed Fallback
We have to use a little CSS trickery and margin-bottom (or the logical equivalent) on the element above the <h2>. Here, we simply set margin-bottom to 1lh since we use Flexbox and don’t have to deal with margin collapse. (If you had to deal with margin collapse, you’d have to set margin-bottom to 2lh.)
CodePen Embed Fallback
Is there a better way? Well, that’s what this article is about!
But before we go there, let’s consider a different UI that has similar problems so you can begin to see the greater ramifications of this problem (and the importance of the solution).
Here’s a second example: Card component
Now let’s say we have a card component that’s divided into two parts, header and content.
In these kind of components, the header is often styled with a different font-size than the content.




To create such a card, the simplest markup may be:
<div class="card">
  <h2 class="title">Card Title</h2>
  <div class="content">Card Content</div>
</div>
Unfortunately, we cannot use the lh unit to create the padding within the card — doing so causes the margin on the <h2> element to blow (incredibly) out of proportion!
CodePen Embed Fallback
There are, of course, many ways to handle this type of situation.
One possible way is to change the markup such that the <h2> resides in a <header> element. When we do this, we can apply the padding on the <header>, bypassing the enlarged 1lh problem.
<div class="card">
  <header class="title">
    <h2>Card Title</h2>
  </header>
  <div class="content">Card Content</div>
</div>
CodePen Embed Fallback
While changing the markup solves the problem, it’s not ideal — since we probably don’t want to create an extra header element unless it’s necessary…
Well, another possible method is to use a root value like rlh. This allows <h2> and content to use the same base unit, and therefore, create the same padding.
CodePen Embed Fallback
But we still run into problems if the .card needs to scale to different font-size values. Imagine you want to make a smaller card — now 1rlh isn’t going to look right since the padding value becomes too big in proportion to the content.
CodePen Embed Fallback
What can we do?
A simple solution is to change the padding value according to the supported variants of the component — but this kinda thing is sorta hard-coded and not very friendly…
.card-sm { --padding: 0.75rlh; }
.card-md { --padding: 1rlh; }
.card-lg { --padding: 1.25rlh; }
CodePen Embed Fallback
What’s the alternative?
This is where an intermediary between root and relative units might come in handy.
The handy in-between unit
This section is purely speculative CSS to illustrate a point. We’ll follow up with a simple way to actually do this in practice today in a later section, so hang tight and follow along conceptually for now.
Let’s say we have a unit that takes it’s reference value from a specified element. We’ll call this a base unit, for lack of a better name.
So, 1 base font-size unit could be 1bem.
And 1 base line-height unit could be 1blh.
Pretty easy at this point.
Imagine we can style the cards with this base unit. Then we can simply use 1blh to quantify the padding and everything else would be sized appropriately:
.card {
  > * { padding: 1blh; }  
}

.card-sm { font-size: 0.8em; }
.card-md { font-size: 1em; }
.card-lg { font-size: 1.2em; }
Hurrah?
Tying this back to the .prose example earlier, it could very well resolve the proximity confusion issue without complicating our selectors:
.prose {
  h2:not(:first-child) {
    margin-top: 2blh;
  }
}
How might this work?
For this function to be added easily to modern CSS, I could think of two possible ways:
Attach that to container queries.
Define a syntax similar to anchor positioning.
The container query method
We already have stuff like cqw and cqh to denote container width and container height values. It’s not too far of a cry to say we could have a cqem (container-query em) unit or cqlh (container-query line-height).
There are downsides to this approach.
First, containers need to be defined in a parent element. This requires more markup and makes the code somewhat complex and unintuitive. This code below might be a possible implementation:
<div class="container">
  <div class="card">
    <h2 class="title">Card Title</h2>
    <div class="content">Card Content</div>
  </div>
</div>
.container {
  container-type: inline-size; 
}

.card {
  > * { padding: 1cqbl; }
}
Dealing with nested containers isn’t much a problem, because we can always set the container-name we want to inherit from. But, there might be a collision if we want to use different container references for cqbl and cqw.
Imagine this:

<div class="container-base">

  
  <div class="two-column-grid"> 
    <div class="card">...</div>
    <div class="card">...</div>
  </div>

</div>
Kinda sucks to be limited by container collisions.
Anchor positioning syntax
In this case, we first decide the base we want to inherit from. We can call this a base-anchor, or something similar.
Here, we can explicitly set a base anchor name — or perhaps even leave it as none if we don’t wanna name it. Then the rest of the elements within could inherit from this base value immediately:
.card {
  base-anchor: --card; /* or perhaps none */
  > * { padding: 1blh; }
}
If we need to refer to this anchor from a completely unrelated component, we can leverage the anchor name and simply do this:
.far-away-comp {
  base-name: --card; 
  /* Then use blh from here */
}
Double anchor
One fascinating aspect I can think of is a potential double-anchor use case where the base component is able to inherit its font-size or value from yet another base or its parent element.
This flexibility lets us create component variations based on font sizes incredibly easily without needing to rely on complex em calculations.
Here’s an example of what I’m talking about:
.prose {
  base-anchor: --prose;
  font-size: 1em;
  line-height: 1.5;
}

/* Inherits font-size from .prose */
/* This is automatic if base-name is not provided */
.card {
  base-anchor: none;
  base-name: --prose;

  /* In this case, 1blh could be 1.5em */
  > * { padding: 1blh; }
}

/* After inheriting the font size, since we have a base-anchor in the card, we adjust the font-size value accordingly, so: 
  - 1bem would mean 0.8em further in the card
  - 1blh could then mean 0.8 * 1.5em = 1.2em 
*/
.card.card-sm {
  font-size: 0.8em;
}
Fascinating, yeah? This brings about a whole new possibility when creating reusable components.
Putting it into practice today
Let me preface this section with the fact that bem and blh does not exist today. So whatever implementation I can come up with is simply an imperfect stop-gap measure.
Today, we are certain that we can use the em unit for such a purpose — but this requires a little bit more calculation, since em is a relative, not a base unit.
The first step is to determine the base element — and the base font size — which we can do by setting the base-size property:
.card { 
  --base-size: 1em; 
  font-size: var(--base-size);
}

.card-sm { 
  --base-size: 0.8em; 
}
We can then simulate the bem (base em) unit by dividing the intended font-size with the base-size:
.card {
  h2 {
    --font-size: 2em;
    font-size: calc(var(--font-size) / var(--base-size));  
  }
}
Unfortunately, the above code won’t work because we can’t perform a calc() division with a unit-ed value. So the best we can do to remove the units from --base-size.
When we do this, we need to perform another calc() on the base element to create the actual font-size property:
.card { 
  --base-size: 1; 
  font-size: calc(var(--base-size) * 1em);
}
Then we perform the same calc() in the <h2> to create its font size:
.card {
  h2 {
    --font-size: 2;
    font-size: calc(var(--font-size) / var(--base-size) * 1em);  
  }
}
This is all starting to get a little “ugh”.
Nobody wants to all these boilerplate code. So, this is best abstracted away with a mixin, or perhaps even a function. If you use Sass, you might imagine something like this:
@mixin base-anchor() {
  font-size: calc(var(--base-size) * 1em);
}
If you use Tailwind, perhaps you can imagine the Tailwind utility to do the same. After all, Tailwind utilities can be seen as convenient Sass mixins.
@utility base-anchor {
  font-size: calc(var(--base-size) * 1em);
}
We can then apply this utility into the base element. The code looks a little bit cleaner:
.card {
  @apply base-anchor; 
  --base-size: 1; 
}

.card-sm { --base-size: 0.8; }
For the <h2>, we can create another utility to perform the calculation for us. It’ll look something like this:
@utility text-relative {
  font-size: calc(var(--text-size) / var(--base-size) * 1em);
}
We can then use the utility like this:
.card .title {
  @apply text-relative;
  --text-size: 2; 
}
Now, to calculate the padding of the card for the .title element, we need to reverse the font-size to get the base-size value. This is best done with a CSS function, which is not widely supported today, but hopefully, soon!
@function --bem(--multiplier) {
  result: calc(var(--text-size / var(--base-size) * 1em * --multiplier));
}
We can then use --bem to calculate the padding on the card title:
.card .title {
  /* ... */
  padding-block: --bem(0.5);
  padding-inline: --bem(1);
}
We mentioned above that the lh value works better for margin and padding since it preserves vertical rhythm. So, why not create a --blh function too?
In this case, we can add a --leading variable that the function can inherit from:
@function --blh(--multiplier, --lh-multiplier) {
  result: calc(
    var(
      --text-size / var(--base-size) * 1em * --multiplier *
        var(--lh-multiplier, var(--leading))
    )
  );
}
Then we can use --blh like this:
.card .title {
  /* ... */
  padding-block: --blh(0.5);
  padding-inline: --blh(1);
}
In the spirit of today
We can’t use --bem and --blh in production because CSS Functions are not available all browsers yet. In the spirit of making bem work right now, we can create a utility, that calculates the --base-font-size from the --font-size.
Notice this new variable is called --base-font-size, not --base-size, since --base-size is already used. (We cannot overwrite the CSS variable.)
/* I multiplied the value by 1em here to make it easy for you to use the value */
@utility base-font-size {
  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
}
We can also create a utility called base-line-height to get the value of the line-height. When we do this, it’s much easier if we also pass in a --leading variable:
@utility base-line-height {
  --base-leading: calc(var(--base-font-size)* var(--leading));
}
Then we can use calc on --base-leading to get the values we want:
.card .title {
  @apply text-relative;
  @apply base-font-size;
  @apply base-line-height;
  --font-size: 2; 
  padding-inline: var(--base-line-height);
  padding-block: calc(var(--base-line-height) * 0.5);
}
Putting it all together
Let’s first put together the necessary utilities and functions to make this happen today:
/* The necessary utilities */
@utility base-anchor {
  font-size: calc(var(--base-size) * 1em);
}

@utility text-relative {
  font-size: calc(var(--font-size) / var(--base-size) * 1em);
}

/* To use this today */
@utility base-font-size {
  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
}

@utility base-line-height {
  --base-line-height: calc(var(--base-font-size)* var(--leading));
}

/* Easier usage when CSS Functions become available */
@function --bem(--multiplier) {
  result: calc(var(--font-size / var(--base-size) * 1em * --multiplier));
}

@function --blh(--multiplier, --lh-multiplier) {
  result: calc(
    var(
      --font-size / var(--base-size) * 1em * --multiplier *
        var(--lh-multiplier, var(--leading))
    )
  );
}
Now here’s the .card code to achieve the functionality in Tailwind we were talking about. You can see it at work here.
/* What we can actually use today */
.card {
  @apply base-anchor;
  --base-size: 1;
  --leading: 1.5;
  
  > * { padding: 1lh; }

  .title {
    @apply text-relative;
    @apply base-font-size;
    @apply base-line-height;
    --font-size: 2; 
    padding-inline: var(--base-line-height);
    padding-block: calc(var(--base-line-height) * 0.5);
  }
}

.card-sm {
  --base-size: 0.8;
  .title {
    --font-size: 1.2;
  }
}

/* What we can use when CSS Functions are available */
.card {
  @apply base-anchor;
  --base-size: 1;
  
  > * { padding: calc(--blh(1)); }

  .title {
    @apply text-relative;
    --text-size: 2; 
    padding-block: calc(--blh(0.5));
  }
}
It’s still not as pretty as the bem and blh versions I’ve shown you above, but at the very least, we achieve some sort of functionality, yeah? And it doesn’t look half bad!
Using this with Splendid Labz today
Splendid Styles — the branch of Splendid Labz that handles design and styles — contains the code you can use today.
We also included the --bem and --blh versions if you wanna play with them as well.
To use Splendid Styles, just download the library, import the base-font-size file, and do what you’ve just seen the above!
npm i @splendidlabz/styles
@import '@splendidlabz/styles/typography/base-font-size.css'
That’s it!
Now, if you’re interested in all of the tools I’m been cooking up to make web development simpler, you can grab an early bird discount for the Splendid Pro package today — this is available to all CSS-Tricks readers!
(I might add a lifetime option to the Styles package as it evolves to sufficiently. But it might be a year or so before that happens.)
Alright, enough promotion. Let’s come back here.
What do you think about this unit between root and relative values?
I hesitate to call it “base” em because “base” can mean so many things. But it also sounds right at the same time.
Does bem and blh make sense to you?
Do you think I’m thinking a wee bit too much for this design aspect?
Maybe you’ve got a better name for this?
I’d love to hear from you so please feel free to share your thoughts below!
We Might Need Something Between Root and Relative CSS Units for “Base Elements” originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.
We Might Need Something Between Root and Relative CSS Units for “Base Elements” originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

We Might Need Something Between Root and Relative CSS Units for “Base Elements”

<p>CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-questions/">CSS-Questions</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p><a href="https://css-tricks.com/author/sunkanmifafowora/">Sunkanmi Fafowora</a> is a frequent flier around here. You&#8217;ve probably seen his name pop up in the CSS-Tricks Almanac and we actually just published something today that he wrote up for the <a href="https://css-tricks.com/almanac/functions/c/color-mix/"><code>color-mix()</code> function</a>. The guy spends a lot of time in the Almanac because he loves technical documentation, something he showed off when writing the <a href="https://css-tricks.com/css-color-functions/">CSS Color Functions Guide</a>.</p>



<p>And it&#8217;s that love for technical documentation that lead him to ship <a href="https://css-questions.com" rel="noopener">CSS-Questions</a> (gotta love that hyphenated URL, right?!), a place where you can test your CSS knowledge with over 100 questions. You can take the <a href="https://css-questions.com/comprehensive-exam" rel="noopener">comprehensive exam</a> or a <a href="https://css-questions.com/basic-test" rel="noopener">basic one</a> with 20 questions if all you want is a pop quiz.</p>



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



<p>And of course, the first question I get is related to CSS color functions!</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1420" height="810" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.44.38-AM.png?resize=1420%2C810&#038;ssl=1" alt="Question 1: What color model does oklab() improve upon?" class="wp-image-388741" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.44.38-AM.png?w=1420&amp;ssl=1 1420w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.44.38-AM.png?resize=300%2C171&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.44.38-AM.png?resize=1024%2C584&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.44.38-AM.png?resize=768%2C438&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">You&#8217;re just trolling me now, aren&#8217;t you Sunkanmi?!</figcaption></figure>



<p>My first try was a valiant effort, I&#8217;d say&#8230;</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="727" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.50.22-AM-1024x727.png?resize=1024%2C727&#038;ssl=1" alt="18 out of 20" class="wp-image-388743" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.50.22-AM.png?resize=1024%2C727&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.50.22-AM.png?resize=300%2C213&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.50.22-AM.png?resize=768%2C545&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-8.50.22-AM.png?w=1502&amp;ssl=1 1502w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p><em>Almost</em> perfect. Could be the title of my autobiography.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>There, now I feel better. &#x1f605;</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="796" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM-1024x796.png?resize=1024%2C796&#038;ssl=1" alt="20 out of 20." class="wp-image-388752" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM.png?resize=1024%2C796&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM.png?resize=300%2C233&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM.png?resize=768%2C597&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM.png?resize=1536%2C1194&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/08/Screenshot-2025-08-12-at-5.24.05-PM.png?w=1580&amp;ssl=1 1580w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-questions/">CSS-Questions</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Sunkanmi Fafowora is a frequent flier around here. You’ve probably seen his name pop up in the CSS-Tricks Almanac and we actually just published something today that he wrote up for the color-mix() function. The guy spends a lot of time in the Almanac because he loves technical documentation, something he showed off when writing the CSS Color Functions Guide.
And it’s that love for technical documentation that lead him to ship CSS-Questions (gotta love that hyphenated URL, right?!), a place where you can test your CSS knowledge with over 100 questions. You can take the comprehensive exam or a basic one with 20 questions if all you want is a pop quiz.




And of course, the first question I get is related to CSS color functions!
You’re just trolling me now, aren’t you Sunkanmi?!



My first try was a valiant effort, I’d say…




Almost perfect. Could be the title of my autobiography.
There, now I feel better. 😅


CSS-Questions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions. 
CSS-Questions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS-Questions

<p>How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML <code>blockquote</code> element using borders, decorative quote marks, custom shapes, and a few unexpected properties.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/getting-creative-with-quotes/">Getting Creative With Quotes</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Block quotes and pull quotes are useful for punctuating solid blocks of running text. They’re also two of the best typographic elements for acting as visual landmarks to catch someone’s eye. There are no rules about how long a quote should be, how big it should look, or even how it’s styled.
So, how do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.




Patty Meltt is an up-and-coming country music sensation.



My brief: Patty Meltt is an up-and-coming country music sensation, and she needed a website to launch her new album. She wanted it to be distinctive-looking and memorable, so she called Stuff & Nonsense. Patty’s not real, but the challenges of designing and developing sites like hers are.
First, a quote-unquote “recap.”
There are no limitations on how quotations can be styled. Block and pull quotes can both be eye-catching design elements, but they convey different messages. While a block quote is typically inside the content flow, a pull quote (sometimes called a callout) is extracted from the text to form a separate element.
Pull quotes extracted from the text



The proper HTML for marking up a block quote depends on its contents. My design for Patty Meltt includes concert reviews, which contain the reviewer’s name:
<blockquote>
  <p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
  <footer>— Waylon Bootscuffer</footer>
</blockquote>
Here, the footer contains information about the source or author of the parent element. This makes it a good fit for attributions inside a blockquote, where it indicates who wrote it. But what about cite?
For years, I used the cite element to mark up attributions. It’s one of those sneaky bits of HTML that felt intuitive until I read the spec and went, “Dagnabbit!” because cite isn’t meant to label people. Instead, it should be used for:
“The title of a creative work (e.g. book, website, song, painting, etc.)”
<blockquote>
  <p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
  <footer>— Waylon Bootscuffer, <cite>Country Music Magazine</cite></footer>
</blockquote>
So, in that example, footer marks up the attribution, and cite points to the title of the publication, not the person writing it. This gives the markup a semantic boost and helps people who use screen readers.
Styling with personality
Out-of-the-box, browsers do very little to style blockquotes, except for adding inline margins. You could add some simple blockquote styling, but with just a little more style, you can transform them into expressive design elements that reflect a brand’s personality and voice.
Quotation designs to reflect a brand’s personality and voice



For Patty Meltt’s design, I wanted her quotes to feel confident, loud, and a little over the top.
Tip: Interactive examples from this article are available in my lab.
Borders
A simple border, used well, can make block and pull quotes stand out and anchor them into a layout. A border on the left or top separates a block quote from surrounding content, helping a reader recognise it as a different voice from the main narrative.
In magazines and newspapers, block quotes punctuate content blocks and are frequently styled to contrast with the surrounding text. A full-width, bordered block quote encourages a reader to pause for a moment.
Block quote with left border (left) and a block quote with top border (right)



It’s a simple, yet effective, way to focus someone’s attention on a message. A thin border feels quiet and understated:
blockquote {
  padding-inline: 1.5rem;
  border-inline-start: 1px solid #98838e;
  border-inline-end: 1px solid #98838e;
}
Pull quotes with thin borders



This may suit some brands, but that’s not a style which reflects Patty’s personality. Whereas a bolder, thicker border feels more confident, like it has something important to say:
blockquote {
  padding-inline: 1.5rem;
  border-inline-start: 5px solid #98838e;
  border-inline-end: 5px solid #98838e;
}
Pull quotes with thick borders



Those borders needn’t always fill the full height or width of a blockquote, so instead of using the border property, use ::before and ::after pseudo-elements to add faux borders at any size:
blockquote {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
blockquote::before,
blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
}
Pull quote with faux borders



You could even animate those faux borders using keyframe animations or simple transitions to increase their width when someone interacts with the quotation:
blockquote::before,
blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
  transition: 300ms width ease-in-out;
}

blockquote:hover::before,
blockquote:hover::after {
  width: 100%;
}
Quote marks
Before choosing how to style your quote marks, consider whether you need them at all. Technically, an HTML blockquote implies its content is a quotation. So, from an accessibility and semantic standpoint, quote marks aren’t required because screen readers and search engines will recognise a blockquote. However, quote marks can visually emphasise quoted content and add interest and personality to a design.
Quote marks add interest and personality



Are both opening and closing marks always needed? Possibly, when a design needs a traditional feel, or a quotation appears in a passage of running text:
blockquote {
  position: relative;
  padding-inline: 64px;
}
  
blockquote img:first-of-type,
blockquote img:last-of-type {
  position: absolute;
}

blockquote img:first-of-type {
  top: 0;
  left: 0;
}

blockquote img:last-of-type {
  right: 0;
  bottom: 0;
}
Decorative oversized opening mark



Or, to give a design an editorial feel, you might use only a decorative oversized opening mark for a pull quote, which is separate from the normal flow of text:
blockquote {
  display: flex;
  flex-direction: column;
  align-items: center;
}

blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
}
Quote marks library
Block quotes don’t necessarily need quote marks, but when you use them with purpose, they become more than punctuation. They become part of the design personality. Decorative marks are ideal when a brand wants to infuse its character into a design.
Poppins quote mark (left) and a Punch 3D quote mark (right)



Sadly, even the nicest designed typefaces can include dull and uninspiring quote marks. So, it’s important to remember that you can choose marks from an altogether different font if they better suit a design.
Part of my quote marks library



That’s why, whenever I audition a new typeface, I check its quote marks. If they’re memorable or noteworthy, I add them as SVGs to my quote marks library so I can easily find them later.
Shapes
Quotation design needn’t stop at borders and quote marks. Block and pull quotes can be any shape. You might style an album or concert review as a speech or thought bubble, and include an avatar for the author. Or, you could use a clip-path or mask to transform a quotation into any shape you can imagine.
Speech bubble, thought bubble, and blob


Designing for Patty Meltt
Patty Meltt wanted a website packed with design details. Every element added to a design is an opportunity to be expressive, and that includes her quotations. From the selection of designs I showed her, she felt a mixture of quote marks, avatar images, and borders — with type set in a flowing script — best suited her style.
Design for Patty Meltt’s block quote (left) and pull quote (right)



To implement her pull quote, I used a cursive typeface, which contrasts with the rest of her typographic design:
blockquote p {
  font-family: "Lobster Two", cursive;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  text-transform: unset;
}
Then I added an SVG quote mark from the Ohno type foundry’s Blazeface type family.
<div>
  <img src="img/blazeface-start.svg" alt="" width="48">
</div>
I turned its parent division into a flex container and aligned the contents vertically:
blockquote div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
…and used generated content to add a flexible-width horizontal line to fill any remaining space:
blockquote div:first-of-type::after {
  content: "";
  display: block;
  flex: 1;
  height: 5px;
  background-color: #98838e;
}
Conclusion
With a little care and creativity, block quotes can become expressive, brand-building elements, as distinctive as a logo or headline. Whether you’re working with quiet, thoughtful quotes or loud, in-your-face testimonials, styling them is an opportunity to reinforce a client’s personality and voice.
Patty Meltt’s quotations became mini design statements. But the same principles apply no matter the brand: get the semantics right, choose styling that fits the tone, and don’t be afraid to experiment with borders, quote marks, and even shapes.
Getting Creative With Quotes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.
Getting Creative With Quotes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Getting Creative With Quotes

<p>Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/stuff-nonsense-practical-layout-workshop/">Stuff &amp; Nonsense Practical Layout Workshop</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>We don&#8217;t publish a big ol&#8217; bunch of links pushing products and whatnot around here. But I do like sharing a good resource when it&#8217;s available and that&#8217;s what I&#8217;m doing here with Andy Clarke&#8217;s upcoming <a href="https://stuffandnonsense.co.uk/blog/practical-layout-workshop-for-designers-and-creative-teams" rel="noopener">Practical Layout Workshop</a>.</p>



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



<p>First off, the deets:</p>



<ul class="wp-block-list is-style-almanac-list">
<li><strong>Date</strong>: Thursday, 18th September</li>



<li><strong>Time</strong>: 3:00 p.m. (UK)</li>



<li><strong>Duration</strong>: 2 hours (live, with demos and Q&amp;A)</li>



<li><strong>Format</strong>: Online (join from anywhere), recording included</li>



<li><strong>Price:</strong> £69</li>
</ul>



<p>You probably already know Andy pretty well. He&#8217;s been a leading voice in web design forever. He&#8217;s also <a href="https://css-tricks.com/author/andyclarke/">written a slew of super CSS-Tricks articles</a> recently (including <a href="https://css-tricks.com/getting-creative-with-quotes/">this one today</a>, with more on the way!) that are all about &#8220;getting creative&#8221; with common UI patterns while leveraging CSS to embrace a healthy dose of whimsy.</p>



<p>Here&#8217;s what he had to say to me about the workshop:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Over the past year, I’ve been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where I share what I’ve learned, with examples, demos, and practical takeaways you can actually use.</p>
</blockquote>



<p>Just get a whiff of the stuff he&#8217;s been digging into:</p>



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

  <time datetime="2025-06-03" title="Originally published Jun 3, 2025">
    <strong>
                
        Article
      </strong>

    on

    Jun 3, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/getting-creative-with-html-dialog/">
      Getting Creative With HTML Dialog    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/dialog/" rel="tag">dialog</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/andyclarke/" aria-label="Author page of Andy Clarke">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/andy-clarke-80x80.jpg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/andyclarke/">
      Andy Clarke    </a>
  </div>

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

  <time datetime="2025-07-18" title="Originally published Jul 18, 2025">
    <strong>
                
        Article
      </strong>

    on

    Jul 18, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/getting-creative-with-versal-letters/">
      Getting Creative With Versal Letters    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/initial-letter/" rel="tag">initial-letter</a> <a href="https://css-tricks.com/tag/inspiration/" rel="tag">inspiration</a> <a href="https://css-tricks.com/tag/typography/" rel="tag">typography</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/andyclarke/" aria-label="Author page of Andy Clarke">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/andy-clarke-80x80.jpg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/andyclarke/">
      Andy Clarke    </a>
  </div>

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

  <time datetime="2025-01-27" title="Originally published Jan 27, 2025">
    <strong>
                
        Article
      </strong>

    on

    Jan 27, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/revisiting-css-multi-column-layout/">
      Revisiting CSS Multi-Column Layout    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/columns/" rel="tag">columns</a> <a href="https://css-tricks.com/tag/layout/" rel="tag">layout</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/andyclarke/" aria-label="Author page of Andy Clarke">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/andy-clarke-80x80.jpg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/andyclarke/">
      Andy Clarke    </a>
  </div>

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

  <time datetime="2025-03-21" title="Originally published Mar 21, 2025">
    <strong>
                
        Article
      </strong>

    on

    Mar 21, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/revisiting-css-border-image/">
      Revisiting CSS border-image    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/border/" rel="tag">border</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/andyclarke/" aria-label="Author page of Andy Clarke">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/andy-clarke-80x80.jpg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/andyclarke/">
      Andy Clarke    </a>
  </div>

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

  <time datetime="2025-04-30" title="Originally published Apr 30, 2025">
    <strong>
                
        Article
      </strong>

    on

    Apr 30, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/revisiting-image-maps/">
      Revisiting Image Maps    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/images/" rel="tag">images</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/andyclarke/" aria-label="Author page of Andy Clarke">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/andy-clarke-80x80.jpg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/andyclarke/">
      Andy Clarke    </a>
  </div>

</article>
    </div>
  



<p>And when you pair that with the <a href="https://stuffandnonsense.co.uk/toon-titles/index.html" rel="noopener">Toon Title demos</a> he&#8217;s been publishing, you get a really good idea of the clever ideas and solid techniques you&#8217;ll take away from this workshop.</p>



<p>Oh, and CSS-Tricks readers can get in at a £5 discount with coupon code <code>FRIEND5</code> (that&#8217;s the number 5 at the end) at checkout. &#x1f609;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/stuff-nonsense-practical-layout-workshop/">Stuff &amp; Nonsense Practical Layout Workshop</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


We don’t publish a big ol’ bunch of links pushing products and whatnot around here. But I do like sharing a good resource when it’s available and that’s what I’m doing here with Andy Clarke’s upcoming Practical Layout Workshop.




First off, the deets:
Date: Thursday, 18th September
Time: 3:00 p.m. (UK)
Duration: 2 hours (live, with demos and Q&A)
Format: Online (join from anywhere), recording included
Price: £69
You probably already know Andy pretty well. He’s been a leading voice in web design forever. He’s also written a slew of super CSS-Tricks articles recently (including this one today, with more on the way!) that are all about “getting creative” with common UI patterns while leveraging CSS to embrace a healthy dose of whimsy.
Here’s what he had to say to me about the workshop:
Over the past year, I’ve been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where I share what I’ve learned, with examples, demos, and practical takeaways you can actually use.
Just get a whiff of the stuff he’s been digging into:
dialog    
    
  
    
      Andy Clarke    
  
initial-letter inspiration typography    
    
  
    
      Andy Clarke    
  
columns layout    
    
  
    
      Andy Clarke    
  
border    
    
  
    
      Andy Clarke    
  
images    
    
  
    
      Andy Clarke    
  
And when you pair that with the Toon Title demos he’s been publishing, you get a really good idea of the clever ideas and solid techniques you’ll take away from this workshop.
Oh, and CSS-Tricks readers can get in at a £5 discount with coupon code FRIEND5 (that’s the number 5 at the end) at checkout. 😉
Stuff & Nonsense Practical Layout Workshop originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.
Stuff & Nonsense Practical Layout Workshop originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Stuff & Nonsense Practical Layout Workshop

<p>Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/how-to-prepare-for-css-specific-interview-questions/">How to Prepare for CSS-Specific Interview Questions</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.
How to Prepare for CSS-Specific Interview Questions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.