Quick Start ​

Installation ​

Once you have UnoCSS set up, you can install the `unocss## Explore Features

This preset offers extensive customization options:

  • Utilities - Complete reference of all available utilities
  • Examples - See real-world usage examples
  • Generator - Visually create and experiment with easing gradients
  • How It Works - Learn the principles behind easing gradients
  • Expert Usage - Advanced techniques and customizationasing-gradient` package:
bash
pnpm add -D unocss-preset-easing-gradient unocss
bash
npm install -D unocss-preset-easing-gradient unocss
bash
yarn add -D unocss-preset-easing-gradient unocss
bash
bun add -D unocss-preset-easing-gradient unocss

Configuration ​

Add the preset to your UnoCSS configuration:

ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetEasingGradient } from 'unocss-preset-easing-gradient'

export default defineConfig({
  presets: [
    // other presets...
    presetEasingGradient({
      // optional: add custom easing functions
      customFunctions: {
        myCustomEasing: t => t * t * (3 - 2 * t),
      },
      // optional: change default number of steps (default is 4)
      defaultSteps: 6,
    }),
  ],
})

Basic Usage ​

html
<div class="bg-gradient-fn-ease fn-from-blue-500 fn-to-purple-500 fn-to-r"></div>
<div class="bg-gradient-fn-ease-in-out fn-from-green-400 fn-to-teal-500 fn-to-b"></div>
html
<div class="bg-gradient-fn-sine fn-from-amber-500 fn-to-red-500 fn-to-r"></div>
<div class="bg-gradient-fn-expo-in-out fn-from-indigo-400 fn-to-violet-600 fn-to-br"></div>
<div class="bg-gradient-fn-bounce-out fn-from-emerald-400 fn-to-cyan-500 fn-to-r"></div>
html
<div class="bg-gradient-fn-ease/8 fn-from-rose-400 fn-to-pink-600 fn-to-r"></div>
<div class="bg-gradient-fn-cubic-in/16 fn-from-sky-400 fn-to-blue-600 fn-to-b"></div>
html
<div class="bg-gradient-fn-bezier-[0.25,0.1,0.25,1] fn-from-lime-400 fn-to-green-600 fn-to-r"></div>
<div class="bg-gradient-fn-bezier-[0.83,0,0.17,1] fn-from-amber-400 fn-to-orange-600 fn-to-l"></div>
html
<div class="bg-gradient-fn-ease fn-from-fuchsia-400 fn-to-purple-600 fn-radial"></div>
<div class="bg-gradient-fn-ease-in fn-from-blue-400 fn-to-cyan-600 fn-circle-at-top-right"></div>
<div class="bg-gradient-fn-ease-out fn-from-amber-400 fn-to-red-600 fn-conic"></div>
html
<div class="bg-gradient-fn-ease fn-from-indigo-400 fn-to-violet-600 fn-to-r fn-color-space-oklch"></div>
<div class="bg-gradient-fn-ease fn-from-indigo-400 fn-to-violet-600 fn-to-r fn-color-space-srgb"></div>

Explore Features ​

This preset offers extensive customization options: