JSPM

easing-gradients

0.0.1
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 3519
    • Score
      100M100P100Q130103F
    • License MIT

    Adds easing functions to CSS gradients in Tailwind CSS.

    Package Exports

      This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (easing-gradients) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

      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