ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

1638 codex

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

16 July 2025

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

7 January 2024

सीएसएस 3डी सौर प्रणाली

HTML

CSS

body {
    background: hsl(204 100% 5%);

min-block-size: 100%;
    box-sizing: border-box;
    display: grid;
    place-content: center;

font-family: system-ui;
    font-size: min(200%, 4vmin);

padding: 5vmin;
  }
@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}

/* keyframes that change the color variable */
@keyframes gradient-change {
  to {
    --color-1: hsl(210 100% 59%);
    --color-2: hsl(310 100% 59%);
  }
}

article {
  animation: gradient-change 2s linear infinite alternate;
  background: linear-gradient(
    to right in oklch, 
    var(--color-1), 
    var(--color-2)
  );
  background-clip: text;
  color: transparent;
}

h1, p, body {
    margin: 0;
    text-wrap: balance;
  }

h1 {
    line-height: 1.25cap;
  }
  html {
    block-size: 100%;
  }

article {
    display: grid;
    gap: 1lh;
    text-align: center;
  }
}

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

अनुशंसित

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

सीएसएस पल्स लोडर

सीएसएस 3डी सौर प्रणाली

HTML

CSS

JS

अनुशंसित

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

सीएसएस पल्स लोडर

सीएसएस 3डी सौर प्रणाली

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS