Stromend kleurverloop

Een warm meerkleurig verloop stroomt door de letters van een korte kop; voor een woord dat moet opvallen zonder plaatje.

Hoveniersbedrijf Groen & Zoon

Tuinen die
groeien.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Stromend kleurverloop · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-grt"><span class="ei-grt__k">Hoveniersbedrijf Groen &amp; Zoon</span><h3 class="ei-grt__h">Tuinen die<br><span class="ei-grt__g">groeien.</span></h3></div>
</div>

/* Stromend kleurverloop · NedDev · eigen werk. */
.ei-grt{padding:0 24px;text-align:left}
.ei-grt__k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.55);margin-bottom:12px}
.ei-grt__h{margin:0;font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(20px,5vw,30px);line-height:1.35;color:#0a0a0a}
.ei-grt__g{color:transparent;background:linear-gradient(90deg,#F5480F,#ffb02e,#e8331c,#ff7a3d,#c2410c,#F5480F);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:ei-grt-flow 6s linear infinite}
@keyframes ei-grt-flow{to{background-position:300% 0}}
@media(prefers-reduced-motion:reduce){.ei-grt__g{animation:none}}

Meer uit tekstanimaties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →