20 CSS Text Gradient Effects 13 / 20

Vertical Linear Gradient Text CSS

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

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

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) {}

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.

Customize

  • 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.

Watch out for

  • 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.

More from 20 CSS Text Gradient Effects

Metallic Gold Text Gradient Effect CSSGlassmorphism Text Gradient ContrastPastel Soft Color Text Gradient CSSRadial Gradient Text Effect CSSMulti Color Rainbow Text Gradient CSSCSS Text Gradient with Text Stroke OutlineCSS Text Gradient Fallback for Older BrowsersTailwind CSS Text Gradient Utility ClassesCSS Text Gradient on Multiline ParagraphCSS Text Gradient on Active Navigation LinkDark Mode vs Light Mode CSS Text GradientCSS Text Gradient Landing Page Hero Title
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →