TGViewer
Вёрстка сайтов | HTML, CSS, JS Вёрстка сайтов | HTML, CSS, JS @free_html_lessons · 4.5K subscribers
Post #1855 1.27K
Как создать адаптивный текстовый градиент

Градиенты в тексте — это модный тренд, который можно использовать не только для заголовков, но и для адаптивных интерфейсов.

HTML:
<h1 class="gradient-text">Смотри, я градиентный!</h1>

CSS:

.gradient-text {
background: linear-gradient(90deg, #ff6ec4, #7873f5, #00d4ff);
-webkit-background-clip: text;
color: transparent;
font-size: clamp(2rem, 5vw, 4rem);
}
clamp() обеспечивает адаптивный размер текста.
linear-gradient() позволяет настроить цвета и направление.

#какэтосделать
  • 👍 5
More from @free_html_lessons
  1. Oct 11, 2026Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Атрибут rel=…
  2. Oct 9, 2026Post #3083
  3. Oct 9, 2026Макет для тренировки (florist man) Перейти к макету 🧑‍💻 #практика | #макет
  4. Oct 8, 2026Атрибут disabled С помощью атрибута disabled можно отключать интерактивные элементы форм.…
  5. Oct 7, 2026Красивый шаблон для портфолио Смотреть на codepen 👨‍💻 #какэтосделать
  6. Oct 6, 2026Cтартовый шаблон для верстки и js проектов на vite (scss, PostCSS) Ссылка на github 👨‍💻…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →