20 CSS Text Gradient Effects 03 / 20

CSS Text Gradient Corporate Logo Text

An image-free corporate navbar logo using gradient text that scales infinitely at any DPI with zero HTTP requests.

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

The code

<div class="tg-03">
  <div class="tg-03__wrapper">
    <nav class="tg-03__nav">
      <div class="tg-03__logo">
        <span class="tg-03__logo-icon">◈</span>
        <span class="tg-03__logo-text">Spectr<span class="tg-03__grad">um</span></span>
      </div>
      <div class="tg-03__nav-links">
        <a href="#" class="tg-03__link">Product</a>
        <a href="#" class="tg-03__link">Pricing</a>
        <a href="#" class="tg-03__link">About</a>
      </div>
      <button class="tg-03__cta">Get started</button>
    </nav>
    <div class="tg-03__showcase">
      <p class="tg-03__label">LOGO SIZES</p>
      <div class="tg-03__size-row">
        <span class="tg-03__logo-display tg-03__logo-display--sm">Spectr<span class="tg-03__grad">um</span></span>
        <span class="tg-03__logo-display tg-03__logo-display--md">Spectr<span class="tg-03__grad">um</span></span>
        <span class="tg-03__logo-display tg-03__logo-display--lg">Spectr<span class="tg-03__grad">um</span></span>
      </div>
      <p class="tg-03__note">Gradient text is image-free — scales infinitely, renders crisply on all DPI screens, and requires zero HTTP requests.</p>
    </div>
  </div>
</div>
.tg-03, .tg-03 *, .tg-03 *::before, .tg-03 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-03 ::selection { background:#6366f1; color:#fff; }

.tg-03 {
  --g-a: #6366f1;
  --g-b: #a855f7;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
}

/* Gradient reusable */
.tg-03__grad {
  background: linear-gradient(120deg, var(--g-a) 0%, var(--g-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-03__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 24px;
}

.tg-03__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-03__logo-icon {
  background: linear-gradient(120deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4rem;
}
.tg-03__logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
}

.tg-03__nav-links {
  display: flex;
  gap: 24px;
}
.tg-03__link {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s;
}
.tg-03__link:hover { color: var(--text); }

.tg-03__cta {
  font-size: .875rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  background: linear-gradient(120deg, var(--g-a), var(--g-b));
  color: #fff;
  cursor: pointer;
}

.tg-03__showcase {
  padding: 40px 32px;
  max-width: 700px;
  margin: 0 auto;
}
.tg-03__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 24px;
}
.tg-03__size-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tg-03__logo-display {
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.tg-03__logo-display--sm { font-size: 1.25rem; }
.tg-03__logo-display--md { font-size: 2rem; }
.tg-03__logo-display--lg { font-size: 3.25rem; }

.tg-03__note {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--g-a), var(--g-b)) 1;
  padding-left: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .tg-03__cta, .tg-03__link { transition: none; }
}

How this works

The logo text uses a single span.tg-03__grad wrapping only the suffix 'um', with background: linear-gradient(120deg, #6366f1, #a855f7) clipped via -webkit-background-clip: text. The surrounding text retains a plain color value, creating a seamless blend between solid and gradient letterforms in the same word.

The technique scales infinitely because it relies entirely on vector CSS rendering — no raster images are involved. The three .tg-03__logo-display examples use the same markup at 1.25rem, 2rem, and 3.25rem to demonstrate that gradient quality is resolution-independent at any DPI, including HiDPI Retina screens.

Customize

  • Change the gradient split point by moving the span.tg-03__grad to wrap a different suffix — e.g. wrap the whole name for a full-word gradient logo.
  • Swap the two gradient stops in --g-a and --g-b for instant palette changes — all logo display sizes and the navbar icon update in sync.
  • Add a third gradient stop with linear-gradient(120deg, var(--g-a), #ec4899, var(--g-b)) to introduce a pink mid-tone for a more vibrant brand identity.
  • Adjust the icon character to any Unicode symbol — ◆, ⬡, ✦, or a relevant emoji — the gradient clip applies to any glyph.
  • Try linear-gradient(to right, …) combined with background-size: 200% 100% and a background-position hover animation for a shimmer-on-hover logo variant.

Watch out for

  • On Firefox, -webkit-text-fill-color is supported but its interaction with background-clip: text on very large font sizes (>120px) can occasionally produce rendering artefacts — test at headline sizes above 6rem.
  • If the logo text renders as a solid colour rather than a gradient in production, verify that the parent container does not have overflow: hidden or transform applied, as these create new stacking contexts that can reset background-clip in some browser versions.
  • Gradient text does not inherit automatically — if you set the gradient on a parent and expect child text to display it, you must re-apply background-clip: text on each individual text element.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Gradient text renders identically across engines; the border-image gradient trick requires a separate fallback in IE which does not support border-image at all.

More from 20 CSS Text Gradient Effects

CSS 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 TitleWeb3 Glowing Gradient Text CSSMinimalist Bold Text Gradient CSSCSS Hover Transition Text Gradient EffectGradient Text Button Link CSSAnimated Moving Text Gradient Background CSSCyberpunk Neon Text Gradient CSS
View the full collection →

Search CodeFronts

Loading…

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