Появление текста
Хромовый текст
Металл с «горизонтом» посередине буквы и пробегающим бликом.
Дождитесь блика.
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% один кадр). Жирный шрифт обязателен.