What Can We Actually Do With corner-shape?

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when border-radius came onto the scene, I remember everybody thinking that it was the best thing ever. Web designs were very square at the time, so to have border-radius was super cool, and it saved us a lot of time, too.

Chris’ border-radius article from 2009, which at the time of writing is 16 years old (wait, how old am I?!), includes vendor prefixes for older web browsers, including “old Konqueror browsers” (-khtml-border-radius). What a time to be alive!

We’re much less excited about rounded corners nowadays. In fact, sharp corners have made a comeback and are just as popular now, as are squircles (square-ish circles or circle-y squares, take your pick), which is exactly what the corner-shape CSS property enables us to create (in addition to many other cool UI effects that I’ll be walking you through today).

At the time of writing, only Chrome 139 and above supports corner-shape, which must be used with the border-radius property or/and any of the related individual properties (i.e., border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius):

Snipped corners using corner-shape: bevel

These snipped corners are becoming more and more popular as UI designers embrace brutalist aesthetics.

In the example above, it’s as easy as using corner-shape: bevel for the snipped corners effect and then border-bottom-right-radius: 16px for the size.

corner-shape: bevel;
border-bottom-right-radius: 16px;

We can do the same thing and it really works with a cyberpunk aesthetic:

Slanted sections using corner-shape: bevel

Slanted sections is a visual effect that’s even more popular, probably not going anywhere, and again, helps elements to look a lot less like the boxes that they are.

Before we dive in though, it’s important to keep in mind that each border radii has two semi-major axes, a horizontal axis and a vertical axis, with a ‘point’ (to use vector terminology) on each axis. In the example above, both are set to 16px, so both points move along their respective axis by that amount, away from their corner of course, and then the beveled line is drawn between them. In the slanted section example below, however, we need to supply a different point value for each axis, like this:

corner-shape: bevel;
border-bottom-right-radius: 100% 50px;

The first point moves along 100% of the horizontal axis whereas the second point travels 50px of the vertical axis, and then the beveled line is drawn between them, creating the slant that you see above.

By the way, having different values for each axis and border radius is exactly how those cool border radius blobs are made.

Sale tags using corner-shape: round bevel bevel round

You’ve see those sale tags on almost every e-commerce website, either as images or with rounded corners and not the pointy part (other techniques just aren’t worth the trouble). But now we can carve out the proper shape using two different types of corner-shape at once, as well as a whole set of border radius values:

You’ll need corner-shape: round bevel bevel round to start off. The order flows clockwise, starting from the top-left, as follows:

• top-left
• top-right
• bottom-right
• bottom-left

Just like with border-radius. You can omit some values, causing them to be inferred from other values, but both the inference logic and resulting value syntax lack clarity, so I’d just avoid this, especially since we’re about to explore a more complex border-radius:

corner-shape: round bevel bevel round;
border-radius: 16px 48px 48px 16px / 16px 50% 50% 16px;

Left of the forward slash (/) we have the horizontal-axis values of each corner in the order mentioned above, and on the right of the /, the vertical-axis values. So, to be clear, the first and fifth values correspond to the same corner, as do the second and sixth, and so on. You can unpack the shorthand if it’s easier to read:

border-top-left-radius: 16px;
border-top-right-radius: 48px 50%;
border-bottom-right-radius: 48px 50%;
border-bottom-left-radius: 16px;

Up until now, we’ve not really needed to fully understand the border radius syntax. But now that we have corner-shape, it’s definitely worth doing so.

As for the actual values, 16px corresponds to the round corners (this one’s easy to understand) while the 48px 50% values are for the bevel ones, meaning that the corners are ‘drawn’ from 48px horizontally to 50% vertically, which is why and how they head into a point.

Regarding borders — yes, the pointy parts would look nicer if they were slightly rounded, but using borders and outlines on these elements yields unpredictable (but I suspect intended) results due to how browsers draw the corners, which sucks.

Arrow crumbs using the same method

Yep, same thing.

We essentially have a grid row with negative margins, but because we can’t create ‘inset’ arrows or use borders/outlines, we have to create an effect where the fake borders of certain arrows bleed into the next. This is done by nesting the exact same shape in the arrows and then applying something to the effect of padding-right: 3px, where 3px is the value of the would-be border. The code comments below should explain it in more detail (the complete code in the Pen is quite interesting, though):

<nav>
  <ol>
    <li>
      <a>Step 1</a>
    </li>
    <li>
      <a>Step 2</a>
    </li>
    <li>
      <a>Step 3</a>
    </li>
  </ol>
</nav>

ol {
  /* Clip n’ round */
  overflow: clip;
  border-radius: 16px;

  li {
    /* Arrow color */
    background: hsl(270 100% 30%);

    /* Reverses the z-indexes, making the arrows stack */
    /* Result: 2, 1, 0, ... (sibling-x requires Chrome 138+) */
    z-index: calc((sibling-index() * -1) + sibling-count());

    &:not(:last-child) {
      /* Arrow width */
      padding-right: 3px;

      /* Arrow shape */
      corner-shape: bevel;
      border-radius: 0 32px 32px 0 / 0 50% 50% 0;

      /* Pull the next one into this one */
      margin-right: -32px;

    }

    a {
      /* Same shape */
      corner-shape: inherit;
      border-radius: inherit;

      /* Overlay background */
      background: hsl(270 100% 50%);
    }
  }
}

Tooltips using corner-shape: scoop

To create this tooltip style, I’ve used a popover, anchor positioning (to position the caret relative to the tooltip), and corner-shape: scoop. The caret shape is the same as the arrow shape used in the examples above, so feel free to switch scoop to bevel if you prefer the classic triangle tooltips.

A quick walkthrough:

<!-- Connect button to tooltip -->
<button popovertarget="tooltip" id="button">Click for tip</button>

<!-- Anchor tooltip to button -->
<div anchor="button" id="tooltip" popover>Don’t eat yellow snow</div>

#tooltip {
  /* Define anchor */
  anchor-name: --tooltip;

  /* Necessary reset */
  margin: 0;

  /* Center vertically */
  align-self: anchor-center;

  /* Pin to right side + 15 */
  left: calc(anchor(right) + 15px);

  &::after {
    /* Create caret */
    content: "";
    width: 5px;
    height: 10px;
    corner-shape: scoop;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;

    /* Anchor to tooltip */
    position-anchor: --tooltip;

    /* Center vertically */
    align-self: anchor-center;

    /* Pin to left side */
    right: anchor(left);

    /* Popovers have this already (required otherwise) */
    position: fixed;
  }
}

If you’d rather these were hover-triggered, the upcoming Interest Invoker API is what you’re looking for.

Realistic highlighting using corner-shape: squircle bevel

The <mark> element, used for semantic highlighting, defaults with a yellow background, but it doesn’t exactly create a highlighter effect. By adding the following two lines of CSS, which admittedly I discovered by experimenting with completely random values, we can make it look more like a hand-waved highlight:

mark {
  /* A...squevel? */
  corner-shape: squircle bevel;
  border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;

  /* Prevents background-break when wrapping */
  box-decoration-break: clone;
}

We can also use squircle by itself to create those fancy-rounded app icons, or use them on buttons/cards/form controls/etc. if you think the ‘old’ border radius is starting to look a bit stale:

Hand-drawn boxes using the same method

Same thing, only larger. Kind of looks like a hand-drawn box?

Admittedly, this effect doesn’t look as awesome on a larger scale, so if you’re really looking to wow and create something more akin to the Red Dead Redemption aesthetic, this border-image approach would be better.

Clip a background with corner-shape: notch

Notched border radii are ugly and I won’t hear otherwise. I don’t think you’ll want to use them to create a visual effect, but I’ve learned that they’re useful for background clipping if you set the irrelevant axis to 50% and the axis of the side that you want to clip by the amount that you want to clip it by. So if you wanted to clip 30px off the background from the left for example, you’d choose 30px for the horizontal axes and 50% for the vertical axes (for the -left-radius properties only, of course).

corner-shape: notch;
border-top-left-radius: 30px 50%;
border-bottom-left-radius: 30px 50%;

Conclusion

So, corner-shape is actually a helluva lot of fun. It certainly has more uses than I expected, and no doubt with some experimentation you’ll come up with some more. With that in mind, I’ll leave it to you CSS-Tricksters to mess around with (remember though, you’ll need to be using Chrome 139 or higher).

As a parting gift, I leave you with this very cool but completely useless CSS Tie Fighter, made with corner-shape and anchor positioning:

---

What Can We Actually Do With corner-shape? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/8o1QuYy
via IFTTT

Showers Early today!

With a high of F and a low of 61F. Currently, it's 72F and Fair outside.

Current wind speeds: 11 from the Southwest

Pollen: 0

Sunrise: September 11, 2025 at 06:29PM

Sunset: September 12, 2025 at 07:05AM

UV index: 0

Humidity: 46%

via https://ift.tt/Vzg6Lvj

September 12, 2025 at 10:02AM

Compiling Multiple CSS Files into One

Stu Robson is on a mission to “un-Sass” his CSS. I see articles like this pop up every year, and for good reason as CSS has grown so many new legs in recent years. So much so that much of the core features that may have prompted you to reach for Sass in the past are now baked directly into CSS. In fact, we have Jeff Bridgforth on tap with a related article next week.

What I like about Stu’s stab at this is that it’s an ongoing journey rather than a wholesale switch. In fact, he’s out with a new post that pokes specifically at compiling multiple CSS files into a single file. Splitting and organizing styles into separate files is definitely the reason I continue to Sass-ify my work. I love being able to find exactly what I need in a specific file and updating it without having to dig through a monolith of style rules.

But is that a real reason to keep using Sass? I’ve honestly never questioned it, perhaps due to a lizard brain that doesn’t care as long as something continues to work. Oh, I want partialized style files? Always done that with a Sass-y toolchain that hasn’t let me down yet. I know, not the most proactive path.

Stu outlines two ways to compile multiple CSS files when you aren’t relying on Sass for it:

Using PostCSS

Ah, that’s right, we can use PostCSS both with and without Sass. It’s easy to forget that PostCSS and Sass are compatible, but not dependent on one another.

postcss main.css -o output.css

Stu explains why this could be a nice way to toe-dip into un-Sass’ing your work:

PostCSS can seamlessly integrate with popular build tools like webpack, Gulp, and Rollup, allowing you to incorporate CSS compilation into your existing development workflow without potential, additional configuration headaches.

Custom Script for Compilation

The ultimate thing would be eliminating the need for any dependencies. Stu has a custom Node.js script for that:

const fs = require('fs');
const path = require('path');
// Function to read and compile CSS
function compileCSS(inputFile, outputFile) {
    const cssContent = fs.readFileSync(inputFile, 'utf-8');
    const imports = cssContent.match(/@import\s+['"]([^'"]+)['"]/g) || [];
    let compiledCSS = '';
    // Read and append each imported CSS file
    imports.forEach(importStatement => {
        const filePath = importStatement.match(/['"]([^'"]+)['"]/)[1];
        const fullPath = path.resolve(path.dirname(inputFile), filePath);
        compiledCSS += fs.readFileSync(fullPath, 'utf-8') + '\n';
    });
    // Write the compiled CSS to the output file
    fs.writeFileSync(outputFile, compiledCSS.trim());
    console.log(`Compiled CSS written to ${outputFile}`);
}
// Usage
const inputCSSFile = 'index.css'; // Your main CSS file
const outputCSSFile = 'output.css'; // Output file
compileCSS(inputCSSFile, outputCSSFile);

Not 100% free of dependencies, but geez, what a nice way to reduce the overhead and still combine files:

node compile-css.js

This approach is designed for a flat file directory. If you’re like me and prefer nested subfolders:

