Opent in een nieuw tabblad
Direct onlineReactie binnen 1 werkdagWhatsAppStart project
01WebdesignMaatwerk sites in WordPress + Bricks, zonder templates.02Interactief webdesignGSAP, WebGL en kinetische typografie die converteert.03SEOTechniek, structuur en content die Google begrijpt.04GEO & AI searchZichtbaar en geciteerd in ChatGPT, Gemini en Perplexity.

Snel naar

Linkbuilding & backlinks Gratis SEO- & GEO-scan Oplossingen per probleem Onze werkwijze in sprints Bereken je omzetverlies Kennisbank & blog

A Industry, Logistics & Construction

Logistiek & Supply ChainTrack & traceMaakindustrie & MachinebouwConfigurator + RFQBouw & ProjectontwikkelingBouwfase-stackerJuridisch & ZakelijkSlimme intake

B Luxury, Lifestyle & Hospitality

Vastgoed & ArchitectuurLichtval-explorerSieraden & LuxuryConfiguratorAutomotive & ExoticsCar-configuratorHospitality & HorecaExperience-flowMedisch-esthetische kliniekenPatiëntreis

C Tech, Finance & Future

FinTech & Private WealthVermogensprojectieCleanTech & EnergieEnergie-simulatorSaaS & Tech scale-upsMRR-simulatorCybersecurity & BeveiligingSecurity-scoreRecruitment & Executive searchTalent radarFestivals & EvenementenTimetable-builder
Alle 15 sectoren bekijken

CSS-lab · Tekst-effecten

Gradient-sweep tekst

Een lichtstreep van acid lime en wit die telkens over je kop veegt, met background-clip: text. Licht, pure CSS en met een nette fallback.

  • Beginner
  • Pure CSS
  • MIT-licentie
  • background-clip: text
  • linear-gradient
  • background-position animatie
  • -webkit-text-fill-color
  • @supports
HTML
<div class="gst-wrap">
  <p class="gst-kicker">Nieuw in het lab</p>
  <h2 class="gst-text">Licht in elke letter</h2>
</div>
CSS
/* Gradient-sweep: lichtstreep door de letters */
.gst-wrap {
  --base: #9A9AA2;
  --shine: #C6FF3D;
  --core: #FFFFFF;
  --speed: 3.5s;
  --angle: 110deg;
  text-align: center;
}

.gst-kicker {
  margin: 0 0 14px;
  font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--shine);
}

.gst-text {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(40px, 8vw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--base);
}

/* Alleen knippen als de browser het kan, anders blijft de basiskleur */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gst-text {
    background: linear-gradient(var(--angle), var(--base) 0 40%, var(--shine) 46%, var(--core) 50%, var(--shine) 54%, var(--base) 60% 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gst-sweep var(--speed) cubic-bezier(.6, 0, .3, 1) infinite;
  }
}

/* Veeg tot 65%, daarna een pauze buiten beeld */
@keyframes gst-sweep {
  0% { background-position: 100% 0; }
  65%, 100% { background-position: 0% 0; }
}

@media (forced-colors: active) {
  .gst-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gst-text {
    animation: none;
    background-position: 50% 0;
  }
}

Wat het is en waar je het gebruikt

Bij dit tekst-effect veegt er telkens een smalle lichtstreep over de letters, alsof er licht over een metalen of glazen oppervlak glijdt. De basis is een rustig grijs, de streep heeft een witte kern met een acid-lime rand. Na elke veeg volgt een korte pauze, zodat het effect de aandacht trekt zonder te vermoeien.

Het werkt goed voor een kop in een donkere hero, een productnaam, een prijs of een label als “Nieuw”. Omdat het effect alleen in de tekst zit, kun je het combineren met elke layout.

Zo werkt het

  • Gradient als vulling: de kop krijgt een linear-gradient() met een harde basis van 0 tot 40% en van 60% tot 100%, en daartussen de streep: var(--shine), var(--core) en weer var(--shine).
  • Uitknippen: background-clip: text (plus -webkit-background-clip) knipt de achtergrond uit tot de vorm van de letters. Met color: transparent en -webkit-text-fill-color: transparent wordt die gradient zichtbaar.
  • De veeg: background-size: 250% 100% maakt de gradient veel breder dan de tekst. De keyframes gst-sweep schuiven de background-position van 100% naar 0%, waardoor de streep van links naar rechts beweegt.
  • Pauze: de veeg is klaar bij 65% van de animatie. De rest van de tijd staat de streep buiten beeld, en de herstart valt dus niet op.

Aanpassen

De variabelen staan op .gst-wrap:

  • --base: de grondkleur van de tekst.
  • --shine en --core: de rand en de kern van de lichtstreep. Met cobalt en violet krijg je een koelere variant.
  • --speed: de totale duur van veeg plus pauze.
  • --angle: de hoek van de streep. Met 90deg staat hij recht, met 130deg schuiner.

Wil je een bredere streep, schuif dan de stops in de gradient verder uit elkaar, bijvoorbeeld van 35% naar 65%.

Toegankelijkheid en browsersupport

De basiskleur heeft ruim voldoende contrast op de donkere achtergrond, ook zonder de streep. De tekst blijft echte tekst: selecteerbaar, vindbaar en leesbaar voor screenreaders. Alle clip-regels staan in een @supports-blok. Een browser zonder background-clip: text toont daardoor gewoon de basiskleur in plaats van onzichtbare letters. In de modus voor geforceerde kleuren (forced-colors: active) valt het effect weg en gebruikt de tekst de systeemkleur. Met prefers-reduced-motion: reduce staat de streep stil in het midden. Het effect werkt in alle actuele browsers.

Verder lezen

Kleine bewegingen zoals deze veeg zijn op hun best als ze een doel hebben, zoals aandacht sturen naar één woord. Daarover gaat ons artikel over microinteracties in UX. Wil je typografie die zo’n effect kan dragen? Bekijk dan onze aanpak voor webdesign.

Meer tekst-effecten

Nog meer gedurfde CSS

Alle CSS-snippets →