CSS13 · טקסט גרדיאנט נושם

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}

/* CSS13 · טקסט גרדיאנט נושם */
.gtext{font-size:var(--fs-demo, clamp(36px, 3vw + 0.5rem, 76px));font-weight:800;
background:linear-gradient(90deg,var(--accent, #4a3aff),#c2255c,#e8590c,var(--accent, #4a3aff));background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:gflow 6s ease-in-out infinite alternate}
@keyframes gflow{from{background-position:0% 0}to{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.gtext{animation:none}}

HTML

<div class="stage tight center"><h2 class="gtext">גרדיאנט שנושם לאט</h2></div>