With the flat file structure and single-level import strategy I employ, nested imports (you can do with postcss-import aren’t necessary for my project setup, simplifying the compilation process while maintaining clean organisation.

Very cool, thanks Stu! And check out the full post because there’s a lot of helpful context behind this, particularly with the custom script.

---

Compiling Multiple CSS Files into One originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/uW29axh
via IFTTT

Partly Cloudy today!

With a high of F and a low of 57F. Currently, it's 68F and Clear outside.

Current wind speeds: 10 from the Southeast

Pollen: 0

Sunrise: September 10, 2025 at 06:28PM

Sunset: September 11, 2025 at 07:07AM

UV index: 0

Humidity: 71%

via https://ift.tt/LbPmCoz

September 11, 2025 at 10:02AM

What’re Your Top 4 CSS Properties?

That’s what Donnie D’Amato asks in a recent post:

You are asked to build a website but you can use only 4 CSS properties, what are those?

This really got the CSS-Tricks team talking. It’s the nerdy version of “if you could only take one album with you on a remote island…” And everyone had a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.

Seems like a pretty straightforward thing to answer, right? But like Donnie says, this takes some strategy. Like, say spacing is high on your priority list. Are you going to use margin? padding? Perhaps you’re leaning into layout and go with gap as part of a flexbox direction… but then you’re committing to display as one of your options. That can quickly eat up your choices!

Our answers are pretty consistent, but converged even more as the discussion wore on and all of us were coming at it with different priorities. I’ll share each person’s “gut” reaction because I like how raw it is. I think you’ll see that there’s always a compromise in the mix, but those compromises really reveal a person’s cards as far as what they think is most important in a situation with overly tight constraints.

---

Juan Diego Rodriguez

Juan and I came out pretty close to the same choices, as we’ll see in a bit:

• font: Typography is a priority and we get a lot of constituent properties with this single shorthand.
• padding: A little padding makes things breath and helps with visual separation.
• background: Another shorthand with lots of styling possibilities in a tiny package.
• color: More visual hierarchy.

But he was debating with himself a bit in the process:

Thinking about switching color with place-items, since it works in block elements. grid would need display, though).

Ryan Trimble

Ryan’s all about that bass structure:

• display: This opens up a world of layouts, but most importantly flex.
• flex-direction: It’s a good idea to consider multi-directional layouts that are easily adjustable with media queries.
• width: This helps constrain elements and text, as well as divide up flex containers.
• margin: This is for spacing that’s bit more versatile than gap, while also allowing us to center elements easily.

And Ryan couldn’t resist reaching a little out of bounds:

For automatic color theme support, and no extra CSS properties required: <meta name="color-scheme" content="dark light"> 

Danny Schwarz

Every team needs a wild card:

On the contrary I think I’d choose font, padding, and color. I wouldn’t even choose a 4th.

• font: This isn’t a big surprise if you’re familiar with Danny’s writing.
• padding: So far, Ryan’s the only one to eschew padding as a core choice!
• color: Too bad this isn’t baked right into font!

I’ll also point out that Danny soon questioned his decision to use all four choices:

I supposed we’d need width to achieve a good line length.

Sunkanmi Fafowora

This is the first list to lean squarely into CSS Grid, allowing the grid shorthand to take up a choice in favor of having a complete layout system:

• font: This is a popular one, right?
• display: Makes grid available
• grid: Required for this display approach
• color: For sprinkling in text color where it might help

I love that Ryan and Sunkanmi are thinking in terms of structure, albeit in very different ways for different reasons!

Zell Liew

In Zell’s own words: “Really really plain and simple site here.”

• font: Content is still the most important piece of information.
• max-width: Ensures type measure is ok.
• margin: Lets me play around with spacing.
• color: This ensures there’s no pure black/white contrast that hurts the eyes. I’d love for background as well, but we only have four choices.

But there’s a little bit of nuance in those choices, as he explains: “But I’d switch up color for background on sites with more complex info that requires proper sectioning. In that case I’d also switch margin with padding.”

Amit Sheen

Getting straight to Amit’s selections:

• font
• color
• background
• color-scheme

The choices are largely driven by wanting to combat default user agent styles:

The thing is, if we only have four properties, we end up relying heavily on the user agents, and the only thing I’d really want to change is the fonts. But while we are at it, let’s add some color control. I’m not sure how much I’d actually use them, but it would be good to have them available.

Geoff Graham

Alright, I’m not quite as exciting now that you’ve seen everyone else’s choices. You’ll see a lot of overlap here:

• font: A shorthand for a whopping SEVEN properties for massaging text styles.
• color: Seems like this would come in super handy for establishing a visual hierarchy and distinguishing one element from another.
• padding: I can’t live without a little breathing room between an element’s content box and its inner edge.
• color-scheme: Good minimal theming that’ll work nicely alongside color and support the light-dark() function.

