A custom utility to add easing to gradients

[hirasso]

I often have the need to overlay images/videos with a subtle gradient to make overlaying UI elements better visible. To prevent ugly "sharp edges" in these gradients, a friend showed me the concept of eased gradients.

In tailwind@4, I was able to solve this in a pretty elegant way using a custom utility:

👉 View the Demo

The utility

@import "tailwindcss";

/* 
 * Add easing to tailwind linear gradient stops 
 * 
 * @see https://larsenwork.com/easing-gradients/
 */
@utility via-ease-in-sine {
  /* fallback for older browsers */
  --tw-gradient-via-stops: 
    var(--tw-gradient-position),
    var(--tw-gradient-from),
    var(--tw-gradient-to);

  /* check for browser @support to suppress tailwindcss' built-in polyfill */
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via-stops:
      var(--tw-gradient-position),
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 0%) 0%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 0.8%) 8.1%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 2.9%) 15.5%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 6.2%) 22.5%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 10.1%) 29%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 14.8%) 35.3%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 20.1%) 41.2%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 26.2%) 47.1%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 32.8%) 52.9%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 40%) 58.8%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 47.8%) 64.7%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 56.6%) 71%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 66.3%) 77.5%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 77.1%) 84.5%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 88.7%) 91.9%,
      color-mix(in oklab, var(--tw-gradient-from), var(--tw-gradient-to) 100%) 100%;
  }
}

Usage

<div class="bg-linear-to-t via-ease-in-sine to-black/50"></div>
<div class="bg-linear-to-t from-red-200 via-ease-in-sine to-red-500"></div>

Tailwind Play Example:

https://play.tailwindcss.com/WlgiByU0ci?file=css

Maybe core?

As tailwindcss is not only an amazing authoring tool but also helps me hugely with discovery of new concepts, it could have helped me if something like this would be part of tailwindcss' core and thus intellisense would suggest it.

[tt-a1i]

This is a great utility! Eased gradients make such a noticeable difference for overlays.

A few suggestions to extend this:

1. Add other easing curves
You could create a family of utilities:

@utility via-ease-out-sine { /* reverse the color-mix percentages */ }
@utility via-ease-in-out-sine { /* combine both */ }
@utility via-ease-in-cubic { /* steeper curve */ }

2. Make it configurable via CSS variable

@utility via-eased {
  --tw-gradient-easing: var(--gradient-easing, ease-in-sine);
  /* dynamically select stops based on --tw-gradient-easing */
}

3. Consider using CSS color-interpolation (future)
Once browser support improves, CSS might get native gradient easing:

background: linear-gradient(in oklab ease-in, red, blue);

For now, your color-mix approach is the most reliable cross-browser solution.

As for core inclusion - this would be a nice addition to Tailwind's gradient utilities. The discovery aspect you mentioned is valuable. Maybe worth opening a feature request?

[hirasso]

Was this AI generated? At first glance it looks so plausible... but then you realize... wait a minute. Nothing here makes complete sense.

[tt-a1i]

Was this AI generated? At first glance it looks so plausible... but then you realize... wait a minute. Nothing here makes complete sense.

lol yeah, had my thoughts but ran it through AI to clean up the formatting - probably should've just kept it casual. your utility is nice though 👍

[hirasso]

The problem is – this creates a lot of friction. Exactly because it looks so plausible. Please always prefer your own thoughts over AI. Perfect english doesn't matter – what matters much more is that you don't gaslight readers. I like this post about the topic: https://chriscoyier.net/2025/12/04/the-jeopardy-phenomenon/

Thank you 🙏

[tt-a1i]

The problem is – this creates a lot of friction. Exactly because it looks so plausible. Please always prefer your own thoughts over AI. Perfect english doesn't matter – what matters much more is that you don't gaslight readers. I like this post about the topic: https://chriscoyier.net/2025/12/04/the-jeopardy-phenomenon/

Thank you 🙏

appreciate the feedback and the link, you're right. thanks for being patient about it 🙏