20 CSS Text Gradient Effects
13 / 20

All 20 in 20 CSS Text Gradient Effects

  1. 01CSS Text Gradient Landing Page Hero Title
  2. 02Web3 Glowing Gradient Text CSS
  3. 03CSS Text Gradient Corporate Logo Text
  4. 04Minimalist Bold Text Gradient CSS
  5. 05CSS Hover Transition Text Gradient Effect
  6. 06Gradient Text Button Link CSS
  7. 07CSS Text Gradient on Active Navigation Link
  8. 08Animated Moving Text Gradient Background CSS
  9. 09Cyberpunk Neon Text Gradient CSS
  10. 10Metallic Gold Text Gradient Effect CSS
  11. 11Glassmorphism Text Gradient Contrast
  12. 12Pastel Soft Color Text Gradient CSS
  13. 13Vertical Linear Gradient Text CSS
  14. 14Radial Gradient Text Effect CSS
  15. 15Multi Color Rainbow Text Gradient CSS
  16. 16CSS Text Gradient with Text Stroke Outline
  17. 17CSS Text Gradient Fallback for Older Browsers
  18. 18Tailwind CSS Text Gradient Utility Classes
  19. 19CSS Text Gradient on Multiline Paragraph
  20. 20Dark Mode vs Light Mode CSS Text Gradient
Pure CSSMIT licensed

Vertical Linear Gradient Text CSS

A split-layout demo contrasting horizontal and vertical gradient directions, including writing-mode: vertical-rl sidebar labels.

Live Demo
Plain CSSTailwind v4
Try it

Build effects like this from scratch: gradients, clip-paths, masks & blend modes

ZTM · Advanced CSS for Web Design · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="tg-13">
  <div class="tg-13__layout">
    <aside class="tg-13__sidebar">
      <h2 class="tg-13__section-word tg-13__v1">Build</h2>
      <h2 class="tg-13__section-word tg-13__v2">Ship</h2>
      <h2 class="tg-13__section-word tg-13__v3">Grow</h2>
    </aside>
    <main class="tg-13__body">
      <p class="tg-13__kicker">VERTICAL GRADIENT TEXT</p>
      <p class="tg-13__explain">A top-to-bottom <code>linear-gradient</code> fades from a vivid top colour to a lighter or contrasting shade at the bottom, reinforcing visual hierarchy — brighter at the top catches the eye, the fade draws it downward.</p>
      <div class="tg-13__demo-block">
        <h1 class="tg-13__hero-word tg-13__fade-down">Framework</h1>
        <h1 class="tg-13__hero-word tg-13__fade-up">Platform</h1>
      </div>
    </main>
  </div>
</div>
.tg-13,
.tg-13 *,
.tg-13 *::before,
.tg-13 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tg-13 ::selection {
  background: #1d4ed8;
  color: #e0f2fe;
}

.tg-13 {
  --top-a: #1d4ed8;
  --bot-a: #60a5fa;
  --top-b: #9333ea;
  --bot-b: #f472b6;
  --top-c: #0284c7;
  --bot-c: #38bdf8;
  --top-h: #f59e0b;
  --bot-h: rgba(245,158,11,.2);
  --top-p: #7c3aed;
  --bot-p: rgba(124,58,237,.25);
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
}

.tg-13__layout {
  display: flex;
  min-height: 100vh;
}

.tg-13__sidebar {
  background: #0f172a;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 24px 0;
}
/* Vertical gradients on sidebar words */

.tg-13__section-word {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* background-image (not shorthand) — shorthand resets background-clip
   to border-box and the text clipping above silently fails. */

.tg-13__v1 {
  background-image: linear-gradient(180deg, var(--top-a), var(--bot-a));
}

.tg-13__v2 {
  background-image: linear-gradient(180deg, var(--top-b), var(--bot-b));
}

.tg-13__v3 {
  background-image: linear-gradient(180deg, var(--top-c), var(--bot-c));
}

.tg-13__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.tg-13__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 14px;
}

.tg-13__explain {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 28px;
}

.tg-13__explain code {
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .8em;
  color: var(--top-b);
}

