ibelick

ibelick / easing-gradients

Public

Adds easing functions to CSS gradients in Tailwind CSS.

easing-gradients.ibelick.com tailwindcss tailwindcss-plugin
10
2
100% credibility
Found Apr 01, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A Tailwind CSS plugin for creating gradients with eased stop positions to produce smoother visual fades and overlays.

How It Works

1
🌈 Discover smoother gradients

You stumble upon a handy tool that makes color fades in designs look silky smooth without harsh edges at the start or end.

2
👀 Try the live demo

Play with before-and-after examples and an interactive playground to see how easing curves make gradients blend perfectly.

3
📥 Add to your project

Grab the tool with a quick download command so it's ready in your design workspace.

4
✏️ Enable in your styles

Drop one simple line into your main style sheet to turn on the easing magic everywhere.

5
🖌️ Use easy class names

Sprinkle classes like 'gradient-ease-out' onto your elements for instant smooth fades.

✨ Admire your pro fades

Your designs now flow beautifully with natural-looking gradients that impress everyone.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is easing-gradients?

This TypeScript Tailwind CSS plugin adds easing functions to CSS gradients, smoothing out harsh edges in linear fades and overlays. Instead of uniform color stops that create visible transitions, it redistributes them along cubic-bezier curves for natural-looking easing gradients. Tailwind users get preset classes like gradient-ease-out or custom ones matching easing gradients Figma designs.

Why is it gaining traction?

It stands out by integrating directly into Tailwind v4+, requiring just one import and class addition—no custom CSS or calc hacks. Developers love the presets for ease-in/out/in-out plus arbitrary bezier support, delivering pro gradients without trial-and-error positioning. The playground demo shows instant before/after diffs, hooking UI builders fast.

Who should use this?

Tailwind frontend devs crafting hero images, card overlays, or backdrop blurs where linear gradients look amateur. Design system teams syncing easing gradients CSS from Figma prototypes. Anyone tired of manual stop tweaking in responsive UIs.

Verdict

Grab it if Tailwind gradients frustrate you—simple install yields immediate polish. With 10 stars and 1.0% credibility score, it's early-stage (light docs, no tests visible), so test in non-prod first, but the core delivers reliably for its niche.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.