Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.
But what about those shapes having a bit of randomness and many curves?
A lot of names may apply here: random wavy, wiggly, blob, squiggly, ragged, torn, etc. Whatever you call them, we all agree that they are not trivial to create, and they generally belong to the SVG world or are created with tools and used as images. Thanks to the new shape() function, we can now build them using CSS.
I won’t tell you they are easy to create. They are indeed a bit tricky as they require a lot of math and calculation. For this reason, I built a few generators from which you can easily grab the code for the different shapes.
All you have to do is adjust the settings and get the code in no time. As simple as that!
While most of you may be tempted to bookmark the CSS generators and leave this article, I advise you to continue reading. Having the generators is good, but understanding the logic behind them is even better. You may want to manually tweak the code to create more shape variations. We will also see a few interesting examples, so stay until the end!
Notice: If you are new to shape(), I highly recommend reading my four-part series where I explain the basics. It will help you better understand what we are doing here.
While many of the shapes you can create with my generators look different, all of them rely on the same technique: a lot of curve commands. The main trick is to ensure two adjacent curve create a smooth curvature so that the full shape appears as one continuous curve.
Here is a figure of what one curve command can draw. I will be using only one control point:
Now, let’s put two curves next to each other:
The ending point of the first curve, E1, is the starting point of the second curve, S2. That point is placed within the segment formed by both the control points C1 and C2. That’s the criterion for having an overall smooth curve. If we don’t have that, we get a discontinued “bad” curve.
All we have to do is to randomly generate different curves while respecting the previous criterion between two consecutive curves. For the sake of simplicity, I will consider the common point between two curves to be the midpoint of the control points to have less randomness to deal with.
Let’s start with the easiest shape, a random wavy divider. A random curve on one side.
Two variables will control the shape: the granularity and the size. The granularity defines how many curves we will have (it will be an integer). The size defines the space where the curves will be drawn.
The first step is to create N points and evenly place them at the bottom of the element (N is the granularity).
Then, we randomly offset the vertical position of the points using the size variable. Each point will have an offset equal to a random value within the range [0 size].
From there, we take two adjacent points and define their midpoint. We get more points.
Do you start to see the idea? A first set of points is randomly placed while a second set is placed in a way that meets the criterion we defined previously. From there, we draw all the curves, and we get our shape.
The CSS code will look like this:
.shape {
clip-path: shape(from Px1 Py1,
curve to Px2 Py2 with Cx1 Cy1,
curve to Px3 Py3 with Cx2 Cy2,
/* ... */
curve to Pxi Pyi with Cx(i-1) Cy(i-1)
/* ... */
)
}The Ci are the points we randomly place (the control points) and Pi are the midpoints.
From there, we apply the same logic to the different sides to get different variation (bottom, top, bottom-top, all sides, etc.).
As for the blob, the logic is slightly different. Instead of considering a rectangular shape and straight lines, we use a circle.
We evenly place the points around the circle (the one formed by the element if it has border-radius: 50%). Then, we randomly offset them closer to the center. Finally, we add the midpoints and draw the shape.
We can still go fancier and combine the first technique with the circular one to consider a rectangle with rounded corners.
This was the trickiest one to implement as I had to deal with each corner, each side, and work with different granularities. However, the result was quite satisfying as it allows us to create a lot of fancy frames!
Enough theory, let’s see some cool examples and how to simply use the generators to create complex-looking shapes and animations.
We start with a classic layout featuring numerous wavy dividers!
We have four shapes in that demo, and all of them are a simple copy/paste from the wavy divider generator. The header uses the bottom configuration, the footer uses the top configuration and the other elements use the top + bottom configuration.
Let’s get fancy and add some animation.
Each element will have the following code:
@media screen and (prefers-reduced-motion: no-preference) {
.element {
--s1: shape( ... );
--s2: shape( ... );
animation: dance linear 1.6s infinite alternate;
}
@keyframes dance {
0% {clip-path: var(--s1)}
to {clip-path: var(--s2)}
}
}From the generator, you fix the granularity and size, then you generate two different shapes for each one of the variables (--s1 and --s2). The number of curves will be the same, which means the browser can have an interpolation between both shapes, hence we get a nice animation!
And what about introducing scroll-driven animation to have the animation based on the scroll? All you have to do is add animation-timeline: scroll() and it’s done.
Here is the same effect with a sticky header.
For this one, you play with the size. You fix the granularity and the shape ID then you consider a size equal to 0 for the initial shape (a rectangle) and a size different from 0 for the wavy one. Then you let the browser animate between both.
Do you see all the possibilities we have? You can either use the shapes as static decorations or create fancy animations between two (or more) by using the same granularity and adjusting the other settings (size and shape ID).
What cool demo can you create using those tricks? Share it in the comment section.
I will leave you with more examples you can use as inspiration.
A bouncing hover effect with blob shapes:
A squishy button with a hover and click effect:
And a set of fancy CSS loaders you can find at my site.
Do you see all the potential of the new shape() function? We now have the opportunity to create complex-looking shapes without resorting to SVG or images. In addition to that, we can easily have nice transition/animation.
Don’t forget to bookmark my CSS Generators website, from where you can get the code of the shapes we studied and more. I also have the CSS Shape website which I will soon update to utilize the new shape() for most of the shapes and optimize a lot of old code!
What about you? Can you think about a complex shape we can create using shape()? Perhaps you can give me the idea for my next generator!
Making Complex CSS Shapes Using shape() originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
A lot has happened in CSS in the last few years, but there’s nothing we needed less than the upcoming Olfactive API. Now, I know what you’re going to say, expanding the web in a more immersive way is a good thing, and in general I’d agree, but there’s no generalized hardware support for this yet and, in my opinion, it’s too much, too early.
First let’s look at the hardware. Disney World and other theme parks have done some niche so-called 4D movies (which is nonsense since there isn’t a fourth dimensional aspect, and if you consider time the fourth dimension then every movie is fourth dimensional). And a few startups have tried to bring olfactory senses into the modern day, but as of this writing, the hardware isn’t consumer-ready yet. That said, it’s in active development and one startup assured me the technology would be available within the year. (And startups never, ever lie about when their products will launch, right?)
Even if it does come out within the year, would we even want this? I mean Smell-O-Vision totally caught on, right? It’s definitely not considered one of the worst inventions of all time… But, alas, no one cares about the ravings of a mad man, at least, not this mad man, so the API rolls on.
Alright, I’m going to step off my soap box now and try to focus on the technology and how it works.
One of the fights currently going on in the CSS Working Group is whether we should limit smells to those considered pleasing by the perfume industry or whether to open websites to a much wider variety. For instance, while everyone’s olfactory sense is different, the perfume industry has centered on a selection of fragrances that will be pleasing to a wide swath of people.
That said, there are a large number of pleasing fragrances that would not be included in this, such as food-based smells: fresh baked bread etc. Fragrances that the Big Food Lobby is itching to include in their advertisements. As of now the CSS Olfactive API only includes the twelve general categories used by the perfume industry, but just like there are ways to expand the color gamut, the system is built to allow for expanded smells in the future should the number of available fragrance fragments increase.
You don’t have to look far online to find something called the Scent Wheel (alternately called the Fragrance Wheel or the Wheel of Smell-Tune, but that last one is only used by me). There are four larger families of smell:
These four are each subdivided into additional categories though there are overlaps between where one of the larger families begins/ends and the sub families begin/end
fl)sf)fa)sa)am)wa)wo)mw)dw)fr)
ar)ct)ho)gr)fu)It’s from these fifteen fragrance categories that a scent can be made by mixing different amounts using the two letter identifiers. (We’ll talk about this when we discuss the scent() function later on. Note that “Fresh” is the only large family with its own identifier (fr) as the other larger families are duplicated in the sub-families)
First of all, its implemented (wisely) in HTML in much the same way video and audio are with the addition of the <scent> element, and <source> was again used to give the browser different options for wafting the scent toward your sniffer. Three competing file formats are being developed .smll, .arma, and, I kid you not, .smly. One by Google, one by Mozilla, and one, again, not kidding, by Frank’s Fine Fragrances who intends to jump on this “fourth dimension of the web.”
<scent controls autosmell="none">
<source src=“mossywoods.smll” type=“scent/smll”>
<source src=“mossywoods.arma” type=“scent/arma”>
<source src=“mossywoods.smly” type=“scent/smly”>
<a href=“mossywoods.smll”>Smell our Mossy Woods scent</a>
</scent>For accessibility, be sure that you set the autosmell attribute to none. In theory, this isn’t required, but some of the current hardware has a bug that turns on the wafter even if a smell hasn’t been activated.
However, similar to how you can use an image or video in the background of an element, you can also attach a scent profile to an element using the new scent-profile property.
scent-profile can take one of three things.
The keyword none (default):
scent-profile: none;A url() function and the path to a file e.g.:
scent-profile: url(mossywoods.smll);Or a set of aromatic identifiers using the scent() function:
scent-profile: scent(wo, ho, fu);This produces a scent that has notes of woody, water, and fruity which was described to me as “an orchard in the rain” but to me smelled more like “a wooden bowl of watered-down applesauce.” Please take that with a grain of salt, though, as I have been told I have “the nasal palette of a dead fish.”
You can add up to five scent sub-families at once. This is an arbitrary limit, but more than that would likely muddle the scent. Equal amounts of each will be used, but you can use the new whf unit to adjust how much of each is used. 100whf is the most potent an aroma can be. Unlike most units, your implementation, must add up to 100whf or less. If your numbers add up to more than 100, the browser will take the first 100whfs it gets and ignore everything afterward.
scent-profile: scent(wo 20whf, ho 13whf, fu 67whf);…or you could reduce the overall scent by choosing whfs less than 100:
scent-profile: scent(wo 5whf, ho 2whf, fu 14whf);In the future, should other fragrances be allowed, they would simply need to add some new fragrance fragments from which to construct the aromatic air.
One large concern for the working group was that some developer would go crazy placing scent-profiles on every single element, both overwhelming the user and muddling each scent used.
As such it was decided that the browser will only allow one scent-profile to be set per the parent element’s sub tree. This basically means that once you set a scent-profile on a particular element you cannot add a scent profile to any of its descendants, nor can you add a scent profile to any of its siblings. In this way, a scent profile set on a hungry selector (e.g. * or div) will create a fraction of the scent profiles than what might otherwise be created. While there are clearly easy ways to maliciously get around this limitation, it was thought that this should at least prevent a developer from accidentally overwhelming the user.
Since aromas can be overpowering they’ve also added a media-query:
.reeks {
scent-profile: scent(fl, fa, fu);
}
@media (prefers-reduced-pungency: reduce) {
.reeks {
scent-profile: scent(fl 10whf, fa 10whf, fu 10whf);
}
}
@media (prefers-reduced-pungency: remove) {
.reeks {
scent-profile: none;
}
}Surprisingly, despite Chrome Canary literally being named after a bird who would smell gas in the mine, Chrome has not yet begun experimenting with it. The only browser you can test things out on, as of this writing, is the KaiOS Browser.
There you have it. I still don’t think we need this, but with the continuing march of technology it’s probably not something we can stop. So let’s make an agreement between you reading this and me here writing this that you’ll always use your new-found olfactory powers for good… and that you won’t ever say this article stinks.
Learn more about the CSS Olfactive API.
Sniffing Out the CSS Olfactive API originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
April Fools’ Day pranks on the web imply that we’re not trying to fool each other every day in web design anyway. Indeed, one of my favorite comments I received on an article was, “I can’t believe my eyes!” You shouldn’t, since web design relies on fooling the user’s brain by manipulating the way we process visual information via Gestalt laws, which make a website feel real.
April Fools’ Day on the web exemplifies what philosopher Jean Baudrillard called a deterrence machine — a single day on the calendar to celebrate funny fake news is like a theme park designed to make the fake constructs beyond its gates seem real by comparison. And oftentimes, the online pranks on April 1st are indistinguishable from the bizarreness that ensues all year round in the “real” virtual world.
Tech has a history of April Fools’ Day announcements that remind me of what Philip K. Dick called “fake fakes,” emerging every year like real animals surreptitiously replacing the fake ones at Disneyland.
For instance, in 2004, people famously thought Gmail was an April Fools’ joke since it was announced on April 1st.
And on April Fools’ Day in 2013, long before the current generation of AI, Tom Murphy announced an AI that learns to play NES games. It was the real deal, even though he published the research paper and source code on “SIGBOVIK 2013, an April 1st conference that usually publishes fake research. Mine is real!” In Tom’s demo, the AI even devised the strategy of indefinitely pausing Tetris, because in that game on NES, “The only way to win is not to play.”
To give a more personal example of real tech that could be mistaken for an April Fools’ joke, my article on pure CSS collision detection was published on April 1st, 2025, my local time. I was amused when someone commented that using min to detect if a paddle was in range of a ball seemed like a clever hack that “brings up the question: Should game logic be done in CSS?” Of course it shouldn’t! I wasn’t seriously proposing this as the future of web game development.
I replied that if the commenter can take the idea seriously for a minute, it’s a testament to how far CSS has come as a language. It seems even funnier in hindsight, now that the range syntax has come to style queries, meaning we no longer need the min hack. So, maybe everyone should make games in CSS now, if the min hack was the only deal breaker (I kid because I love).
My CSS collision detection demo had a resurgence in popularity recently, when Chris Coyier chose it as a picked Pen. And in that CodePen, a comment again made me laugh: “Can it be multiplayer/online?” Yet, once I stopped laughing, I found myself trying to get a multiplayer mode working. Whether I can or not, I guess the joke’s on me for taking CSS hacking too seriously.
The thing is, much of what we have on the web this year seemed unthinkable last year.
Even the story of the origin of April Fool’s Day sounds like a geeky April Fools’ joke — the leading theory is that the 15th-century equivalent of the Y2K bug had some foolish people incorrectly celebrating the new year on April 1st when the Pope changed the calendars in France from the Julian Calendar to the Gregorian Calendar. And — April Fools’ again! — that’s a legend nobody has been able to prove happened.
But whichever way you feel about the constant disruptions at the heart of the evolution of tech, the disruptions work like pranks by flipping common narratives on their heads in the same way April Fools’ Day does. With that in mind, let’s go through history with an eye for exploring the core of truth inside the jokes of April Fools’ Days passed.
Note: These are the historical pranks I consider the top 10 most noteworthy, rather than the “best.” You’ll see that some of them crossed the line and/or backfired.
Google is famous for its April Fools’ pranks, but they’ve also historically blurred the line between pranks and features. For example, on April 1st 2019, Google introduced a temporary easter egg that transformed Google Calendar into a Space Invaders game. It was such a cool “joke” that nowadays, there’s a Chrome extension that offers a similar experience, turning your Google Calendar into a Breakout game. This extension also offers the option to actually delete items that your ball hit from your calendar at the end of a game.
On April Fools’ Day the same year as the original calendar game, Google also released a feature that allowed Google Maps users to play Snake on maps.
Personal Sidenote: The Google gag inspired an unreleased game I once made with an overworld that’s a gamified calendar, in which your character is trying to avoid an abusive partner by creating excuses not to be at home at the same time as their partner, but that’s a little dark for April Fools’.
In March 2016, a legit — if arguably trivial — eleven-line package was deleted from the npm registry after its creator decided to boycott npm. Turns out that deletion disrupted big companies whose code relied on the left-pad package and this prompted npm to change its policies on which packages can be deleted. I mention this because the humour of the npm packages released as jokes often revolves around poking fun at JavaScript developers’ overuse of dependencies that might not be needed.
Here is a 0kb npm package called vanilla-javascript and a page for the Vanilla JS “framework” that is always 0kb, no matter which features you add to the “bundle.” It lists all the JavaScript frameworks as “plugins.” Some of the dependent packages for vanilla-javascript are quite funny. I like false-js, which ensures true and false are defined properly. The library can be initialized with the settings disableAprilFoolsSideEffects, definitelyDisableAprilFoolsSideEffects, and strictDisableAprilFoolsSideEffectsCheck. If you read the source code, there is a comment saying, “Haha, this code is obfuscated, you’ll never figure out what happens on April Fools.”
There is also this useless library to get the current day. It seems plausible till you look carefully at the website and the description: “This package is ephemeral for April Fools’ Day and will be removed at some point.“ The testimonials from fictional time-traveling characters are also a bit of a giveaway, and you have to love that he updated it every day for months, “because… why not? 🤷♂️”
More “terrible npm packages” for April Fools’ are here.
There’s another category of dependencies that are functional but used for playing April Fools pranks. For instance, aprilFools.css by Wes Bos, which has a comment at the top saying:
/*
I assume no responsibility for angry co-workers or lost productivity
Put these CSS definitons into your co-workers Custom.css file.
They will be applied to every website they visit as well as their developer tools.
*/It does things like use CSS transforms to turn the page upside down.
It strikes me that following the advice in the comments could be a slippery slope to a dark place of workplace bullying, if you were to try it on the wrong coworker, just because they left their computer unlocked. As Chris Coyier pointed out in his post on practical jokes in the browser:
“Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow a family heirloom, or it’s someone who’s been the target of a little too much office prankery to the point it isn’t funny anymore.”
While we’re on the topic of behavior that blurs the line between pranks and workplace bullying, let’s talk about this list of VS Code Extensions that could be used to prank a coworker by causing their code editor UI to behave unexpectedly. Most of the examples sound funny and harmless, like having the IDE intermittently pop up “Dad Jokes” or make funny sounds when typing. Changing the code editor to resemble Slack using a theme is also funny.
Then there’s the last example that made me do a double-take: “Imagine hitting CTRL + S to save your work and then it gets erased!” Yeah, if I were interviewing someone and they mentioned they consider this a funny joke, I would end the interview there. And if anyone ever does this to me, I’m going to HR.
I don’t think of the W3C as having a sense of humor, although I guess getting me excited about HTML imports back in the day, only to discontinue them, was funny in hindsight, if you have a dark sense of humor. Nevertheless, they have posted pranks on their official website, such as restyling to make their page look like a nineties GeoCities website in 2012, or claiming they were reviving the <blink> tag in 2021. There’s a theme of playing on the nostalgia of people my age who want these things to be real.
Sidenote: If you want more Nineties internet experiences, the game Hypnospace Outlaw, set on a retro internet in an alternative 1999, might be up your alley.
Other sites over the years have played a similar joke, which can never fail to charm an old-timer like me who remembers using a web like this at the public library, back when the internet was too expensive for my family to afford at home.
I can’t get enough of these nostalgia trips, so here’s what StackOverflow looked like on April Fools’ Day in 2019. They turned the site “full GeoCities” for fun. Yet everything comes full circle. Now StackOverflow itself seems destined to become as fossilized as GeoCities. Even so, the site is currently attempting a new, real redesign to survive rather than for fun. It’s sobering to consider that maybe the only StackOverflow experience for the next generation of coders will be if ChatGPT gets a StackOverflow restyle on a future April Fools’.
While we’re on the topic of StackOverflow, their Stack Egg prank from 2015 was very cool, but it might win my award for the most over-engineered April Fools’ prank that caused the most serious problems for a website. The premise was another Nineties throwback, this time to the nineties Tamagotchi craze.
The idea, as the creator describes it, was that every site on the Stack Exchange network would have its own “Stack Egg,” representing that site. The goal was to collaboratively keep your metaphorical “site” alive using hypothetical actions named after real actions on the site, such as upvotes to feed the Tamagotchi, and review actions to clean up the poop so the Tamagotchi doesn’t get sick.
It was a nifty concept, although like Google’s April Fools’ games, it’s more neat than laugh-out-loud funny. The part that does make me laugh — I don’t feel too guilty saying it since it was more than a decade ago — was that this is a game about keeping the websites alive, and it inadvertently DDoS-ed its own websites and took down the whole StackExchange network.
And yet, the creators thought the fact that they had the foresight to implement a feature flag that allowed switching it off meant this was a case study in “Operational Excellence in AFPs (April Fools’ Pranks).” Yep, that is an actual article published in a peer-reviewed journal. According to the article, the engineers involved pushed a fix about two hours later to salvage the prank. Code Golf was the winner of the game, in case you’re wondering. According to the same post that announced the winner, “it’s by no means designed to withstand exploits,” and in the two days the feature was live, users discovered a vulnerability that was “close to voting fraud.”
I mentioned the over-engineering, so here’s the part that makes the unintentional punchline even funnier: rather than investing more time guarding against the basics, such as not bringing down the website and considering security, the creator spent time making his own Turing-complete language to handle the LCD-style animations, “because I wanted to! Creating a programming language is fun.”
That’s such a classically geeky way to prioritize!
If Stack Egg created the most issues I’ve ever heard of for a website that created the prank, the most mean-spirited high-profile UI prank — which caused the most problems for users — has to be Google Mic Drop. It dropped (pun intended) on April Fools’ Day 2016, shortly after Google changed its motto from “don’t be evil” to “do the right thing.” Then, they promptly redefined the “right thing” as sabotaging people’s professional reputations with a minion GIF.
Google added a button, nice and close to the regular “Send” button in Gmail, that would send a farewell message to the recipient with an animated Minion dropping a mic then block all emails from that recipient permanently, without prompting the sender to confirm first. Better still, there was a bug that meant the recipient could receive that “GIF of death” and the block, even if the sender managed to press the correct “Send” button in the confusing new UI.
The “hilarity” that ensued included:
Google disabled the feature before the end of April Fools’ Day and issued an apology saying, “It looks like we pranked ourselves this year.” I am not sure how the joke was on Google, so much as the people whose livelihoods and relationships were destroyed.
Remember when I said in the intro that April Fools’ is a distraction from how the joke is on us for believing that the web is what it seems? This Google prank was a reminder that if you believe an advertising company masquerading as a search company has the judgment and ethics to prioritize your interests, when they hoard your personal data and don’t actually care if you can find anything, the real mic drop moment is when you realize that your career and relationships are a data point in Google’s next A/B test.
The funniest part of these April Fools’ UI/UX advice articles is that they’re published by a serious, high-profile consultancy and research group, so the authors work hard to make it obvious these are April Fools’ hoaxes. In each article, “APRIL FOOLS” is in the title in ALL CAPS. And in the first paragraph of the newer hoax articles: “This article was published as an April Fool’s hoax and does not contain real recommendations.” I like to imagine the marketing department thought this was a great idea, and then the authors of the articles tried their best not to make fools of themselves. I noticed the group stopped posting hoax content after 2022.
Sidenote: Educational resources people rely on as a source may not be the best place for prank posts. It reminds me of this peer-reviewed radiology website that on April Fools ‘ Day 2015 posted a hoax X-ray image under the title “Ectopia cordis interna – Tin(Man) syndrome.” Over the years, medical professionals circulated the image unaware it was a hoax, and then, in 2025, six medical journal case studies involving the made-up condition had to be retracted.
Actually, the hoax UI/UX articles are educational, in a UI antipatterns kind of way, such as “Users Love Change: Combatting a UX Myth,” which advocates redesigning the UI as often as possible for the heck of it — except I can’t help but feel JIRA took that advice literally. The “Canine UX” article teaches ideas of user personas and design in a fun way. And “The User Experience of Public Bathrooms” reads as if George Costanza from Seinfeld turned his toilet obsession into a lesson in usability.
Regular readers of CSS-Tricks know that the founder, Chris Coyier, really did decide in 2022 to sell the website to our current stewards, DigitalOcean, so that he could focus on his other projects, such as CodePen. Therefore, the announcement on CodePen that DigitalOcean was also buying that website seemed maddeningly plausible. The level of detail in the hoax announcement increased verisimilitude. For instance, the claim that users could use custom domain names on CodePen for free, as long as the domain was DigitalOcean-hosted. In fact, the only sign it was a prank is that nobody anywhere announced anything like this, unless you count me posting it today on a DigitalOcean-owned website.
Happy April Fools’ Day, everyone!
Front-End Fools: Top 10 April Fools’ UI Pranks of All Time originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Short n’ sweet but ever so neat, this issue covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.
I’m a sucker for colorful logos with about 50% lightness that look awesome on light and dark backgrounds, but not all logos can be like that. Paweł Grzybek showed us how to implement SVG favicons that respect the color scheme, enabling us to display favicons conditionally, but the behavior isn’t consistent across web browsers. It’s an interesting read and there appears to be a campaign to get it working correctly.
And once that happens, here’s a skeuomorphic egg-themed CSS toggle that I found last week. Perfect timing, honestly.
Skeuomorphic Egg Toggle Switch [HTML + CSS + JS] Organic mechanics. Complex box-shadow layering and border-radius manipulation. Tactile feedback through depth. Source code: freefrontend.com/code/skeuomo…
— FreeFrontend (@freefrontend.bsky.social) Mar 26, 2026 at 11:42
[image or embed]
@mixinIt seems that @mixin is taking a step forward. Lea Verou showed us a code snippet and asked what we think of it.
🚨 Want mixins in CSS? Help the CSS WG by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would *you* find least surprising for each of div, div > h2, div + p? Polls: ┣ Github: github.com/LeaVerou/blo… ┗ Mastodon: front-end.social/@leaverou/11…
— Lea Verou, PhD (@lea.verou.me) Mar 26, 2026 at 23:29
[image or embed]
Chris Coyier showed us how to build an image gallery using popovers and something called AIM (Anchor-Interpolated Morphing). I’m only hearing about this now but Adam Argyle talked about AIM back in January. It’s not a new CSS feature but rather the idea of animating something from its starting position to an anchored position. Don’t miss this one.
Also, do you happen to remember Temani’s demo that I shared a few weeks ago? Well, Frontend Masters have published the tutorial for that too!
object-view-box? Me neitherCSS object-view-box allows an element to be zoomed, cropped, or framed in a way that resembles how SVG’s viewBox works, but since Chrome implemented it back in August 2022, there’s been no mention of it. To be honest, I don’t remember it at all, which is a shame because it sounds useful. In a Bluesky thread, Victor Ponamariov explains how object-view-box works. Hopefully, Safari and Firefox implement it soon.
Wouldn't it be great to have native image cropping in CSS? It actually exists: object-view-box.
— Victor (@vpon.me) Mar 24, 2026 at 16:15
[image or embed]
corner-shape for everyday UI elementsMuch has been said about CSS corner-shape, by us and the wider web dev community, despite only being supported by Chrome for now. It’s such a fun feature, offering so many ways to turn boxes into interesting shapes, but Brecht De Ruyte’s corner-shape article focuses more on how we might use corner-shape for everyday UI elements/components.
Ahmad Shadeed’s course — The Layout Maestro — teaches you how to plan and build CSS layouts using modern techniques. Plus, you can learn how to master building the bones of websites using an extended trial of the web development browser, Polypane, which comes free with the course.
Firefox and Safari shipped new features (none baseline, sadly):
popover=hint (also supported by Chrome)@container name { })display: grid-lanes and flow-toleranceAlso, Bramus said that Chrome 148 will have at-rule feature queries, while Chrome 148 and Firefox 150 will allow background-image to support light-dark(). In any case, there’s a new website called BaseWatch that tracks baseline status for all of these CSS features.
Ciao!
What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More 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 33F. Currently, it's 57F and Clear outside. Current wind speeds: 18 from the South Pollen: 0 Sunri...
