Хромовый текст
y2k-эстетика Переливающаяся рамка →

Появление текста

Хромовый текст

Металл с «горизонтом» посередине буквы и пробегающим бликом.

Дождитесь блика.

CHROME

Код
<h1 class="chrome" data-text="CHROME">CHROME</h1>

<style>
.chrome { position: relative; color: transparent;
  /* металл: горизонт посередине буквы */
  background: linear-gradient(180deg,
    #e8eef5 0%, #b8c4d4 28%, #5e6b7e 47%,
    #2c333d 52%, #7c8b9e 55%, #dfe7f0 75%, #98a5b8 100%);
  -webkit-background-clip: text; background-clip: text; }
/* пробегающий блик — вторая копия текста */
.chrome::after { content: attr(data-text);
  position: absolute; inset: 0; color: transparent;
  background: linear-gradient(105deg, transparent 42%,
    rgba(255,255,255,.9) 50%, transparent 58%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sweep 3.5s ease-in-out infinite; }
@keyframes sweep {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -130% 0; } }
</style>
Промпт для ИИ
Сделай хромовый текст: вертикальный градиент металла с резким «горизонтом» посередине буквы (светлое небо сверху 0-47%, тёмная полоса 47-55%, отражение снизу) через background-clip:text. Поверх — ::after с content:attr(data-text) и узким белым бликом (105deg, transparent 42% / white 50% / transparent 58%), который пробегает background-position 130%→-130% за 3.5s с паузой (55%,100% один кадр). Жирный шрифт обязателен.