20 CSS Gradient Text Designs 11 / 20

CSS Gradient Text Texture Fill — Sunset Starfield Ocean

Multi-stop gradients simulate natural texture fills — a sunset sky, a star-dotted night, and an ocean depth — each clipped to large display text.

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

The code

<div class="gt-11">
  <span class="gt-11__label">Texture gradient fill</span>
  <div class="gt-11__sunset">SUNSET</div>
  <div class="gt-11__divider"></div>
  <div class="gt-11__night">STARFIELD</div>
  <div class="gt-11__divider"></div>
  <div class="gt-11__ocean">OCEAN DEPTH</div>
</div>
.gt-11, .gt-11 *, .gt-11 *::before, .gt-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-11 {
  --bg: #111;
  font-family: 'Syne', 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-11__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #444;
}
/* Sunset gradient acting as "image" fill */
.gt-11__sunset {
  font-size: clamp(3rem, 13vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  background:
    linear-gradient(180deg,
      #1a0533 0%,
      #5c0a7c 15%,
      #c0273a 35%,
      #e8612a 55%,
      #f5a623 75%,
      #ffd700 100%
    );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-sunrise 6s ease-in-out infinite alternate;
}
/* Night sky gradient fill */
.gt-11__night {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  background:
    radial-gradient(ellipse at 20% 30%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 70% 20%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 50% 60%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 85% 50%, #ffffff 1px, transparent 1px),
    linear-gradient(180deg, #03001e 0%, #7303c0 50%, #ec38bc 100%);
  background-size: 80px 80px, 120px 120px, 60px 60px, 100px 100px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-star 4s ease-in-out infinite;
}
/* Ocean gradient fill */
.gt-11__ocean {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(135deg,
    #006994 0%,
    #0099cc 25%,
    #00d4ff 50%,
    #40e0ff 75%,
    #a0f0ff 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-ocean 3s ease-in-out infinite alternate;
}
.gt-11__divider {
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg, transparent, #ffffff20, transparent);
  border-radius: 2px;
}
@keyframes gt-11-sunrise {
  0%   { background-position: center 100%; }
  100% { background-position: center 0%; }
}
@keyframes gt-11-star {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  50%       { background-position: 10px 5px, -10px 8px, 5px -5px, -8px 3px, 0 0; }
}
@keyframes gt-11-ocean {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-11__sunset, .gt-11__night, .gt-11__ocean { animation: none; }
}

How this works

The sunset effect stacks a six-stop linear-gradient(180deg, ...) from deep indigo through violet, crimson, amber, and gold, then animates background-position vertically so the horizon appears to rise or set through the text. The starfield combines multiple radial-gradient layers — each producing a single 1px dot — composited behind a purple-magenta base gradient. CSS supports up to 16 gradient layers as a background shorthand, making this a pure-CSS star pattern.

The ocean fill uses a 135deg linear gradient with varying saturation stops to simulate underwater light scattering. Animating its background-position diagonally gives the impression of caustic light movement.

Customize

  • Add more star dots to the starfield by extending the radial-gradient list with additional background-size tile sizes — each unique tile size creates a visual parallax layer.
  • Create a forest canopy fill by using greens, yellows, and browns in the gradient stops with a vertical 180deg direction and a slow 8s drift.
  • Layer a mix-blend-mode: multiply on the sunset text against a light background to blend the gradient with the page context.

Watch out for

  • Stacking 5+ radial-gradient layers for the starfield increases paint time — browsers must composit each layer separately. Test GPU memory usage if adding more than 8 gradient layers.
  • The vertical background-position animation on the sunset relies on background-size: 100% 200% — if the browser's font metrics change the element height unexpectedly, the horizon band may clip out of view.
  • CSS radial-gradient dot stars render as circular blobs, not points — on high-DPI retina displays they look more like fuzzy smudges; reduce dot size to 0.5px for sharper stars.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 49+ 57+

Multiple background layers are well-supported; fractional pixel radial-gradient dots (0.5px) may not render on all Firefox subpixel configurations.

More from 20 CSS Gradient Text Designs

CSS Glitter Sparkle Gradient Text EffectCSS Crystalline Prism Gradient TextCSS Scroll Gradient Text Reveal on ScrollCSS Click Ripple Gradient Text InteractionCSS Cursor-Tracked Radial Gradient TextCSS Typewriter Loop Gradient Text AnimationCSS Animated Gradient Text FlowCSS Aurora Borealis Gradient Text SweepCSS Conic Gradient Text Hue SpinCSS Rainbow Wave Per-Letter Gradient TextCSS Lava Lamp Radial Gradient TextCSS Neon Pulse Gradient Text Glow
View the full collection →

Search CodeFronts

Loading…

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