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.
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.
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.
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.
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:
clamp() function limits the result between -1 and 1.1 means upward movement, -1 is downward, and 0 means stationary.It’s a lightweight way to convey directional logic using math and visual cues with no scripting.
--delayCSS 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.
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.
aria-liveAccessibility 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.
This elevator is more than a toy. It’s a blueprint. Consider these real-world uses:
These techniques are especially useful in static apps or restricted scripting environments (e.g., emails, certain content management system widgets).
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.
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:
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.
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.
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;
}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. 😅
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:
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.
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.
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.
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.
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.
Once we start thinking creatively about images in long-form content, one question usually comes to mind: how wide should those images be?
Should they sit flush with the edges of the text column?
img {
inline-size: 100%;
max-inline-size: 100%;
}
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.
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.
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.
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.
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.
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;
}
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.
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.
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.
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>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);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.
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);
}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.
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.
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.
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%));
}
}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;
}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:
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.
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.
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);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.
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.
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.
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.
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 */
}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:
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: Interactivity and Dynamicism originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
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.
⚠️ 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.
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.
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:
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:
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:
In the others, I am adding a bit of rotation. The first one is applied to the y-axis for the sloping effect:
This next example applies rotation on the x-axis for the tilting:
And, finally, we can apply it on the z-axis for a rotating example:
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:
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:
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:
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.
Of course, you can animate these pseudo elements too. So how about a 3D “Loading” text with a built-in spinner?
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);
}
}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:
And, yes, you can absolutely use an image too:
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:
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:
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:
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.
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.
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: Motion and Variations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
With a high of F and a low of 50F. Currently, it's 55F and Clear outside. Current wind speeds: 6 from the Southeast Pollen: 0 Su...
