Forem: Mads Stoumann

Re-creating a Pantone Color Deck in CSS

Mads Stoumann — Wed, 11 Feb 2026 13:05:10 +0000

If you’ve ever held a Pantone fan deck — the kind graphic designers used to carry around like a sacred artifact — you know the satisfying way those cards fan out from a single rivet point. Each card swings on its own arc, and you flip through the colors by hand.

I wanted to recreate that experience for this week’s CodePen challenge, which is all about color palettes.

Follow along as we build a fully interactive color fan deck where the spread adapts to the container width, cards know their position among their siblings, and clicking a card to "focus" it is handled entirely by the browser’s native <details> element.

No JavaScript! Let’s dive in!

The Markup

Our fan deck is a <section> containing a cover card, followed by color cards, each wrapped in a <details> element:

<section>
  <!-- cover card -->
  <details name="deck">
    <summary>Reds <span>×</span></summary>
    <ul>
      <li style="--c: lab(45% 67 30)">
        <strong>Poppy Red</strong>
        <dl>
          <dt>HEX</dt><dd>#DC3D4C</dd>
          <dt>RGB</dt><dd>220, 61, 76</dd>
          <dt>LAB</dt><dd>45, 56, 25</dd>
        </dl>
      </li>
      <!-- more colors -->
    </ul>
  </details>

  <details name="deck">
    <summary>Blues <span>×</span></summary>
    <!-- ... -->
  </details>

  <!-- more cards -->
</section>

A few things to note:

The cover card doesn’t toggle — it just sits at the front of the deck.
Each color card is a <details name="deck"> element. The name attribute is the key — it makes them an exclusive accordion. Only one can be open at a time, and clicking the open one closes it.
The <summary> serves as both the card label and the click target.

Not much to see yet. Let’s add some CSS:

I won’t go into the CSS in depth here; it’s simply a <ul> with the color values defined in a <dl> and wrapped up in a grid.

Stacking the Deck

First, we need all cards to occupy the same grid cell, stacked on top of each other:

section {
  container-type: inline-size;
  display: grid;
  place-items: end center;
}

section > * {
  grid-area: 1 / -1;
  z-index: calc(sibling-count() - sibling-index());
}

Setting container-type: inline-size on the <section> lets us use container query units later. Every direct child is placed in the same grid cell with grid-area: 1 / -1, creating a stack.

The z-index line uses two new CSS functions — sibling-count() and sibling-index() — to ensure the first card sits on top. The first child has sibling-index() of 1, so it gets the highest z-index. The last child gets 1. Natural stacking order — no hardcoded values, no counters, no JavaScript.

So, for now, we just see the cover card — the color cards are hidden behind it (the rivet is an ::after pseudo-element with a radial-gradient):

The Fan Spread with `progress()`

This is where it gets interesting. A real fan deck spreads wider when you have room, and collapses into a tight stack in a narrow space. We want the same behavior — and the new CSS progress() function makes it elegant:

section > * {
  --spread: progress(100cqi, 300px, 1440px);
  --end-degree: calc(var(--spread) * 45deg);
  --start-degree: calc(var(--spread) * -45deg);
}

progress() returns a value between 0 and 1 based on where a value falls within a range. Here, progress(100cqi, 300px, 1440px) asks: "How far is the container’s inline size between 300px and 1440px?"

At 300px or below: --spread is 0 — no fan, cards stacked flat.
At 1440px or above: --spread is 1 — full fan, cards spanning from -45° to +45°.
At 870px (midpoint): --spread is 0.5 — half fan.

No @container queries, just one line of CSS, and the spread is continuously responsive.

Positioning Each Card with `sibling-index()`

Now each card needs its own rotation angle, interpolated between --start-degree and --end-degree based on its position in the deck:

section > * {
  rotate: calc(
    var(--start-degree) +
    (var(--end-degree) - var(--start-degree)) *
    (sibling-index() - 1) / (sibling-count() - 1)
  );
  transform-origin: calc(100% - var(--rivet)) calc(100% - var(--rivet));
}

Let’s break it down:

sibling-index() - 1 gives us a zero-based position (0 for first card, 1 for second, etc.)
sibling-count() - 1 gives us the total number of "gaps" between cards
Dividing them gives a progress value from 0 to 1 for each card’s position
We multiply that by the degree range and add the start offset

The transform-origin is set to the bottom-right corner — offset by --rivet — so all cards rotate around the same pivot point, just like a physical fan deck with a rivet pin.

Cool! The cards now fan out from a single point, and the spread adjusts automatically with the container width, but they’re not interactive yet.

Now we have:

Let’s resize the browser:

I find this incredibly satisfying!

Click-to-Focus with Exclusive `<details>`

Here’s where the <details> element earns its place. By giving all color cards name="deck", the browser enforces exclusive accordion behavior:

Click a card’s summary → it opens (gets the [open] attribute), any other open card closes automatically.
Click the same summary again → it closes, returning to the default fan.

But the <details> element normally hides its content when closed. We want the color cards to always be visible — the open/closed state should only affect the card’s rotation, not its content visibility. This is where the new ::details-content pseudo-element comes in:

details::details-content {
  content-visibility: visible;
  display: contents;
}

The ::details-content pseudo-element targets the content slot of a <details> — everything that isn’t the <summary>. By overriding content-visibility to visible and setting display: contents, the card’s color list is always rendered, regardless of the open state.

Let’s see how it looks when we select a card:

CSS-Only State Detection

When a card is open, we want three things to happen:

The active card rotates to 0° (straight up)
Cards before it collapse toward the start
Cards after it push toward the end

We need boolean-like flags — 0 or 1 — that each card can use in its rotation formula. And we can set them entirely with CSS selectors:

/* Any card is active */
section:has(details[open]) > * { --has-active: 1; }

/* Cards before the active one */
section > :has(~ details[open]) { --is-before: 1; }

/* The active card itself */
details[open] { --is-active: 1; }

/* Cards after the active one */
details[open] ~ * { --is-after: 1; }

Four selectors, four flags. Let’s unpack them:

section:has(details[open]) matches the section when any details child is open, then sets --has-active: 1 on all children.
:has(~ details[open]) matches any element that has a subsequent sibling that is details[open] — i.e., it comes before the active card.
details[open] matches the active card directly.
details[open] ~ * matches all subsequent siblings — the cards after the active one.

The defaults are all 0, set on the base section > * rule. When no card is open, all flags are 0, and the cards fan normally.

The Full Rotation Formula

With the flags in place, the rotation formula handles all states:

section > * {
  rotate: calc(
    (var(--start-degree) + (var(--end-degree) - var(--start-degree))
      * (sibling-index() - 1) / (sibling-count() - 1))
    * (1 - var(--is-active))
    - var(--is-before) * (var(--end-degree) - var(--start-degree))
      * (sibling-index() - 1) / (sibling-count() - 1) * 0.85
    + var(--is-after) * (var(--end-degree) - var(--start-degree))
      * (1 - (sibling-index() - 1) / (sibling-count() - 1)) * 0.85
  );
  transition: rotate .25s linear;
}

So what’s going on?

Line 1–2: The normal fan rotation — the same formula from before.
* (1 - var(--is-active)): Multiplying by 0 when active zeroes out the rotation — the card snaps to 0°.
Before cards: Subtract a value that pushes them further toward the start. The 0.85 factor collapses them tightly but not completely.
After cards: Add a value that pushes them further toward the end, using the inverse position (1 - progress) so they fan toward the opposite edge.

The transition gives it a smooth, satisfying swing.

The New CSS Features — a Recap

This component leans on several CSS features that are all relatively new — so use a modern browser.

Feature	What It Does Here
`progress()`	Returns 0–1 based on container width, driving the fan spread
`sibling-index()`	Each card knows its position — used for rotation and z-index
`sibling-count()`	Total number of cards — used to normalize position to 0–1
`<details name="">`	Exclusive accordion — click to open/close, only one active
`::details-content`	Override content visibility so cards always show their colors

Final Thoughts

I’m constantly blown away by how far CSS has progressed — and is progressing. What I find exciting is how these new features compose. None of them alone are revolutionary — but progress() feeding into sibling-index()-driven rotation, toggled by native <details> state detected via :has() selectors, all without a single line of JavaScript.

Here’s a CodePen demo. I urge you to open it full-screen, resize, click etc.:

Creating a Maintenance Page using a Cloudflare Worker

Mads Stoumann — Fri, 31 Oct 2025 10:52:36 +0000

Last night, an Azure outage took down several sites my company maintains. While the servers were running, a critical downstream service — the headless CMS, Umbraco Cloud — was down. The result? Users saw a blank page. They did what any of us would do: they refreshed, and refreshed again. This flood of requests hammered the services, even though the root cause was elsewhere.

When a site's availability depends on other services, it is vulnerable to their downtime. A simple, robust maintenance page served from the edge is a cost-effective solution to this problem. It provides a clear, calm message to users, letting them know we're aware of the issue and working on it. This — hopefully! — stops the frantic refreshing that can overload the infrastructure.

This article will guide you through creating a maintenance worker using Cloudflare Workers. It's a "break glass in case of emergency" tool that can be activated in seconds when a site is in trouble, ensuring users are never left staring at a blank screen again.

We'll start with ...

The Basics

In your IDE of choice, create a simple HTML page:

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <title>Site Maintenance</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="description" content="Site is under maintenance">
  <meta name="view-transition" content="same-origin">
  <style>
    body {
      background: Canvas;
      color: CanvasText;
      color-scheme: light dark;
      font-family: system-ui;
      line-height: 1.6;
      margin: 0 auto;
      max-inline-size: 1024px;
      padding: 0ch 4ch
    }
    h1 {
      font-size: clamp(2em, 5vw, 4em);
      line-height: 1.1;
    }
    p {
      font-size: clamp(1em, 2.5vw, 1.5em);
    }
  </style>
</head>
<body>
  <h1>We'll Be Right Back</h1>
  <p>The site is currently undergoing maintenance. Please check back later.</p> 
</body>
</html>

Now, in the Cloudflare Dashboard:

Go to Compute & AI > Workers & Pages.
Click on Create application, and just pick the "Hello world" template.
Go to the new application, and replace the script with:

export default {
  async fetch(request, env, ctx) {
    // Get the client's IP address
    const clientIP = request.headers.get('CF-Connecting-IP');

    // Define the rate limit key based on the client's IP
    const rateLimitKey = `ratelimit:${clientIP}`;

    // Check rate limit in KV
    if (env.RATE_LIMIT) {
      // Fetch the current request count for the IP from KV
      const count = await env.RATE_LIMIT.get(rateLimitKey);
      const requestCount = parseInt(count || '0');

      // If rate limit exceeded (60 requests in a minute)
      if (requestCount >= 60) {
        return new Response('Too many requests. Please try again later.', {
          status: 429,
          headers: {
            'Content-Type': 'text/plain',
            'Retry-After': '60',
          },
        });
      }

      // Increment the request count and set expiration to 1 minute
      await env.RATE_LIMIT.put(rateLimitKey, (requestCount + 1).toString(), {
        expirationTtl: 60,
      });
    }

    // Maintenance page HTML
    const maintenanceHTML = `<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <title>Site Maintenance</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="description" content="Site is under maintenance">
  <meta name="view-transition" content="same-origin">
  <style>
    body {
      background: Canvas;
      color: CanvasText;
      color-scheme: light dark;
      font-family: system-ui;
      line-height: 1.6;
      margin: 0 auto;
      max-inline-size: 1024px;
      padding: 0ch 4ch
    }
    h1 {
      font-size: clamp(2em, 5vw, 4em);
      line-height: 1.1;
    }
    p {
      font-size: clamp(1em, 2.5vw, 1.5em);
    }
  </style>
</head>
<body>
  <h1>We'll Be Right Back</h1>
  <p>The site is currently undergoing maintenance. Please check back later.</p> 
</body>
</html>`;

    // Return the maintenance page immediately (no origin fetch)
    return new Response(maintenanceHTML, {
      status: 503,
      headers: {
        'Content-Type': 'text/html;charset=UTF-8',
        'Cache-Control': 'no-store, no-cache, must-revalidate',
        'Retry-After': '3600',
      },
    });
  }
};

Rate Limiting

We'll limit how many requests a single origin can make to our maintenance page.

Go to Storage & Databases, then Workers KV
Click on Create Instance, call the namespace "RATE_LIMIT"
Next, go to Workers & Pages, then click on your maintenance worker.
Click on Bindings, then Add binding
Click on KV namespace, then on Add Binding
Call your variable RATE_LIMIT

Testing

Now, the worker won't run unless we add a route. This is something we only want to do when the site is actually failing.

Go to your domain in Cloudflare, and select Workers Routes.

Click Add route and fill out route — most likely your root domain followed by an asterisk, for example: browser.style/*
Select your maintenance worker from the Worker dropdown
Save, and after a minute or less, go to your domain.
Do you see the maintenance page?

Now, remove the route — and next time a service is down and your site fails, re-enable the route.

Why Not Just Update DNS?

You might wonder why you can't just point your DNS records to a different server with a maintenance page. The primary reason is time. DNS changes can take hours to propagate across the globe, as different DNS servers cache records for varying amounts of time. During a critical outage, you need a solution that works in seconds, not hours.

A Cloudflare Worker, on the other hand, is deployed to Cloudflare's entire global network almost instantly. When you enable the route, the change is reflected worldwide within moments, ensuring all users see the maintenance page immediately. This makes it a far superior solution for rapid response during an incident.

Other Services

While this article focuses on Cloudflare, other services offer similar edge computing capabilities that could be used to deploy a maintenance page. I haven't personally tested these, but they operate on similar principles:

AWS: Lambda@Edge and CloudFront Functions
Fastly: Compute@Edge
Vercel & Netlify: Edge Functions
Akamai: EdgeWorkers

Photo by Panumas Nikhomkhai, Pexels.

Adding Security Headers on Cloudflare

Mads Stoumann — Thu, 30 Oct 2025 07:54:30 +0000

Four years ago, I wrote a posts about Security Headers. In that post, I mentioned how to set up Security Headers on Cloudflare using a Worker.

Since then, a lot has happened. Nowadays, you can add Transform Rules, which will save you Worker Requests. So — to keep this short — this is how I handle Security Headers in Cloudflare now:

Got to Rules > Overview
Click on "Create Rule"
Select Response Header Transform Rule
Fill out Rule name — I simply call it "Security Headers"
Select All incoming requests
Then, from Select item, chose Set static

Next, set Header name and value for the headers you want to add.

In my case, it's:

Header Name	Value
Content-Security-Policy	upgrade-insecure-requests
Pemissions-Policy	geolocation=(), microphone=(self)
Referrer-Policy	strict-origin-when-cross-origin
X-Frame-Options	DENY

A Note on Content Security Policy (CSP)

You might notice my global CSP is quite minimal - it only includes upgrade-insecure-requests. This is intentional. Since my site, browser.style, is a code-sharing platform where different pages have different security requirements, I handle Content Security Policy on a per-page basis using the <meta> tag in the HTML <head>.

Remove Headers

Now, there's also a lot of headers you want to remove. These headers leak information about your infrastructure and internal systems, which isn't necessarily a security vulnerability, but follows the principle of "don't advertise what you don't need to." For these, I've created another Transform Rule. Instead of Set static, select Remove, and repeat for each of these:

Headers to Remove:

via - Reveals intermediary proxy servers and CDN infrastructure in your request chain (e.g., "1.1 varnish"). This tells attackers which proxy software you're using and potential version information.
x-cache-hits - Shows cache statistics, revealing how many times content was served from cache. This is internal performance data that visitors don't need to see.
x-fastly-request-id - Exposes that you're using Fastly CDN and provides an internal request tracking ID. While not directly exploitable, it reveals your infrastructure stack.
x-github-request-id - If you're using GitHub Pages (like I am), this header reveals both that fact and GitHub's internal request tracking ID.
x-origin-cache - Reveals your origin server's caching status (HIT/MISS), which is internal infrastructure information.
x-proxy-cache - Similar to above, shows proxy layer caching behavior (HIT/MISS/BYPASS), revealing details about your caching architecture.
x-timer - Contains internal timing and performance metrics from your CDN, formatted as S{timestamp},{metrics}. This is debugging information that shouldn't be public.

Why remove these? While these headers aren't direct security vulnerabilities, they provide reconnaissance information that attackers can use to fingerprint your infrastructure. Security through obscurity isn't a primary defense, but there's no reason to advertise your complete technology stack to everyone who makes a request.

Give the rule a name, I simply call it "Remove Headers".

Note: Cloudflare may prevent you from removing certain headers like x-cache and x-served-by as they're protected for debugging purposes. That's normal and expected.

Finally, check your headers via curl -I https://your.domain or go to securityheaders.com — Go for A+ ;-)

Weather Widgets

Mads Stoumann — Fri, 24 Oct 2025 11:33:15 +0000

Everyone talks about it — but no one does anything about it. What? The weather, of course! So, at this year's Developer Day at AKQA Denmark, we decided to do something about it.

Developers were asked to use AI to create movie-inspired weather widgets. The results were amazing! A Ghostbuster-themed New York forecast; the weather in Rome set in a Gladiator-inspired arena; a futuristic, gloomy Bladerunner L.A. forecast. The exercise was fun for both backend- and frontend developers alike, using Claude Code, Vercel v0 and more.

Afterwards, I decided to recreate the Apple Weather Widgets using a single baseline weather widget web component. Most of the widgets are using other components I've created recently (and written about here on dev.to), so there wasn't that much to code!

Data

Data is coming from WeatherAPI.com. They have a bunch of APIs, all with a generous free tier. For this project, I used the forecast API:

const weatherAPI =
  https://api.weatherapi.com/v1/
  forecast.json?
  key=${env.WEATHER_API_KEY}&
  ${new URLSearchParams(url.searchParams)};

const weatherResponse =
  await fetch(weatherAPI);

Since I also use data from OpenStreetMap (with local country- and city-names), I created a Cloudflare Worker (using the KV store for API keys), filtering the merged data to only return what I need.

For these demos however, in order not to spend my free API calls at WeatherAPI, we use a static JSON file.

Baseline

The baseline component is mostly handling locales and units. In the weather-data we get both celsius, fahrenheit, miles, kilometers etc., so the component is handling lang and locale for us, so the user — depending on these — see the correct values.

Widgets

But let's take a look at the individual widgets — there are 13 of them! Note, that most of the widgets are using container queries, changing layout depending on their width.

Feels Like

This is one of the simplest widgets. It just shows what the temperature feels like and a short description. It uses a "unit-switcher" — °C | °F — from the baseline component:

Forecast Days

This is the classic forecast widget we know from all other weather widgets. The icons are from cdn.weatherwidgets.com. For the wind direction, I use a simple arrow (svg), and then rotate it based on numbers I get from WeatherAPI:

Forecast Hours

Similar to Forecast Days, this one also use the icons from cdn.weatherwidgets.com and a 24-step hour-by-hour forecast:

Humidity

This one is just as simple as Feels Like:

Moon Phase

This one was easy for me, because I recently made Phases of the Moon in CSS, so it was just a few tweaks and copy/paste:

Precipitation

This one is using my CSS-only charts component, which I wrote about here:

Temperature

Same as the previous one, using column chart:

Pressure

This one is using my CSS Gauges:

Sunphase

This is the only one that actually required coding-from-scratch! I made a dedicated sun-phase component that is imported in the weather widget. It's a ton of complex SVG-based calculations, check the source code if you want to go down a rabbit-hole:

UV

Next up is UV — should you wear sunscreen or not? It's an <output> styled as a slider, with the thumb indicating the current UV index:

Visibility

We're almost there — only a few left! This one is just as simple as Feels Like:

Wind

This one is using a lot of the same techniques as I wrote about in Clocks and Watches in CSS. I made a dedicated nav-compass component, which is imported into the wind widget:

Overview

The final widget, is the one you see on a lot of news-sites and dashboard: The all-in-one city-based overview component:

An even greater overview

I love Apple's Weather Widgets - and on MacOS you get a complete overview including all the widgets. I had to do that one as well — and it's here, you can see the power of container queries, as the widgets "morph" themselves depending on screen width.

Container queries allow each widget to respond to its own width rather than the viewport width. This means a widget can be compact when placed in a narrow column, showing just essential data, then automatically expand to reveal charts, graphs, and additional details when given more space. This self-contained responsiveness is what makes the widgets truly reusable across different layouts.

I urge you to open this one in a new window and resize your browser!

So there you have it: 13 weather widgets and an overview widget.

I don't think I've ever written a post with so many Codepen demos!

To make it even easier for you, I've gathered all the widgets in a collection at Codepen.

Piano Chords in CSS

Mads Stoumann — Fri, 25 Jul 2025 15:05:46 +0000

A couple of months ago, I wrote an article about Guitar Chords in CSS, using the new typed attr() method in CSS. I didn't plan to write a follow-up, but then I saw these beautiful posters and wanted to do something similar. It turned out to be way more complicated than guitar chords!

Markup

The markup consists of a single custom element, with a keys-attribute:

<piano-chord keys="14">
</piano-chord>

keys indicates how many white keys we want to show on our piano. For now, that's all we need; all the heavy lifting is done in CSS.

CSS

The first thing we do in CSS is grab the keys attribute:

piano-chord {
  --_keys: attr(keys type(<number>), 8);
}

Next, we need a private const to indicate how many white keys are in a regular octave:

--_octave-keys: 7;

OK, so now we can already draw the white keys, which will be simple lines at calculated intervals:

background: linear-gradient(90deg, 
var(--piano-chord-black-key) 
var(--piano-chord-key-gap), 
#0000 0 var(--piano-chord-key-gap));

border-block:
  var(--piano-chord-key-gap)
  solid var(--piano-chord-black-key);

I've added a few properties to set the line color and width. We also need to set the background-size:

background-size: calc(100% / var(--_keys) - (var(--piano-chord-key-gap) / var(--_keys))) 100%;

This gives us:

Next, we need to calculate the octave width, as the five black keys in a regular octave will repeat in the next octave, creating the distinct pattern we know from a piano.

For the next calculations, we need a few more private properties:

Octave width

--_ow: calc(100% / (var(--_keys) / var(--_octave-keys)));

Black key ratio

The black key is always 60% of the width of a white key, but because we change the octave width dynamically, we need another calculation to keep this ratio:

--_r: calc(var(--_keys) / var(--_octave-keys) * 0.6);

White key width:

--_wkw: calc(100% / var(--_keys));

Black key width

--_bkw: calc(var(--_wkw) * var(--_r));

Phew! And we're not done yet! You might recall that the black key is 60% of a white key and placed exactly in the middle between two white keys. Half of 60% is 30%, so we need to place the first black key (between C and D on a piano) at 70% of the first white key (C):

--_off1: calc(0.7 / var(--_octave-keys) * 100%);

To skip forward: The next ones are placed at 1.7, 3.7, 4.7, and 5.7. Now, we need to add five extra gradients to our background, one for each black key in an octave.

I'll just show the code for the first here:

linear-gradient(90deg,
  #0000 0 var(--_off1),
  var(--piano-chord-black-key) var(--_off1)
  calc(var(--_off1) + var(--_bkw)),
  #0000 0))

Thankfully, the background-size is simple this time: var(--_ow) 60%

Let's see what we've got:

Cool! Let's change keys to keys="21":

Isn't that cool? A CSS-only, attribute-controlled piano pattern?

Adding chord indicators

Now, let's add chords. For that, we need a new custom element, <piano-key>:

<piano-chord aria-label="C" keys="14">
  <piano-key note="C"></piano-key>
  <piano-key note="E"></piano-key>
  <piano-key note="G"></piano-key>
 </piano-chord>

That wraps up what we need to do in HTML. Let's go back to CSS. First, we set a piano key to be a grid:

piano-key { display: grid; }

Next, we need to set at which column location the key is:

piano-key[note="C"] {  grid-column: 1; }
piano-key[note="D"] {  grid-column: 2; }
/* etc. */

Next, we add a pseudo-element showing a small dot:

piano-key::after {
  background: var(--_bg, #000);
  border-radius: 50%;
  content: "";
  display: block;
  height: 10px;
  margin-block: 8px;
  place-self: end center;
  width: 10px;
}

This renders:

... and that's almost it! We need to handle sharp and flat notes:

piano-key[note*="#"] {
  translate: 50% -40%;
}
piano-key[note*="b"] {
  translate: -50% -40%;
}

And to make them look just as cool as in the posters I mentioned in the beginning, let's wrap the piano in a wrapper with a dusty blue color and a retro SVG filter (see the final demo for the code!):

And that's it! There is, of course, much more to it, but I've covered most of the basics. Here's a CodePen with a bunch of chords:

Charts in CSS

Mads Stoumann — Mon, 09 Jun 2025 10:43:37 +0000

Charts have been done in CSS many times before — there's even a dedicated project. So why this post? Because CSS evolves all the time — new, cool techniques emerge, allowing us to do things simpler, or add even more complicated new features.

Let's dive in!

Markup

Like the CSS Charts-project, we'll use a <table> for our charts. It's accessible, simple and readable:

<table>
  <caption>Monthly Sales Figures ($)</caption>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td data-value="28500">$28,500</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td data-value="22300">$22,300</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td data-value="30100">$30,100</td>
    </tr>
<!-- etc. -->
  </tbody>
</table>

Notice the data-value-attribute? We'll grab that with the new, typed attr() in CSS:

--_v: attr(data-value type(<number>), 0);

Before we continue, let's wrap the <table> in a custom element, allowing us to add a few custom attributes, as well as functioning as a container, we can use to make responsive charts (more on that later!):

<data-chart
  aria-label="Annual Revenue Growth"
  max="50000"
  min="0"
  role="figure">
  <table> ... </table>
</data-chart>

We'll grab the min and max attributes with attr() as well, setting fallbacks to 0 and 100:

  --_min: attr(min type(<number>), 0);
  --_max: attr(max type(<number>), 100);

Next, we'll add a simple grid to the <table>, setting fixed heights for the caption and the label-area, and 1fr for the chart itself:

A bit of math

The first chart we'll build is a Column Chart. For that, we need to calculate the height of each column:

td {
  height: calc(
  ((var(--_v) - var(--_min)) / 
  (var(--_max) - var(--_min))) 
  * 100cqb - var(--data-chart-label-h)
  );
}

So what's going on? We calculate the height based on min and max and the current value, then multiply by 100cqb, which is the height of the "container" — finally, we deduct the height of the labels.

We'll skip the logic for colors (see final demo) — let's just add the <tbody>-part and see what we have so far:

Cool! Now, let's add some grid lines and numeric labels along the y-axis. Because it's a <table>, we can't just add any tag. Since we're not using <thead>, let's use that:

<thead aria-hidden="true">
  <tr>
    <th colspan="2">50000</th>
  </tr>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <th colspan="2">40000</th>
  </tr>
  <!-- etc. -->
</thead>

We need aria-hidden, so it's not picked up by screen readers.

This is styled like this:

Let's see how <thead> and <tbody> look together without Dev Tool's grid inspector:

Nice! Now, how about we create some variants?

Variants

The variants will use the exact same markup, but because of some limitations, we have to add a few extra attributes (for now).

Area Chart

For an Area Chart, we can re-use most of the Column Chart; we just need the value of the previous element for each table cell. Unfortunately, we can't grab the previous value with:

:nth-of-type(calc(sibling-index() - 1))

We could create a bunch of :has(tr:nth-of-type(x))-selectors to grab the value of the previous cell, but that would make the code a bit messy.

So — for now — we set the previous value on each <td> as data-prev:

<tr>
  <th scope="row">January</th>
  <td data-value="28500" data-prev="28500">$28,500</td>
</tr>

Next, we create a simple polygon clip-path that creates a diagonal line from the previous value to the current value:

clip-path: polygon(-1% 100%,
  -1% calc(var(--_py) * 100%),
  101% calc(var(--_y) * 100%),
  101% 100%);

Let's not dive too deep into this, it's simply y-coordinates, calculated from value and previous value.

OK, this is one of the cases where a single color looks better. Let's update --data-chart-bar-bg:

Line Chart

A line chart is almost the same as an area chart. We simply need to cut off the bottom part as well. That distance is the height of the line, which we define in --line-chart-line-h:

clip-path: polygon(-1% calc(var(--_py) * 100% + var(--line-chart-line-h) / 2),
  -1% calc(var(--_py) * 100% - var(--line-chart-line-h) / 2),
  101% calc(var(--_y) * 100% - var(--line-chart-line-h) / 2),
  101% calc(var(--_y) * 100% + var(--line-chart-line-h) / 2));

Now we get:

Bar Chart

The Bar Chart does not need the data-prev-attribute, but it does require a few style-changes. Let's not dive deep into these changes — instead, inspect the styles in the final demo.

Pie Chart

The Pie Chart is a bit different! Here, we need to use conic-gradients, where each gradient needs to start where the previous one ends. Thus, we need an accumulated value (--_av) and a total of all values (--_t):

tbody {
  --_t: attr(data-t type(<number>), 0);
}
td {
  --_av: attr(data-av type(<number>), 0);
  --_start: calc(
    (var(--_av) / var(--_t)) * 
    360deg
  );
  --_end: calc(
    (var(--_v) / var(--_t)) * 
    360deg
  );

  background: conic-gradient(
    from var(--_start),
    var(--_bg) 0 var(--_end),
    #0000 var(--_end) 
    calc(var(--_start) + 360deg)
  );
}

This gives us:

I'd really like it if we could use CSS counters to do the accumulated value and total, but couldn't get it to work (maybe someone like Temani Afif can!?).

Donut Chart

A donut chart is the same as a pie chart, but with a "cut out", for which we use a simple CSS Mask:

tbody {
  mask: radial-gradient(circle, #0000 40%, #000 40%);
}

... and voilà, we get:

Grouped Charts

Grouped charts are simply done with multiple cells per table row:

<tr>
  <th scope="row">January</th>
  <td data-value="12500">12500</td>
  <td data-value="9800">9800</td>
  <td data-value="6200">6200</td>
</tr>

In the styles we then group them — and in some cases, present them like individual "layers". Inspect the styles in the final demo for more details — here's how they look:

Grouped Column Chart

Grouped Area Chart

Grouped Line Chart

Grouped Bar Chart

Grouped Donut Chart

Responsive Charts

One cool thing about controlling charts in CSS, is how easily we can make them responsive. First, let's add two new attributes to our <data-chart>-component:

<data-chart
  items-sm="7"
  items-xs="4"
>

These indicate how many columns we want to show per breakpoint, in this case "sm" (small) and "xs" (x-small). Add as many as you want, and control the breakpoint in a @container-query:

@container (max-width: 400px) {
  &:is([type="area"], [type="column"], [type="line"]) {
    &[items-xs="1"] tbody tr:nth-of-type(n+2),
    &[items-xs="2"] tbody tr:nth-of-type(n+3) {
      display: none;
    }
  }
}

So — in this case — if items-sm="1", hide all items after n+2 etc. Not rocket science, and hopefully something we can make more beautiful in the future.

Let's resize the screen and check it out. First, "sm":

Next, "xs":

Demos

I've created a bunch of demos, all forked from the first, as they all share the same CSS.

The first is shown below. Go to this collection to see them all.

NOTE: As the responsiveness is controlled by the size of the container, you'll most likely see the "sm"-version of the charts. Open CodePen in full screen to play around and resize. Also, note that Safari and Firefox do not support typed attr(), and thus the respnsiveness only works with a JS fallback.

Guitar Chords in CSS

Mads Stoumann — Wed, 07 May 2025 09:38:23 +0000

In my previous article, I looked into the new, improved attr() method in CSS. I was over the moon (pun intended). This time, I’ll continue looking into the attr() method, showing how we can make easily readable components — at least for guitarists — like this:

<fret-board frets="4" strings="6" chord="C Major">
  <string-note string="6" mute></string-note>
  <string-note string="5" fret="3" finger="3"></string-note>
  <string-note string="4" fret="2" finger="2"></string-note>
  <string-note string="3" open></string-note>
  <string-note string="2" fret="1" finger="1"></string-note>
  <string-note string="1" open></string-note>
</fret-board>

... become this — with no JavaScript at all:

Let’s get started!

Basic grid

First, we need a basic grid. How many cells and rows depend on the frets and strings attributes we defined in the HTML — so let’s grab those as <number> and set two custom properties:

--_frets: attr(frets type(<number>), 4);
--_strings: attr(strings type(<number>), 6);

In CSS, we’ll double the number of strings, so we can place notes on the strings — one grid-unit to the left of the string itself. We also want top and bottom rows for chord-name and open/mute indicators, so our grid looks like this:

fret-board {
  grid-template-columns: repeat(calc(var(--_strings) * 2), 1fr);
  grid-template-rows:
    var(--fret-board-top-row-h, 12%)
    repeat(calc(var(--_frets)), 1fr)
    var(--fret-board-bottom-row-h, 15%);
}

We now have:

Frets and strings

The frets and strings are added to a pseudo-element as two linear gradients:

fret-board {
  --fret-board-fret-c: light-dark(#000, #FFF);
  --fret-board-fret-w: clamp(0.0625rem, 0.03125rem + 0.5cqi, 0.5rem);
  --fret-board-string-c: light-dark(#0008, #FFF8);
  --fret-board-string-w: clamp(0.0625rem, 0.03125rem + 0.5cqi, 0.125rem);

  background-image:
    /* Vertical strings */
    linear-gradient(
      90deg, 
      var(--fret-board-string-c) var(--fret-board-string-w), 
      transparent 0 var(--fret-board-string-w)
    ),
    /* Horizontal frets */
    linear-gradient(
      180deg,  
      var(--fret-board-fret-c) var(--fret-board-fret-w), 
      transparent 0 var(--fret-board-fret-w)
    );

  background-position: 
    0 var(--fret-board-fret-w), 
    0 0;

  background-repeat: 
    repeat-x, 
    repeat-y;

  background-size:
    /* Width and height for strings */
    calc(100% / (var(--_strings) - 1) - (var(--fret-board-string-w) / var(--_strings))) 
      calc(100% - (2 * var(--fret-board-fret-w))),
    /* Width and height for frets */
    100% 
      calc(100% / var(--_frets) - (var(--fret-board-fret-w) / var(--_frets)));
}

OK, that was a handful — but we basically created horizontal lines for frets from top to bottom, and vertical lines for the strings running across the board.

Adding notes and fingers

Let’s add some notes — but first, let’s grab those attributes:

--barre: attr(barre type(<number>), 1);
--fret:  attr(fret type(<number>), 0);
--string:  attr(string type(<number>), 0);

We’ll get to --barre soon, but for now, we place the note using this formula:

string-note {
  grid-column: calc((var(--_strings) * 2) - (var(--string) * 2 - 1)) / span calc(var(--barre) * 2);  
  grid-row: calc(var(--fret) + 1);
}

Let’s break this down:

Grid Column Positioning:
- (var(--_strings) * 2) - This starts at the rightmost side of our grid
- (var(--string) * 2 - 1) - This calculates how far to move from the right
- For example, with 6 strings:
  - String 1 (highest) goes at position 12 - (1*2-1) = 11
  - String 6 (lowest) goes at position 12 - (6*2-1) = 1
Span Calculation:
- span calc(var(--barre) * 2) - For regular notes, spans 2 columns
- For barre chords, spans more columns depending on how many strings are covered
Grid Row Formula:
- calc(var(--fret) + 1) - The +1 accounts for the header row
- Open strings (fret = 0) go in row 1, first fret in row 2, etc.

This gets us:

Displaying finger numbers

For good tablature, we need to show which finger to use for each note. We get this from the finger attribute in our HTML and display it using a pseudo-element:

string-note::after {
  color: var(--string-note-c, light-dark(#FFF, #222));
  content: attr(finger);
  font-size: var(--string-note-fs, 7cqi);
  font-weight: var(--string-note-fw, 500);
  text-box: cap alphabetic;
}

Note: text-box: cap alphabetic is a modern CSS feature that trims spacing created by line-height. The light-dark() function automatically adjusts text color for light or dark mode.

Muted and open strings

Guitar chords often involve strings that aren’t pressed down but are either played open or muted (not played):

<string-note string="6" mute></string-note>    <!-- Muted string -->
<string-note string="3" open></string-note>    <!-- Open string -->

For the visual representation of string states:

For muted strings, we create an X symbol using Temani Atif’s cross shape with border-image and a 45° rotation
For open strings, we use a CSS mask with a radial gradient to create a hollow circle effect

string-note[mute] {
  border-image: conic-gradient(var(--fret-board-bg) 0 0) 50%/calc(50% - 0.25cqi);
  rotate: 45deg;
}
string-note[open] {
  border-radius: 50%;
  mask: radial-gradient(circle farthest-side at center, 
    transparent calc(100% - 1cqi), 
    #000 calc(100% - 1cqi + 1px));
}

Barre Chords

A "barre chord" is one where you hold down multiple strings with one finger. Let’s add the barre attribute in HTML:

<string-note string="6" fret="1" barre="6" finger="1"></string-note>

We already covered the calculations above, but here’s how it looks visually:

Fret Numbers

Sometimes, a chord does not start on the first fret, and we need to indicate a fret number. For this, we use an ordered list, <ol>, where we set the value attribute on the first item:

<ol><li value="7"></li></ol>

You can inspect the styles in the final demo, but it looks like this:

Other instruments with frets and strings

Now, the great thing about controlling the CSS from a few attributes is how easy we can make it work for other instruments. Here are some examples:

Ukulele — 4 strings:

Banjo — 5 strings:

Demo

Here’s a demo. Please note that it only works in Chrome (for now):

I hope you enjoyed this article as much as I did writing it — now, I’ll grab my guitar and play some of these chords.

Phases of the Moon in CSS

Mads Stoumann — Wed, 09 Apr 2025 17:54:51 +0000

You might have heard that the humble, old attr() method in CSS just got a big update. It's only in Chrome for now, but I assume the Firefox and Safari teams are working hard on implementing this!

So what's the difference? Well, we now have types and fallbacks, so we can directly update a CSS custom property to a numeric value, with a fallback:

--property: attr(my-attr type<number>, 15);

How cool is that?! It means we can now create really complex CSS-only components. In this tutorial, we'll build a <moon-phase>-component, using only CSS!

Markup

To start with, let's create a simple custom element called <moon-phase>. We give it two attributes: illumination and phase.

Valid phases are:

new moon
waxing crescent
first quarter
waxing gibbous
full moon
waning gibbous
last quarter
waning crescent

Example:

<moon-phase
  illumination="58"
  phase="waxing crescent">
</moon-phase>

And ... that's it (for now). Let's switch to CSS!

CSS

Our custom element needs a few default styles:

moon-phase {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  overflow: clip;
  position: relative;
}

We add an image of the moon to a ::before-pseudo element:

moon-phase::before {
  background: url('moon.png') center / cover no-repeat;  
  content: '';
  inset: 0;
  position: absolute;
}

And we get:

Not very exciting! Let's add a filter to spice it up a bit:

moon-phase::before {
  filter: sepia(1) grayscale(.25);
}

Now we have:

Much better! If you want to play around with CSS filters, I've made a small editor.

Now, we add an ::after pseudo-element:

moon-phase::after {
  background-color: #000;
  border-radius:
    var(--_btlr, 0)
    var(--_btrr, 0)
    var(--_bbrr, 0)
    var(--_bblr, 0);
  content: '';
  height: 100%;
  inset-inline: var(--_ii, auto 0);
  position: absolute;
  width: var(--_w, 0%);
}

Phew, let that sink in! We add four properties to control all border-radius-sides, and one for width. Let's start with that:

moon-phase {
  --_w: calc(100% - 1% * attr(illumination type(<number>), 0%));
}

So what's going on? We read the illumination-attribute as a number, convert it to a percentage by multiplying with 1%, and deduct that from the full width.

So, if illumination is set to 6%, the width will be 94% etc.

Next, we need to adjust the border-radius properties and inset, depending on which phase the moon has:

[phase*="first-quarter"],
[phase*="waxing"] {
  --_ii: 0 auto;
}
[phase*="crescent"],
[phase*="first-quarter"],
[phase*="waxing"] {
  --_bblr: 100%;
  --_btlr: 100%;
}
[phase*="crescent"],
[phase*="last-quarter"],
[phase*="waning"] {
  --_btrr: 100%;
  --_bbrr: 100%;
}
[phase*="gibbous"]::after {
  border-radius: 0;
  width: 100%;
}

Let's see how we're doing, with 6% illumination:

Yay, a thin slice of moon!

Now, for the "gibbous" phases, the shape is inwards, and we cannot use border-radius.

Instead, the ::after-element takes up 100%, and is cut with a mask:

[phase="waxing gibbous"]::after {
  mask: radial-gradient(circle at 100% 50%,
    #0000 calc(100% - var(--_w)),
    #000 calc(100% - var(--_w) + 1px 100%));
}
[phase="waning gibbous"]::after {
  mask: radial-gradient(circle at 0% 50%,
    #0000 calc(100% - var(--_w)),
    #000 calc(100% - var(--_w) + 1px 100%));
}

With 58% illumination we get:

Latitude and time

Now, the moon looks different depending on where on Earth you reside, so let's add two new attributes to our component:

<moon-phase
  illumination="25"
  phase="waxing crescent"
  lat="-33.86"
  hour="22">
</moon-phase>

As before, we read these directly in CSS:

moon-phase {
  --_lat: attr(lat type(<number>), 0);
  --_hour: attr(hour type(<number>), 12);
}

The calculations needed for the rotation angle, are a bit complex:

moon-phase {
  --_l: calc(var(--_lat) * 1.5deg);
  --_a: calc(((var(--_hour) - 12) * 15 * 0.7) * 1deg);
  --_r: calc(var(--_l) + var(--_a));
}

Let's break it down:

Latitude Tilt (--_l)

We multiply the latitude by 1.5deg to simulate how the moon’s tilt changes as you move north or south. This creates:
- Upward tilt in the Southern Hemisphere (negative latitudes).
- Downward tilt in the Northern Hemisphere.
Hour Rotation (--_a)

The hour calculation calc(((var(--_hour) - 12) * 15 * 0.7) * 1deg) works like this:
- (var(--_hour) - 12): Centers rotation at solar noon.
- * 15: Earth rotates 15° per hour (solar motion).
- * 0.7: Dampens the effect to match the moon’s slower apparent speed (~14.5°/hour).
- * 1deg: Converts to degrees.
Combined Rotation (--_r)

Adding --_l and --_a gives a realistic orientation. Examples:
- Equator (lat=0): Vertical terminator (🌒).
- Sydney (lat=-34): Tilted upward (/).
- London (lat=51.5): Tilted downward (\).
- North Pole (lat=90): Horizontal terminator (⊐).

moon-phase {
  rotate: var(--_r, 0deg);  /* Applies the final rotation */
}

Let's see an example: Same day, but different latitudes:

A small disclaimer: At extreme latitudes (>80°), the tilt calculation becomes approximate (the moon doesn’t quite lie flat at the poles with this formula). Also — while I’ve done my best to match real-world behavior — I am by no means an astrophysicist. If you spot errors in the calculations, you know who to blame!

Demo

Here's a Codepen with all the phases of the moon; it's pure CSS, but only working in Chrome for now:

How To Create Gauges in CSS

Mads Stoumann — Sat, 05 Apr 2025 11:21:33 +0000

With modern CSS we can create beautiful gauges with ease. It involves a bunch of techniques, so let's break it down and get started!

First, we create a 3x3 grid. We then add an element that covers the entire grid and is a full circle:

host::part(gauge) {
  background: background: conic-gradient(/* colors */);
  border-radius: 50%;
  grid-area: 1 / 1 / 4 / 4;
}

Next, we add a starting degree for the min position of the gauge, and how many degrees until the max position:

:host {
  --analog-gauge-start-angle: 235deg;
  --analog-gauge-range: 250deg; 
}

Adding these to our gauge-part:

:host::part(gauge) {
  --analog-gauge-bg:
    #009, #69f, #ff0, #f90, #f00 var(--analog-gauge-range),
    #0000 0 var(--analog-gauge-range);

background:
  conic-gradient(from var(--analog-gauge-start-angle, 235deg), 
  var(--analog-gauge-bg));
}

And we get:

What just happened? We changed the starting point of the gradient to where we want to place the min-label. We then added the length of the range using --analog-gauge-range), and after that point, we simply insert a transparent (#0000) color.

Next, let's add a circular mask to cut off the inner part of the circle — we control the width with a custom property, --analog-gauge-bdw:

:host {
  --analog-gauge-mask-circle:
    radial-gradient(circle at 50% 50%,
    #0000 calc(50cqi - var(--analog-gauge-bdw, 10cqi)),
    #000 0);
}

Let's add this to our gauge-part:

:host::part(gauge) {
  mask:
    var(--analog-gauge-mask-circle),
    var(--analog-gauge-mask-segment, none);
  mask-composite:
    var(--analog-gauge-mask-composite, subtract);
}

We'll get back to the segment-mask later! Now we have:

Needle in a haystack

Next up is the gauge needle. It's two grid cells wide:

:host::part(needle) {
  align-self: center;
  grid-area: 2 / 1 / 3 / 3;
  height: var(--analog-gauge-needle-h);
}

Let's add a circular mask to the point in the needle matching the absolute middle of our grid, and adjust the transform-origin of the needle to match that:

:host {
  -_m: calc(100cqi/6);
}
:host::part(needle) {
  mask:
    radial-gradient(circle at calc(100% - var(--_m)) 50%,
    #0000 0 2.5cqi, #FFF 2.5cqi);
  transform-origin: calc(100% - var(--_m)) 50%;
}

And we get:

The --_m variable is 1/6th of the circle width (100cqi), and thus the middle of a grid cell.

Next, let's add a fancy clip-path to make it look like a gauge needle:

:host::part(needle) {
  clip-path: polygon(7.5% 50%,78% 0%,83% 35%,83% 65%,78% 100%);
}

I made a clip-path editor if you want to make your own needle!

Labels

The labels are added in the last row of grid cells, and are again placed using grid-area:

:host::part(label-min) {
  grid-area: 3 / 1 / 4 / 2;
}
:host::part(label-max) {
  grid-area: 3 / 3 / 4 / 4;
}

Value Marks

For the value marks, we add an inner circle. This circle is the full width of the main circle minus the width of the gauge:

:host::part(value-marks) {
  aspect-ratio: 1;
  border-radius: 50%;
  grid-area: 1 / 1 / 4 / 4;
  place-self: center;
  width: calc(100cqi - (2 * 
    var(--analog-gauge-bdw, 10cqi)));
}

The marks themselves are placed like on an analog clock.

Here's what we've got now (I've added a grey background for clarity):

Segments

Remember the empty segment-mask we added earlier? Let's add that so we have an easy way to segmentize the gauge-gradient:

:host {
  --analog-gauge-segments: 10;
  --analog-gauge-mask-segment:
    repeating-conic-gradient(
      from var(--analog-gauge-start-angle, 235deg) at 50% 50%,
      #000 0 var(--analog-gauge-segments-w, 1deg),
      #0000 0 calc((var(--analog-gauge-range, 250deg) /
      var(--analog-gauge-segments, 5))));
}

Phew! That requires some explanation! Let's break it down:

We create a mask at the same angle as the main gradient.
The --analog-gauge-segments variable sets how many segments to divide the gauge into (default is 10). Setting it to 1 gives us a single segment - returning to our original solid gradient.
The repeating pattern creates thin black lines (#000) with width of --analog-gauge-segments-w (default is 1deg).
Between these lines, we have transparent areas (#0000).
The size of each segment is calculated by dividing the total range (--analog-gauge-range) by the number of segments.
When combined with our previous mask using mask-composite: subtract, these black lines create visible separations in our gauge.

And ... we're done! Let's remove the grid-preview and see the final gauge:

Variations

Let's create a bunch of variations by simply modifying the CSS custom properties.

Humidity

.humidity {
  --analog-gauge-bg: #8cf, #6bf, #46e, #24c var(--analog-gauge-range),
    #0000 0 var(--analog-gauge-range);
  --analog-gauge-start-angle: 270deg;
  --analog-gauge-range: 220deg;
  --analog-gauge-segments: 100;
  --analog-gauge-values-bg: linear-gradient(
    210deg,
    light-dark(#abd7f9, #1e1b40),
    light-dark(#fff, #333),
    #0000 85%
  );
}

Here, we change the starting degree, add a gradient background to the value-marks and segmentize it heavily:

Download Speed

Here, we create a variation of the needle, and add a different color after the current value:

.download-speed {
  --analog-gauge-bg: #12c2fc, #6cffd4,
    #78ff80 var(--analog-gauge-value, 0%),
    light-dark(#ddd, #222) 0 var(--analog-gauge-range),
    #0000 0 var(--analog-gauge-range);
  --analog-gauge-needle-bg: light-dark(#445, #ccc);
  --analog-gauge-needle-cp: polygon(
    20% 35%,
    80% 0%,
    83% 35%,
    83% 65%,
    80% 100%,
    20% 65%
  );
  --analog-gauge-segments: 10;
}

UV Index

Next, let's create a gradient with solid stops and a larger gauge-size:

.uv {
  --_dg: calc(var(--analog-gauge-range) / var(--analog-gauge-segments));
  --analog-gauge-bdw: 25cqi;
  --analog-gauge-bg: 
    #55AF33 var(--_dg), 
    #A0C61B 0 calc(2 * var(--_dg)), 
    #F7E98E 0 calc(3 * var(--_dg)), 
    #F6E301 0 calc(4 * var(--_dg)), 
    #FAB60D 0 calc(5 * var(--_dg)), 
    #F88D2F 0 calc(6 * var(--_dg)), 
    #F76D00 0 calc(7 * var(--_dg)), 
    #E53015 0 calc(8 * var(--_dg)), 
    #D90E21 0 calc(9 * var(--_dg)), 
    #D80010 0 calc(10 * var(--_dg)), 
    #8A4F9E 0 var(--analog-gauge-range), 
    #0000 0 var(--analog-gauge-range);
  --analog-gauge-segments: 11;
}

Web Component

I've wrapped all the logic in an easy-to-use web component:

npm i @browser.style/analog-gauge

Basic Usage

Import the component in your JavaScript:

import "@browser.style/analog-gauge";

Add the component to your HTML:

<!-- Basic gauge with value and range -->
<analog-gauge value="50" min="0" max="100"></analog-gauge>

<!-- With label, min and max labels -->
<analog-gauge 
  value="1032" 
  label="hPa" 
  min="950" 
  max="1050" 
  min-label="Low" 
  max-label="High"
  values="11">
</analog-gauge>

Supported Attributes

The component accepts these attributes:

value: Current value (number)
min: Minimum value (default: 0)
max: Maximum value (default: 100)
suffix: Text to append after value (e.g., "%", "°")
label: Main label text
min-label: Label for minimum value
max-label: Label for maximum value
values: Specify value markers in two formats:
- A single number (e.g., "11") to generate evenly spaced markers
- A comma-separated list (e.g., "Low,Mid,High") for custom labels

Demo

You can see a demo of the web component at browser.style/ui/analog-gauge or at CodePen:

Digital Clocks in CSS

Mads Stoumann — Sat, 22 Mar 2025 13:44:35 +0000

In my previous post, I looked into clocks and watches, mimicking classic, analog watches. Now, how about digital watches in CSS? The JavaScript initialization is identical, but that’s where the similarities stop.

Let’s look into how we can animate numbers, automatically switch between “am” and “pm” for 12-hour clocks — and much, much more, using only CSS!

Initial

First, we’ll create a web component to keep all logic wrapped up in a single instance. Feel free to simplify it later!

<digital-clock timezone="+1"></digital-clock>

The inner, shadow-structure is like this:

<span part="label"></span>
<span part="date"></span>
<ol part="time">
  <li part="hours"></li>
  <li part="minutes"></li>
  <li part="seconds"></li>
  <li part="ampm"></li>
</ol>

In the web component, we’ll later add logic not to render specific elements.

For now, let’s focus on the CSS. First, we set 3 custom properties, set with @property, allowing us to animate them:

@property --seconds {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --minutes {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --hours {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

Next, we calculate — in JavaScript, from the current time and timezone — animation delays for these:

#updateClock() {
  const time = new Date();
  const tzOffset = this.#roundTzOffset(this.getAttribute('timezone') || '0');
  const utc = time.getTime() + (time.getTimezoneOffset() * 60000);
  const tzTime = new Date(utc + (3600000 * tzOffset));

  const hours = tzTime.getHours() * 3600;
  const minutes = tzTime.getMinutes() * 60;
  const seconds = tzTime.getSeconds();

  this.style.setProperty('--delay-hours', `-${hours + minutes + seconds}s`);
  this.style.setProperty('--delay-minutes', `-${minutes + seconds}s`);
  this.style.setProperty('--delay-seconds', `-${seconds}s`);
  this.style.setProperty('--number-system', this.getAttribute('number-system') || 'decimal-leading-zero');
}

The animations are simple enough — we go from 0 to 24 hours, and 0 to 60 minutes (and seconds):

@keyframes hours {
  from { --hours: 0; }
  to { --hours: 24; } 
}
@keyframes minutes { 
  from { --minutes: 0; }
  to { --minutes: 60; } 
}
@keyframes seconds { 
  from { --seconds: 0;}
  to { --seconds: 60; }
}

Animating numbers

And now for the tricky part! To animate numbers we’re going to use CSS counters. For hours, minutes and seconds we create a custom counter, and then re-set them with the values we get from the keyframe animations.

For seconds, that’s:

:host::part(seconds) {
  animation: seconds 60s steps(60, end) infinite;
  animation-delay: var(--delay-seconds, 0s);
  counter-reset: seconds var(--seconds);
}

So what’s going on here? Let’s break it down:

The keyframe animation increments the --seconds custom property from 0 to 60 over exactly 60 seconds
The steps(60, end) timing function creates 60 discrete jumps (one per second) rather than a smooth transition
Each time --seconds changes, the counter-reset property immediately updates the CSS counter named "seconds"
The counter is displayed using a pseudo-element:

:host::part(seconds)::after {
  content: counter(seconds, var(--number-system, decimal-leading-zero)) ' ';
}

The animation-delay with a negative value (calculated in JavaScript) synchronizes the animation with the current time, so when the animation shows “42”, it matches the actual 42nd second of the current minute.

This approach ensures the clock runs entirely through the browser’s animation engine with no further JavaScript needed. This eliminates timing drift that can occur with setInterval() or setTimeout() and requires no ongoing DOM manipulation.

The same principle applies to minutes and hours, each with appropriate durations and step counts. For hours, the animation runs for 24 hours (86,400 seconds) with 24 steps; for minutes, it’s 60 minutes (3,600 seconds) with 60 steps.

The counter() method’s second parameter defines the list-style-type or “number system” used to display the values. We default to decimal-leading-zero, but this can be customized through the number-system
attribute.

12-hour clocks: am and pm

To display time in 12-hour-format, we can use a few CSS tricks! To tell the clock we want 12-hour-format, we add the string “12hour” to the time-attribute of the web component.

Next, we use the existing hours counter for the counter-reset, as we only want to update this when the hour change.

To convert 24-hour time to 12-hour format, we use modulus. Modern CSS makes this easy with the mod() function:

:host([time*="12hour"])::part(hours) {
  counter-reset: hours calc(mod(var(--hours) - 1, 12) + 1);
}

We subtract 1 from the hour (shifting 1-24 to 0-23)
Apply modulo 12 (giving us 0-11)
Add 1 back (giving us 1-12)

This ensures that 0 becomes 12, 13 becomes 1, 23 becomes 11, etc.

To show ”am” or ”pm” after the time, we create a custom counter:

@counter-style am-pm {
  system: cyclic;
  symbols: "am" "am" "am" "am" "am" "am" "am" "am" "am" "am" "am" "pm" 
           "pm" "pm" "pm" "pm" "pm" "pm" "pm" "pm" "pm" "pm" "pm" "am";
}

The cyclic system cycles through these values as hours increment, ensuring the correct am/pm indicator is shown for each hour of the day. Note that the 12th string is pm and 24th is am, so 12 (noon) becomes 12pm and 12 (midnight) becomes 12am.

To show it:

:host::part(ampm)::after {
  content: counter(hours, am-pm);
}

Using the DigitalClock Web Component

Wrapping the code in a <digital-clock> web component offers a simple way to add a digital clock to your web projects. It’s customizable through various attributes and CSS custom properties.

Installation & Usage

Install via npm:

npm i @browser.style/digital-clock

Or use directly via CDN:

<script src="https://browser.style/ui/digital-clock/index.js" type="module"></script>

Then, simply add the component to your HTML — here, a basic clock with UTC time:

<digital-clock></digital-clock>

The DigitalClock component offers several attributes for customization:

Available Attributes

timezone: Sets the timezone offset (e.g., "+1", "-4")
label: Adds a text label before the clock (e.g., "Berlin,")
date: Shows the date in different formats: "full", "short", or "narrow"
lang: Sets the language for date formatting (e.g., "en-US", "ja-JP")
time: Configures time display format, options include "12hour" and "short" (no seconds)
number-system: Changes number display format (e.g., "decimal-leading-zero", "arabic-indic", "hiragana")

Usage Examples

Clock with timezone, label and full date:

<digital-clock
  label="Berlin"
  lang="de"
  date="full"
  timezone="+1">
</digital-clock>

12-hour format with short time (no seconds):

<digital-clock
  label="New York"
  lang="en-US"
  date="short"
  timezone="-4"
  time="12hour short">
</digital-clock>

Different number systems

Now the cool thing about CSS list-types are the many different number systems that just work out-of-the-box.

Let's add some color and create some cool examples:

<digital-clock
  label="東京"
  lang="ja-JP"
  number-system="hiragana"
  timezone="+9">
</digital-clock>

<digital-clock
  label="الرياض"
  lang="ar-SA"
  date="full"
  number-system="arabic-indic"
  timezone="+3">
</digital-clock>

Or how about a clock with roman numerals?

<digital-clock
  label="Roma"
  number-system="upper-roman" 
  timezone="+2">
</digital-clock>

Styling

The component exposes several CSS custom properties for styling — I might add more later (let me know if you need more control):

--digital-clock-bg: Background color
--digital-clock-bdrs: Border radius
--digital-clock-gap: Gap between elements
--digital-clock-p: Padding
--digital-clock-fs: Font size
--digital-clock-fw: Font weight
--digital-clock-date-ff/fs/fw: Font properties for the date
--digital-clock-label-ff/fs/fw: Font properties for the label

All the parts (pun intended) of the clock have ::parts, so you can easily style the shadow parts from outside:

.hiragana {
  background: #080808;
  color: #ff1a1a;
  font-family: ui-sans-serif, system-ui;
  width: 300px;
  &::part(time) { 
    text-shadow: 0 0 5px rgba(255, 26, 26, 0.7);
  }
}

Demo

Here’s a CodePen with all the clocks we've been making (and a few extra!):

Clocks and Watches in CSS

Mads Stoumann — Tue, 25 Feb 2025 13:46:44 +0000

A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about them. One of the examples I did, was a CSS-only analog clock:

Since then, CSS has introduced a bunch of new features — one being offset-path, which is perfect for creating indices on a clock (I sound like an horology expert, but I Googled that).

So, without further ado, let's expand my old example with some more, cool features! We'll wrap it within a Web Component for easier customization, but you can stick with CSS-only, if you want.

First, we set up a simple grid, divided into 3 rows:

:host {
  aspect-ratio: 1;
  background: #f2f2f2;
  border-radius: 50%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

The indices are a bunch of <li> elements within a <ul>, using offset-distance / path to place them around the circle:

li {
  display: inline-block;
  list-style: none;
  offset-distance: var(--_d);
  offset-path: content-box;
  width: fit-content;
}

Each <li> has a degree (actually a percentage), defined in the --_d custom property:

<li style="--_d:0%">|</li>

This gets us:

By default, offset-rotate automatically rotates elements to follow the path direction. This behavior is exactly what we need for the indices, so we don't need to set any additional rotation.

Now, for the numerals, we'll also use <li>, but this time within an ordered list, <ol>:

<ol>
  <li style="--_d:300deg">1</li>
</ol>

We'll use cos() and sin() to place the numerals, like in my original example.

li {
  --_r: calc((100% - 15cqi) / 2);
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  aspect-ratio: 1;
  display: grid;
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: 15cqi;
}

And we get:

Now, let's create the markup for the hands and date. The cap will be added as a pseudo-element. I had a hard time trying to wrap my head around what good, semantic markup would be here? I gave up, and just used a bunch of <div>s 😄

<nav part="hands">
  <div part="seconds"></div>
  <div part="minutes"></div>
  <div part="hours"></div>
  <time part="date"></time>
</nav>

We position the <nav> in the middle row of the main grid, and create a 3-column grid:

:host::part(hands) {
  display: grid;
  grid-area: 2 / 1 / 3 / 1;
  grid-template-columns: repeat(3, 1fr);
}

This gives us:

Finally, we place the label at the top center of the last row of the main grid:

Animating the hands

To animate the hands, we just need a single animation:

@keyframes turn {
  to { transform: rotate(1turn); }
}

However, it needs to be called in 3 very distinct ways:

:host::part(hours) {
  animation: turn 43200s linear infinite;
  animation-delay: var(--_dh, 0ms);
}
:host::part(minutes) {
  animation: turn 3600s steps(60, end) infinite;
  animation-delay: var(--_dm, 0ms);
}
:host::part(seconds) {
  animation: turn 60s linear infinite;
  animation-delay: var(--_ds, 0ms);
}

And that's it! ... if you don't mind the clock always starting at noon!

To initialize the clock with the actual time, we need to update the delay properties: --_dh, --_dm and --_ds — and for that, we need a small snippet of JavaScript:

const time = new Date();
const hour = -3600 * (time.getHours() % 12);
const mins = -60 * time.getMinutes();
app.style.setProperty('--_dm', `${mins}s`);
app.style.setProperty('--_dh', `${(hour+mins)}s`);

Variants

Styling variants is dead simple (see the final demo at the end of the article).

How about a SAIKO:

Or a ROBEX (sorry for my unimaginative names!):

... or how about some really colorful examples:

The latter can, of course, be done by adding the labels manually, but if we wrap it in a web component, it becomes a bit easier to maintain:

<analog-clock
  label="မြန်မာ"
  system="mymr"
  timezone="+6.5"
  class="burmese"
  indices
  marker="•">
</analog-clock>

<analog-clock
  label="ประเทศไทย"
  system="thai"
  timezone="+7"
  class="thai"
  indices
  marker="·"
  marker-hour="•">
</analog-clock>

<analog-clock
  label="अरुणाचल"
  system="wcho"
  timezone="+5.5"
  class="indian">
</analog-clock>

Let's look into that.

Web Component

Wrapping the code in a <analog-clock> web component offers a simple way to add an analog clock to your web projects. It's customizable through various attributes and CSS custom properties.

Installation & Usage

Install via npm:

npm i @browser.style/analog-clock

Or use directly via CDN:

<script src="https://browser.style/ui/analog-clock/index.js" type="module"></script>

Then, simply add the component to your HTML:

<analog-clock></analog-clock>

Basic Examples

Here are some common use cases:

<!-- Simple clock for New York time -->
<analog-clock 
  label="New York" 
  timezone="-4">
</analog-clock>

<!-- Clock with date display and minute markers -->
<analog-clock 
  indices 
  date="day month" 
  label="Current Time">
</analog-clock>

<!-- Clock with custom markers and Roman numerals -->
<analog-clock 
  indices="hours"
  system="roman"
  marker="•"
  marker-hour="●"
  label="Roma">
</analog-clock>

Styling Examples

The component can be styled using CSS custom properties:

/* Gold luxury theme */
.luxury {
  --analog-clock-bg: radial-gradient(
    circle at 50% 50%,
    #f4e5c3 50%,
    #e2ca7d 51%,
    #5c4d28 95%
  );
  --analog-clock-c: #2a2317;
  --analog-clock-ff: "Didot", serif;
  --analog-clock-second: #8b0000;
  --analog-clock-cap: #403428;
}

/* Minimalist theme */
.minimal {
  --analog-clock-bg: #fff;
  --analog-clock-c: #333;
  --analog-clock-indices-c: #ddd;
  --analog-clock-second: #ff4444;
  --analog-clock-cap-sz: 4cqi;
}

Number Systems

The system attribute supports various number systems, as we saw in the colorful examples earlier:

<analog-clock system="mymr"></analog-clock>
<analog-clock system="thai"></analog-clock>

Timezone Support

You can display different timezones using the timezone attribute:

<analog-clock label="New York" timezone="-4"></analog-clock>
<analog-clock label="London" timezone="0"></analog-clock>
<analog-clock label="Tokyo" timezone="+9"></analog-clock>
<analog-clock label="Mumbai" timezone="+5.5"></analog-clock>

Attributes

date: Display date. Values: "day", "month", "year" or any combination
indices: Show tick marks. Values: empty (60 marks) or "hours" (12 marks)
label: Text label below the clock
marker: Character used for indices (default: "|")
marker-hour: Character used for hour indices (defaults to marker value)
numerals: Number of numerals to display (1-12, default: 12)
steps: Use stepping animation for seconds hand
system: Number system. Values: "roman", "romanlow", or any valid Intl numberingSystem
timezone: UTC offset in hours (e.g., "-4", "+1", "+5.5")

Demo

Here's a Codepen with all the clocks and watches, we've coded:

Now go teach kids how to read an analog clock!

The Unofficial Dev.To Embed Web Component

Mads Stoumann — Tue, 11 Feb 2025 09:38:37 +0000

The other day, I re-discovered the dev.to API and found out that it can be used without an API key. That’s really great if you want to embed your articles anywhere — maybe on a personal blog — without the hassle of protecting secret keys. You can fetch a list of articles by a given author or a specific article.

So, I coded a web component that lets you grab either a list of articles or a specific one. Let’s start with the “list mode”:

<dev-to
  author="madsstoumann"
  theme="classic"
  itemsperpage="10"
  links="internal">
</dev-to>

Here’s what we get:

Notice the theme and links attributes.

I’ve added 3 themes to choose from (but you can easily add your own):

brutalist
classic
modern

links can be either “internal” or “external”. The first opens the article directly within the web component, while the latter opens the article on dev.to in a new tab.

Now, let’s click on “The Golden Ratio in CSS”.

Very posh, classic theme, isn’t it?!

If you just want to show the article directly, without showing the list first, you can use the component in “article mode”:

<dev-to article="2014104" theme="classic"></dev-to>

Let’s change the theme to “modern”:

... or how about “brutalist”, for that raw, industrial look?

Internationalization

If you want to display dates and UI text in your local language, the component supports i18n this way:

<dev-to 
  author="madsstoumann"
  lang="es"
  i18n='{"es":{"more":"Más...","reactions":"reacciones"}}'>
</dev-to>

Customization

The component exposes several parts that you can style using CSS ::part():

dev-to::part(avatar) {
  border-radius: 50%;
  border: 2px solid currentColor;
}

dev-to::part(cover) {
  filter: sepia(0.3);
}

dev-to::part(more) {
  background: #ff00ff;
}

Shadow DOM or Not?

If you need to style the component directly (without shadowDOM and parts), just add the noshadow attribute:

<dev-to author="madsstoumann" noshadow></dev-to>

Demo

You can try out a demo, using external links, here: browser.style/ui/dev-to

Installation

You can install the component directly from npm:

npm i @browser.style/dev-to

Or import the script directly from browser.style:

<script
  type="module"
  src="https://browser.style/ui/dev-to/index.js">
</script>

Let me know what you think!

Cover Photo by Markus Spiske: https://www.pexels.com/photo/mork-computer-gron-software-225769/

Forem: Mads Stoumann

Re-creating a Pantone Color Deck in CSS

The Markup

Stacking the Deck

The Fan Spread with progress()

Positioning Each Card with sibling-index()

Click-to-Focus with Exclusive <details>

CSS-Only State Detection

The Full Rotation Formula

The New CSS Features — a Recap

Final Thoughts

Creating a Maintenance Page using a Cloudflare Worker

The Basics

Rate Limiting

Testing

Why Not Just Update DNS?

Other Services

Adding Security Headers on Cloudflare

Remove Headers

Weather Widgets

Data

Baseline

Widgets

Feels Like

Forecast Days

Forecast Hours

Humidity

Moon Phase

Precipitation

Temperature

Pressure

Sunphase

UV

Visibility

Wind

Overview

An even greater overview

Piano Chords in CSS

Markup

CSS

Octave width

Black key ratio

White key width:

Black key width

Adding chord indicators

Charts in CSS

Markup

A bit of math

Variants

Area Chart

Line Chart

Bar Chart

Pie Chart

Donut Chart

Grouped Charts

Grouped Column Chart

Grouped Area Chart

Grouped Line Chart

Grouped Bar Chart

Grouped Donut Chart

Responsive Charts

Demos

Guitar Chords in CSS

Basic grid

Frets and strings

Adding notes and fingers

Displaying finger numbers

Muted and open strings

Barre Chords

Fret Numbers

Other instruments with frets and strings

Ukulele — 4 strings:

Banjo — 5 strings:

Demo

Phases of the Moon in CSS

Markup

CSS

Latitude and time

Demo

How To Create Gauges in CSS

The Fan Spread with `progress()`

Positioning Each Card with `sibling-index()`

Click-to-Focus with Exclusive `<details>`