Clearly, I’m all in on typography. That could be a very good thing or it could really constrain me when it comes to laying things out. I really had to fight the urge to use display because I always find it incredibly useful for laying things out side-by-side that wouldn’t otherwise be possible with block-level elements.

---

Your turn!

Curious minds want to know! Which four properties would you take with you on a desert island?

---

What’re Your Top 4 CSS Properties? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/r9u5piM
via IFTTT

Thunderstorms Early today!

With a high of F and a low of 55F. Currently, it's 64F and Heavy Thunderstorm outside.

Current wind speeds: 9 from the Southeast

Pollen: 0

Sunrise: September 9, 2025 at 06:27PM

Sunset: September 10, 2025 at 07:09AM

UV index: 0

Humidity: 65%

via https://ift.tt/co0xvKS

September 10, 2025 at 10:02AM

Showers Early today!

With a high of F and a low of 56F. Currently, it's 67F and Fair outside.

Current wind speeds: 7 from the Northwest

Pollen: 0

Sunrise: September 8, 2025 at 06:26PM

Sunset: September 9, 2025 at 07:10AM

UV index: 0

Humidity: 40%

via https://ift.tt/CrxKXgm

September 9, 2025 at 10:02AM

Composition in CSS

Tailwind and other utility libraries have been huge proponents of composition. But, to me, their version of composition has always carried a heavy sense of naïveté.

I mean, utility composition is basically adding CSS values to the element, one at a time…

<div class="p-4 border-2 border-blue-500"> ... </div>

If we’re honest for a minute, how is this composition different from adding CSS rules directly into a class?

/* This is composition too! */
.card {
  padding: 1rem; 
  border: 2px solid var(—color-blue-500)
}

That said, I can’t deny the fact that I’ve been thinking a lot more about composition ever since I began using Tailwind. So, here are a couple of notes that I’ve gathered together about CSS composition.

It’s not a new concept

CSS is a composable language by nature. This composition nature is already built into the cascade. Let’s say you’ve decided to style a button with a few properties:

.button {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles... */
}

You can always tag on other classes to modify the button’s appearance:

<button class="button primary"> ... </button>
<button class="button secondary"> ... </button>

.primary { background: orange; }
.secondary { background: pink; }

You can even change the appearance of other elements to a button by adding the .button class:

<a href="#" class="button"> ... </a>

Composition is happening in both cases:

1. We composed .button onto a
2. We composed .red onto .button

So, CSS composition has been in existence since forever. We simply don’t talk about composition as a Big Thing because it’s the nature of the language.

Developers take a pretty narrow view of composition

When developers talk about composition in CSS, they always seem to always restrict the definition of composition to the addition of classes in the HTML.

<div class="one two"> ... </div>

What’s interesting is that few people, if any, speak about composition within CSS files — from the angle of using Sass mixins or advanced Tailwind utilities.

In these cases, we are also composing styles… just not directly in the HTML!

@mixin button () {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles ... */
}

.button {
  @include button; 
}

What is composition?

Composition comes from two possible words:

• Compose: Put together
• Composite: Made up of distinct parts or elements

Both words come from the same Latin root componere, which means to arrange or direct.

In other words… all work is put together in some way, so all work is composed. This makes me wonder why composition is used in such a limited context. 🤔

Moving on…

Composition doesn’t reduce bloat

Class composition reduces CSS bloat only if you’re using utility classes. However, class composition with utility classes is likely to create HTML bloat.

<div class="utility composition">...</div>
<div class="one utility at a time">...</div>
<div class="may create html bloat">...</div>

On the other hand, class composition with selectors might not reduce CSS bloat. But they definitely introduce lesser HTML bloat.

<div class="class composition">...</div>
<div class="card primary">...</div>
<div class="may override properties">...</div>
<div class="less html bloat"> ... </div>

Which is better? ¯\_(ツ)_/¯

HTML bloat and CSS bloat are probably the least of your concerns

We know this:

• HTML can contain a huge amount of things and it doesn’t affect performance much.
• CSS, too.
• 500 lines of CSS is approx 12kb to 15kb (according to Claude).
• An image typically weighs 150kb or perhaps even more.

