20 CSS Gradient Text Designs 07 / 20

CSS Gradient Text Outline Stroke Effect

A gradient is applied as the stroke colour of outlined text using -webkit-text-stroke combined with background-clip:text, creating crisp gradient-coloured letterform outlines.

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

The code

<div class="gt-07">
  <span class="gt-07__label">Gradient text stroke / outline</span>
  <div class="gt-07__outlined">OUTLINED</div>
  <div class="gt-07__css-stroke">GRADIENT FILL</div>
  <div class="gt-07__row">
    <span class="gt-07__pill">Purple</span>
    <span class="gt-07__pill">Pink</span>
    <span class="gt-07__pill">Orange</span>
  </div>
</div>
.gt-07, .gt-07 *, .gt-07 *::before, .gt-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-07 {
  --bg: #fff;
  --g1: #7c3aed;
  --g2: #db2777;
  --g3: #ea580c;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-07__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ddd;
}
/* Stroke via SVG text linearGradient inside an inline SVG */
.gt-07__svg-wrap {
  width: 100%;
  max-width: 700px;
  overflow: visible;
}
.gt-07__stroke {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
}
/* CSS-only outline technique using -webkit-text-stroke + transparent fill */
.gt-07__css-stroke {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 3px transparent;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Paint background behind the text-stroke so stroke uses gradient */
  paint-order: stroke fill;
  animation: gt-07-shift 5s ease-in-out infinite alternate;
}
.gt-07__outlined {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 4px;
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-07-scroll 4s linear infinite;
  letter-spacing: .05em;
}
.gt-07__row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-07__pill {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: .4em .8em;
  border: 2px solid;
  border-image: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)) 1;
  border-radius: 999px;
  /* Compat: border-image doesn't work with border-radius, use outline trick */
  border: none;
  box-shadow: 0 0 0 2px var(--g1);
}
@keyframes gt-07-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes gt-07-scroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-07__css-stroke, .gt-07__outlined { animation: none; }
}

How this works

-webkit-text-stroke sets stroke width and colour on text, but stroke colour alone cannot be a gradient. The workaround clips a gradient to the text shape with -webkit-background-clip: text and sets -webkit-text-fill-color: transparent, which reveals the gradient as the fill. For an outlined-only look, the stroke width adds visible edge pixels while the fill remains transparent — the gradient bleeds through both stroke and fill regions simultaneously.

The animated variant scrolls background-position on a 200% 100% gradient for a travelling colour shift. Border-image is used on pill chips for a gradient border, though it requires border-radius to be abandoned in favour of box-shadow for rounded corners — a well-known limitation.

Customize

  • Increase stroke weight with -webkit-text-stroke: 6px for a bold poster-style outline; reduce to 1px for a hair-thin traced effect.
  • Combine a solid -webkit-text-fill-color with a thicker stroke for a two-tone look where the fill and outline gradient are independent colours.
  • Layer a text-shadow in a gradient-matching colour below the outlined text for a dimensional look — e.g. text-shadow: 4px 4px 0 #db277730.

Watch out for

  • -webkit-text-stroke paints the stroke symmetrically inward and outward from the glyph path — at wide strokes this eats into the letter interior; there is no pure CSS way to force outward-only stroke.
  • The border-image gradient border technique does not support border-radius on any browser; use an SVG outline or layered box-shadow for rounded gradient borders.
  • Firefox does not support -webkit-text-stroke without the -webkit- prefix; the prefixed version works since Firefox 49, but test to confirm stroke renders as expected.

Browser support

ChromeSafariFirefoxEdge
4+ 3.1+ 49+ 4+

-webkit-text-stroke is broadly supported but remains a prefixed property with no unprefixed equivalent in the CSS spec as of 2025.

More from 20 CSS Gradient Text Designs

CSS Lava Lamp Radial Gradient TextCSS Neon Pulse Gradient Text GlowCSS Metallic Chrome Gold Copper Gradient TextCSS Holographic Foil Iridescent Gradient TextCSS Duotone Gradient Text Two-Colour FillCSS Gradient Text Texture Fill — Sunset Starfield OceanCSS Liquid Mercury Metallic Gradient TextCSS Hover Reveal Gradient Text EffectCSS Toggle Switch Gradient Text Colour PickerCSS Glitter Sparkle Gradient Text EffectCSS Crystalline Prism Gradient TextCSS Scroll Gradient Text Reveal on Scroll
View the full collection →

Search CodeFronts

Loading…

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