From c407a9f256a19a6f0268c1f17e8bd9cb6a557367 Mon Sep 17 00:00:00 2001 From: prakash meena Date: Thu, 4 Jun 2026 18:06:48 +0530 Subject: [PATCH] feat: add Animated Gradient Text Effect (#1182) --- submissions/examples/text-gradient/README.md | 31 ++++++++++ submissions/examples/text-gradient/demo.html | 32 +++++++++++ submissions/examples/text-gradient/style.css | 60 ++++++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 submissions/examples/text-gradient/README.md create mode 100644 submissions/examples/text-gradient/demo.html create mode 100644 submissions/examples/text-gradient/style.css diff --git a/submissions/examples/text-gradient/README.md b/submissions/examples/text-gradient/README.md new file mode 100644 index 00000000..0dab09fa --- /dev/null +++ b/submissions/examples/text-gradient/README.md @@ -0,0 +1,31 @@ +# Text Gradient Animation Class + +An animated gradient text effect using `background-clip: text` with a smoothly shifting multi-colour gradient. Works on headings, spans, paragraphs — any text element. Customisable via CSS custom properties. + +## Classes + +| Class | Description | +|---|---| +| `ease-text-gradient` | Animated gradient text (4s cycle) | +| `ease-text-gradient-slow` | Slower variant (8s cycle) | +| `ease-text-gradient-fast` | Faster variant (2s cycle) | + +## Custom Properties + +| Property | Default | Description | +|---|---|---| +| `--ease-gradient-from` | `#7c6cff` | Left gradient colour | +| `--ease-gradient-mid` | `#a78bfa` | Middle gradient colour | +| `--ease-gradient-to` | `#3b82f6` | Right gradient colour | + +## Usage + +```html +

Animated Gradient Heading

+

Slower variant

+Custom colours +``` + +## Why it fits EaseMotion CSS + +Pure CSS animated gradient text using `background-clip: text` with `ease-` prefixed keyframes (`ease-kf-text-gradient`), speed modifier classes, customisable gradient colours via CSS custom properties, and respects `prefers-reduced-motion`. diff --git a/submissions/examples/text-gradient/demo.html b/submissions/examples/text-gradient/demo.html new file mode 100644 index 00000000..83a09ca6 --- /dev/null +++ b/submissions/examples/text-gradient/demo.html @@ -0,0 +1,32 @@ + + + + + + Text Gradient — EaseMotion CSS + + + + +

+ Animated Gradient Text +

+ +

+ A slower animated gradient that shifts over 8 seconds — perfect for descriptive text or subtitles. +

+ +

+ Fast Variant (2s) with Custom Colours +

+ +

+ Inline span gradient: green to cyan works on any element. +

+ +

+ Customise via --ease-gradient-from, --ease-gradient-mid, --ease-gradient-to +

+ + + diff --git a/submissions/examples/text-gradient/style.css b/submissions/examples/text-gradient/style.css new file mode 100644 index 00000000..eca1500e --- /dev/null +++ b/submissions/examples/text-gradient/style.css @@ -0,0 +1,60 @@ +/* ============================================================ + EaseMotion CSS — Animated Gradient Text Effect + Issue #1182 + ============================================================ */ + +/* ── Base animation class ─────────────────────────────────── */ + +.ease-text-gradient { + --ease-gradient-from: #7c6cff; + --ease-gradient-mid: #a78bfa; + --ease-gradient-to: #3b82f6; + + background: linear-gradient( + 90deg, + var(--ease-gradient-from), + var(--ease-gradient-mid), + var(--ease-gradient-to), + var(--ease-gradient-from) + ); + background-size: 300% auto; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + animation: ease-kf-text-gradient 4s linear infinite; +} + +/* ── Speed variants ──────────────────────────────────────── */ + +.ease-text-gradient-slow { + animation-duration: 8s; +} + +.ease-text-gradient-fast { + animation-duration: 2s; +} + +/* ── Keyframes ────────────────────────────────────────────── */ + +@keyframes ease-kf-text-gradient { + 0% { background-position: 0% center; } + 100% { background-position: 300% center; } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-text-gradient { + animation: none; + background: linear-gradient( + 90deg, + var(--ease-gradient-from), + var(--ease-gradient-to) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + } +}