20 CSS Text Gradient Effects 12 / 20

Pastel Soft Color Text Gradient CSS

A lifestyle blog layout with warm pastel gradients in the 60–90% lightness range across headings and article card titles.

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

The code

<div class="tg-12">
  <div class="tg-12__container">
    <div class="tg-12__blog-header">
      <div class="tg-12__chip">Lifestyle · 4 min</div>
      <h1 class="tg-12__title">The art of<br><span class="tg-12__soft">slow mornings</span></h1>
      <p class="tg-12__intro">Gentle routines and intentional starts that reshape how you work, rest, and create throughout the day.</p>
    </div>
    <div class="tg-12__card-row">
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-rose">Mindful journaling</h3>
        <p>Five minutes of unstructured writing before checking any screen.</p>
      </article>
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-sky">Herbal rituals</h3>
        <p>Brewing tea as a meditative practice — warmth, aroma, presence.</p>
      </article>
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-mint">Gentle movement</h3>
        <p>Ten minutes of stretching outdoors to anchor the body in the day.</p>
      </article>
    </div>
  </div>
</div>
.tg-12, .tg-12 *, .tg-12 *::before, .tg-12 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-12 ::selection { background:#fbcfe8; color:#831843; }

.tg-12 {
  --rose-a: #fda4af;
  --rose-b: #f9a8d4;
  --sky-a:  #7dd3fc;
  --sky-b:  #a5b4fc;
  --mint-a: #86efac;
  --mint-b: #6ee7b7;
  --bg: #fdf8f6;
  --surface: #ffffff;
  --text: #1e1b1a;
  --muted: #7c6f67;
  --border: #f0e8e4;
  font-family: 'Georgia', serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
}

.tg-12__container { padding: 44px 32px; max-width: 700px; margin: 0 auto; }

.tg-12__chip {
  font-family: system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 18px;
}

.tg-12__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

/*
  Pastel gradients: use soft, desaturated-leaning colours in the 60–90%
  lightness range. The key is to keep both gradient stops within the same 
  warm/cool family so the blend stays harmonious and never muddy.
*/
.tg-12__soft {
  background: linear-gradient(110deg, var(--rose-a) 0%, var(--sky-a) 50%, var(--mint-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-12__intro {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 36px;
}

.tg-12__card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 16px;
}
.tg-12__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
}
.tg-12__card p {
  font-family: system-ui, sans-serif;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 8px;
}
.tg-12__card-title {
  font-size: 1.1rem;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding: 0 .05em .1em;
}
/* CRITICAL: use background-image (not the shorthand 'background')
   because the shorthand resets background-clip to its initial
   border-box value, breaking the text clipping above. */
.tg-12__g-rose { background-image: linear-gradient(90deg, var(--rose-a), var(--rose-b)); }
.tg-12__g-sky  { background-image: linear-gradient(90deg, var(--sky-a),  var(--sky-b)); }
.tg-12__g-mint { background-image: linear-gradient(90deg, var(--mint-a), var(--mint-b)); }

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

How this works

Pastel gradients use colour stops in the 60–90% HSL lightness range with moderate saturation (70–80%). The trick to keeping a pastel gradient harmonious is to route through complementary hue families — the main heading moves from rose (0°) through sky (200°) to mint (150°) without crossing the muddy mid-greens. Each card title uses a two-stop gradient within a single hue family to maintain coherence.

The serif Georgia font pairing amplifies the soft aesthetic — heavy serif strokes expose more gradient surface area than narrow grotesques, and the organic letterforms contrast pleasingly with the precision of the CSS gradient. Setting line-height: 1.15 on the headline prevents gradient text from being clipped when descenders dip below the bounding box.

Customize

  • Replace the soft pastel trio with a warm desert palette: #fcd5b5 (sand), #f4a886 (terracotta), #e07b54 (clay) for a sun-baked editorial aesthetic.
  • Add a gentle background-position animation to the headline gradient by setting background-size: 200% 100% and a slow 8s linear infinite keyframe for a barely-moving aurora effect.
  • Increase the card border-radius from 14px to 20px and add box-shadow: 0 4px 20px rgba(0,0,0,.06) for a softer, floating card look common in lifestyle applications.
  • Swap the body font from system-ui to a web serif like 'Playfair Display' (loaded via Google Fonts) to extend the editorial quality from headlines to body copy.
  • Apply the .tg-12__soft gradient to category chips or tags by duplicating the class and reducing font-size to .7rem with font-weight: 800 for colourful metadata labels.

Watch out for

  • Pastel gradient text on white backgrounds has inherently lower contrast than on dark backgrounds — run a contrast check on the lightest stop of your gradient against the page background and ensure it meets at least 3:1 for large text (WCAG AA).
  • If the pastel gradient appears washed out or nearly invisible, increase saturation from the default 70% toward 85% while keeping lightness in the 70–80% range — very light pastels can fail to register as a colour ramp at small sizes.
  • On OLED screens, pastel gradients on white backgrounds can appear to lack depth because OLED white is significantly brighter than LCD. Consider a very light warm tint (#fdf8f6) on the page background to give pastels a surface to contrast against.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Pastel gradient text on white has low inherent contrast — always verify WCAG AA compliance (3:1 for large text) using the darkest stop of the gradient as the measured colour.

More from 20 CSS Text Gradient Effects

Web3 Glowing Gradient Text CSSCSS Text Gradient Corporate Logo TextMinimalist Bold Text Gradient CSSCSS Hover Transition Text Gradient EffectGradient Text Button Link CSSAnimated Moving Text Gradient Background CSSCyberpunk Neon Text Gradient CSSMetallic Gold Text Gradient Effect CSSGlassmorphism Text Gradient ContrastVertical Linear Gradient Text CSSRadial Gradient Text Effect CSSMulti Color Rainbow Text Gradient CSS
View the full collection →

Search CodeFronts

Loading…

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