For most projects, optimizing your use of images is going to net you better weight reduction than agonizing over utility vs. selector composition.

Refactoring your codebase to decrease CSS bloat is not likely to increase performance much. Maybe a 2ms decrease in load times?

But refactoring your codebase to improve developer recognition and make it easier to style? Much more worth it.

So, I’d say:

• HTML and CSS bloat are pretty inconsequential.
• It’s worthwhile to focus on architecture, structure, and clarity instead.

Advanced compositions

If we zoom out, we can see that all styles we write fall into four categories:

1. Layouts: Affects how we place things on the page
2. Typography: Everything font related
3. Theming: Everything color related
4. Effects: Nice good to have stuff like gradients, shadows, etc.

Styles from each of these four categories don’t intersect with each other. For example:

• font-weight belongs exclusively to the Typography category
• colour belongs exclusively to the Theming category

It makes sense to create composable classes per category — when that’s done, you can mix-and-match these classes together to create the final output. Very much like Lego, for the lack of a better example. (Alright, maybe Duplo for the kids?)

So your HTML might end up looking like this, assuming you do class composition for these four categories:

<!-- These are all pseudo classes. Use your imagination for now! -->
<div class="layout-1 layout-2 effects-1">
  <h2 class="typography-1 theming-1"> ... </div>
  <div class="typography-2"> ... </div>
</div>

A real example of this would be the following, if we used classes from Splendid Styles and Splendid Layouts:

<div class="card vertical elevation-3">
  <h2 class="inter-title"> ... </h2>
  <div class="prose"> ... </div>
</div>

I’m writing more about this four-category system and how I’m creating composable classes in my latest work: Unorthodox Tailwind. Give it a check if you’re interested!

Wrapping up

To sum up:

1. CSS is composable by nature.
2. Developers seem to be quite narrow-minded about what composition means in CSS.
3. You can do composition in the HTML or in the CSS.
4. Styles we write can be divided into four categories — layouts, typography, theming, and effects.

And finally: Splendid Styles contains classes that can aid composition in each of these four categories. Splendid Layouts handles the layout portion. And I’m writing more about how I create composable classes in my course Unorthodox Tailwind.

---

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

from CSS-Tricks https://ift.tt/usqcD0F
via IFTTT

Showers Early today!

With a high of F and a low of 57F. Currently, it's 64F and Clear outside.

Current wind speeds: 14 from the South

Pollen: 0

Sunrise: September 7, 2025 at 06:25PM

Sunset: September 8, 2025 at 07:12AM

UV index: 0

Humidity: 77%

via https://ift.tt/IEQkd6K

September 8, 2025 at 10:02AM

Partly Cloudy today!

With a high of F and a low of 51F. Currently, it's 57F and Clear outside.

Current wind speeds: 10 from the South

Pollen: 0

Sunrise: September 6, 2025 at 06:24PM

Sunset: September 7, 2025 at 07:14AM

UV index: 0

Humidity: 86%

via https://ift.tt/8c7xJTl

September 7, 2025 at 10:02AM

Partly Cloudy today!

With a high of F and a low of 44F. Currently, it's 51F and Partly Cloudy outside.

Current wind speeds: 9 from the Southwest

Pollen: 0

Sunrise: September 5, 2025 at 06:23PM

Sunset: September 6, 2025 at 07:15AM

UV index: 0

Humidity: 81%

via https://ift.tt/1NeTs6y

September 6, 2025 at 10:02AM

What You Need to Know About CSS Color Interpolation

Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows us to create unique colors, beautiful palettes, better gradients, and smooth transitions.

I recently wrote a Guide to CSS Color Functions but didn’t have the chance to explain color interpolation in any great depth — which is a shame, since it allows us to create cool demos like this one:

Did you notice how oklch(80% 0.3 340) interpolates to oklch(80% 0.3 60), then to oklch(80% 0.3 180), then to oklch(80% 0.3 270) and back to oklch(80% 0.3 340) using CSS animation? Well, I did! And that’s just a powerful use of interpolation.

Where can we use color interpolation?

Again, color interpolation is all over CSS. These properties and functions support color interpolation either through direct mixing, gradients, or transitions:

• All color gradients, likelinear-gradient(), conic-gradient(), etc.)
• color-mix()
• animation
• transition
• filter
• All functions in the relative color syntax

In gradients and the color-mix() function, we even have a formal syntax for color interpolation:

<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<color-space> = <rectangular-color-space> | <polar-color-space>
  <rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
  <polar-color-space> = hsl | hwb | lch | oklch
  <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue

Yes, that’s a convoluted definition, but if we go ahead and inspect how this syntax works in color-mix(), for example, we would have something like this:

.element{
  color: color-mix(in lch longer hue, red, blue);
}

The CSS color-mix() function provides a way for us to mix different colors in any color space, which is all what color interpolation is about: going from color to another.

Our key focus is the in lab longer hue part, which specifies how color-mix() does the interpolation. This is basically saying, “Hey CSS, interpolate the next colors in the CIELCH color space using a longer hue arc.” Yes, the in lab part means the interpolation is done in CIELCH, one of the many CSS color spaces, but we’ll get to what longer hue exactly means later.

Just remember:

• The in keyword always precedes the color interpolation method.
• The second value is the color space used for mixing.
• The third value is an optional hue interpolation method ending with the hue keyword.

This same syntax appears in all gradient functions, where colors are interpolated gradually to get a smooth gradient. Look at how tweaking the gradient with the color interpolation syntax can give us a completely new gradient:

.element {
  background: linear-gradient(in oklch longer hue 90deg, magenta, cyan);
}

Let’s backtrack a little, though. Interpolation can occur in two major color spaces: rectangular and polar.

Rectangular color spaces

Rectangular color spaces represent colors using Cartesian coordinates on a three-dimensional plane, which you might already know as the X (horizontal), Y (vertical), and Z (depth) axes on a graph.

Rectangular color spaces are like the same sort of graph, but is a map of color points instead. For example, the sRGB color space has three axes, responsible for the amount of a color’s redness, blueness, and greenness.

Polar color spaces

Polar color spaces also represent colors in a three-dimensional plane, just like rectangular color spaces, but it is shaped like a cylinder instead of a rectangular. A color point is represented by three values:

• The height from the point to the center, usually assigned to lightness or brightness.
• The radial distance from the center, usually assigned to chroma or saturation.
• The angle around the center, assigned to the hue.

Credit: Wikipedia

What makes polar color spaces unique is the hue angle. Since it’s an angle, and they are cyclic (like a continuous circle), we have more options for how it can be interpolated.

Hue interpolation

Think of hue interpolation like finding the distance between the two times on a clock.

Let’s assume the clock can go clockwise (forwards) or counterclockwise (backwards) in time.

The minute hand is at 10 minutes (2). If we want to take the shortest distance between 50 minutes (10), then we would make a counterclockwise turn, like going back in time since that is shorter than moving forward in a clockwise direction.

That’s because if you take the longer route, you’ll have to pass through 3, 4, 5, etc. all the way to 10. Taking the shorter counterclockwise) route , you would reach 10 in less time (15 minutes).

Hue interpolation works similarly. It is a CSS algorithm that determines how you want hue colors in polar color spaces to be mixed, and the direction you want to take between two hue points.

There are four types of hue interpolation in CSS. Let’s go over those next.

shorter and longer

The shorter (default value) hue interpolation method simply takes the shorter route, while the longer hue interpolation method takes the longer route when mixing colors between two hue points.

Imagine blending two hue values red (0deg) and blue (240deg). There are two ways to do this:

• Go the longer route (distance of 240deg).
• Go the shorter route (distance of 120deg).

If shorter is used, the browser takes the shorter route (120deg). Otherwise, if longer is used, the browser takes the longer route (240deg).

This offers up a nice and unique blend of colors depending on your preferences. Hue interpolation is useful in creating smooth color transitions and gradients, giving plenty of life to the websites using color.

The shorter or longer hue interpolation, depending on the shortest or longest distances between two hue value points, can either go clockwise or counterclockwise. We can also set this automatically without actually using one of these keywords, which we will look at next.

increasing and decreasing

Sticking with our clock analogy, the increasing hue interpolation method is like moving the minutes hand from 2 to 10, always in a clockwise direction. Even if the final value is 1, it would still go in a clockwise direction, doing almost a full turn.

If, however, the hue interpolation method is set to decreasing, the minutes hand will always go in a counterclockwise direction. As the specification says, “[d]epending on the difference between the two angles, this will either look the same as shorter or as longer.”

If the angle goes from 20deg to 50deg using the increasing hue interpolation value, the value will move clockwise from 20deg to 50deg, displaying the colors in between. However, if the hue interpolation method is set to decreasing, then the algorithm takes the value from 20deg to 50deg in a counterclockwise direction.

Since increasing means the clock’s minute hand is constantly moving forward, this means the value can reach up to 360deg, a full circle. If the angle reaches 360deg, it resets back to 0deg until it reaches the next point. But if decreasing reaches 0deg, then it resets to 360deg, keeping the hue change consistent.

How is this useful?

Yes, all this theory is great: we can use interpolation to get the intermediary color(s) between two colors and make new kinds of colors, but how can we actually use it to create better color experiences in CSS?

Creating gradients

Color interpolation happens frequently in all CSS gradient functions. Take, for example, the conic-gradient() function, which makes it easy to create a smooth transition of colors that rotate around a center point:

background: conic-gradient(
  from 0deg,
  oklch(70% 0.3 0deg),
  oklch(70% 0.3 120deg),
  oklch(70% 0.3 240deg),
  oklch(70% 0.3 360deg)
);

Notice how the hue blends smoothly between each color stop point? It’s beautiful.

Color mixing

Reading about color-mix() in the CSS-Tricks Almanac will give you a basic idea of how this is done, but if you’re like me and want the raw code, here it is:

/* First Box */
background-color: color-mix(in oklch, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);

/* Second Box */
background-color: color-mix(in oklch longer hue, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);

A great advantage of color-mix() is that you gain the ability to mix colors in different color spaces within another color space, thereby producing a unique color. Again, it’s moving from one color into another and the direction we take for mixing colors matters.

Animation

We can animate the transition between colors! So, instead of mixing two specific points, we can watch the color transition between all of the colors in between the two points!

@keyframes bg-shift {
  from {
    background-color: oklch(30% 0.3 20deg); /* dark pink */
  }
  to {
    background-color: oklch(70% 0.3 200deg); /* Cool bluish */
  }
}

References

• Okay, Color Spaces by Eric Portis
• ColorAide Color Interpolation Documentation
• CSS Color Module Level 4
• Interpolating Colors by Chris Brunell

---

What You Need to Know About CSS Color Interpolation originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/M1XSku7
via IFTTT

Rain Early today!

With a high of F and a low of 50F. Currently, it's 68F and Showers in the Vicinity outside.

Current wind speeds: 10 from the Northeast

Pollen: 0

Sunrise: September 4, 2025 at 06:23PM

Sunset: September 5, 2025 at 07:17AM

UV index: 0

Humidity: 45%

via https://ift.tt/TuJ0VHk

September 5, 2025 at 10:02AM

Clear today!

With a high of F and a low of 54F. Currently, it's 61F and Clear outside.

Current wind speeds: 7 from the Southeast

Pollen: 0

Sunrise: September 3, 2025 at 06:22PM

Sunset: September 4, 2025 at 07:18AM

UV index: 0

Humidity: 72%

via https://ift.tt/UvOi4cA

September 4, 2025 at 10:02AM

Partly Cloudy today!

With a high of F and a low of 55F. Currently, it's 63F and Fair outside.

Current wind speeds: 7 from the Southwest

Pollen: 0

Sunrise: September 2, 2025 at 06:21PM

Sunset: September 3, 2025 at 07:20AM

UV index: 0

Humidity: 60%

via https://ift.tt/QhPpjrV

September 3, 2025 at 10:02AM

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

Clear today!

With a high of F and a low of 52F. Currently, it's 59F and Clear outside.

Current wind speeds: 4 from the Northeast

Pollen:

Sunrise: September 1, 2025 at 06:20PM

Sunset: September 2, 2025 at 07:21AM

UV index: 0

Humidity: 77%

via https://ift.tt/6X5vioc

September 2, 2025 at 10:02AM