.tg-13__demo-block {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/*
  Vertical (top→bottom) gradients: use `to bottom` direction.
  The lighter/transparent end at the bottom simulates a gentle fade-out.
*/

.tg-13__hero-word {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* inline-block + padding ensure the gradient clips to the glyph
       shape (block-level <h1> with background-image would otherwise
       paint the gradient on the full row width even when text content
       is narrow). */
  display: inline-block;
  padding: 0 .05em .1em;
}

.tg-13__fade-down {
  background-image: linear-gradient(to bottom, var(--top-h) 0%, var(--bot-h) 100%);
}

.tg-13__fade-up {
  background-image: linear-gradient(to top, var(--top-p) 0%, var(--bot-p) 100%);
}

@media (prefers-reduced-motion: reduce) {
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Text Gradient Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Vertical Linear Gradient Text CSS
Source: https://codefronts.com/motion/css-text-gradient-effect/vertical-linear-gradient-text-css/

A split-layout demo contrasting horizontal and vertical gradient directions, including writing-mode: vertical-rl sidebar labels.
## HTML
```html
<div class="tg-13">
  <div class="tg-13__layout">
    <aside class="tg-13__sidebar">
      <h2 class="tg-13__section-word tg-13__v1">Build</h2>
      <h2 class="tg-13__section-word tg-13__v2">Ship</h2>
      <h2 class="tg-13__section-word tg-13__v3">Grow</h2>
    </aside>
    <main class="tg-13__body">
      <p class="tg-13__kicker">VERTICAL GRADIENT TEXT</p>
      <p class="tg-13__explain">A top-to-bottom <code>linear-gradient</code> fades from a vivid top colour to a lighter or contrasting shade at the bottom, reinforcing visual hierarchy — brighter at the top catches the eye, the fade draws it downward.</p>
      <div class="tg-13__demo-block">
        <h1 class="tg-13__hero-word tg-13__fade-down">Framework</h1>
        <h1 class="tg-13__hero-word tg-13__fade-up">Platform</h1>
      </div>
    </main>
  </div>
</div>
```
## CSS
```css
.tg-13,
.tg-13 *,
.tg-13 *::before,
.tg-13 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tg-13 ::selection {
  background: #1d4ed8;
  color: #e0f2fe;
}

.tg-13 {
  --top-a: #1d4ed8;
  --bot-a: #60a5fa;
  --top-b: #9333ea;
  --bot-b: #f472b6;
  --top-c: #0284c7;
  --bot-c: #38bdf8;
  --top-h: #f59e0b;
  --bot-h: rgba(245,158,11,.2);
  --top-p: #7c3aed;
  --bot-p: rgba(124,58,237,.25);
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
}

.tg-13__layout {
  display: flex;
  min-height: 100vh;
}

.tg-13__sidebar {
  background: #0f172a;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 24px 0;
}
/* Vertical gradients on sidebar words */

.tg-13__section-word {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* background-image (not shorthand) — shorthand resets background-clip
   to border-box and the text clipping above silently fails. */

.tg-13__v1 {
  background-image: linear-gradient(180deg, var(--top-a), var(--bot-a));
}

.tg-13__v2 {
  background-image: linear-gradient(180deg, var(--top-b), var(--bot-b));
}

.tg-13__v3 {
  background-image: linear-gradient(180deg, var(--top-c), var(--bot-c));
}

.tg-13__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.tg-13__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 14px;
}

.tg-13__explain {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 28px;
}

.tg-13__explain code {
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .8em;
  color: var(--top-b);
}

.tg-13__demo-block {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/*
  Vertical (top→bottom) gradients: use `to bottom` direction.
  The lighter/transparent end at the bottom simulates a gentle fade-out.
*/

.tg-13__hero-word {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* inline-block + padding ensure the gradient clips to the glyph
       shape (block-level <h1> with background-image would otherwise
       paint the gradient on the full row width even when text content
       is narrow). */
  display: inline-block;
  padding: 0 .05em .1em;
}

.tg-13__fade-down {
  background-image: linear-gradient(to bottom, var(--top-h) 0%, var(--bot-h) 100%);
}

.tg-13__fade-up {
  background-image: linear-gradient(to top, var(--top-p) 0%, var(--bot-p) 100%);
}

@media (prefers-reduced-motion: reduce) {
}
```

How this works

Vertical gradients swap the angle argument to to bottom or 180deg. The sidebar words use writing-mode: vertical-rl combined with background: linear-gradient(180deg, …) and -webkit-background-clip: text. In vertical writing mode the gradient still flows along the element's inline direction, so it transitions from top-of-word to bottom-of-word.

The fade-out pattern — a vivid colour at one end transitioning to a near-transparent version at the other — creates a sense of the text dissolving into the background. This is achieved by using the same hue at both stops but changing the alpha: rgba(245,158,11,1) at the vivid end and rgba(245,158,11,0.2) at the transparent end, preserving colour identity while reducing opacity.

Make it yours

  • Change the fade endpoint from near-transparent rgba(245,158,11,.2) to a contrasting hue like #ec4899 for a dual-colour vertical ramp rather than a fade-out effect.
  • Animate the vertical gradient by adding background-size: 100% 300% and a background-position keyframe animating from 50% 0% to 50% 100% for a top-to-bottom sweep.
  • Use the writing-mode: vertical-lr variant (note lr vs rl) to flip the sidebar text orientation for right-to-left visual flow.
  • Apply the to bottom gradient on a hero background section rather than text by removing background-clip: text for a full-bleed vertical colour wash behind content.
  • Combine vertical text gradients with an animated transform: rotate(-90deg) hover to create a fun reveal where the label rotates horizontally while the gradient persists.

Gotchas — read before shipping

  • When using writing-mode: vertical-rl with background-clip: text, the gradient direction must be adjusted — linear-gradient(180deg, …) flows along the block axis, which in vertical writing mode corresponds to the visual left-to-right direction. Test all four writing modes to confirm gradient orientation.
  • In Firefox, writing-mode combined with -webkit-background-clip: text can produce incorrect gradient rendering in some versions — test specifically in Firefox ESR as it lags behind the latest Gecko releases.
  • Vertical gradient fade-out using rgba(colour, 0) at the transparent end requires that the opaque end colour is explicitly written in the same format (rgba) to avoid interpolation through grey on older browser engines.

Browser support

ChromeSafariFirefoxEdge
69+12.1+83+69+

writing-mode: vertical-rl with background-clip:text is supported in all modern engines but gradient direction may need to be swapped depending on the writing mode axis.

Techniques used in this demo

background-clip: textMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →