JSPM

easing-gradients

0.0.3
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 1982
    • Score
      100M100P100Q130105F
    • License MIT

    Tailwind CSS v4 plugin for eased gradient stops

    Package Exports

    • easing-gradients
    • easing-gradients/package.json

    Readme

    easing-gradients

    Tailwind CSS plugin that eases gradient stop distribution to reduce hard edges in fades and overlays.

    easing-gradients.ibelick.com

    Class Effect
    gradient-ease-linear Default linear distribution.
    gradient-ease-in More change toward the end.
    gradient-ease-out More change near the start.
    gradient-ease-in-out Smooth ends, stronger middle.
    gradient-ease-[cubic-bezier(...)] Custom easing curve.

    Install

    pnpm add easing-gradients
    @import "tailwindcss";
@plugin "easing-gradients";

    Usage

    <div
  class="bg-linear-to-b from-black to-transparent gradient-ease-in-out"
></div>

<div
  class="bg-linear-to-r from-blue-500 to-pink-500 gradient-ease-[cubic-bezier(0.3,0,0.2,1)]"
></div>

    Notes