CSS-градиенты создают плавные цветовые переходы, которые улучшают визуальный дизайн без изображений. Линейные градиенты переходят вдоль прямой линии, в то время как радиальные градиенты излучаются из центральной точки. Этот визуальный инструмент позволяет вам проектировать градиенты, добавляя цветовые остановки, регулируя позиции и меняя направления, а затем копировать сгенерированный CSS-код для вашего проекта.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Выберите тип градиента (линейный или радиальный), установите направление или угол и добавьте цветовые остановки, кликая на полосу градиента. Каждая цветовая остановка имеет палитру цветов и слайдер позиции. Перетаскивайте остановки для их репозиционирования или удаляйте их кликом. Живой предпросмотр показывает градиент в реальном времени, а сгенерированный CSS-код отображается ниже, готовый для копирования. Доступны предустановки градиентов для быстрого старта.
CSS-градиенты используются для создания современных фонов и hero-секций, эффектов hover на кнопках, заполнения progress bar'ов, текстовых градиентных эффектов с background-clip, эффектов наложения на изображениях, декоративных разделителей и границ, фонов карточек с тонкими переходами, анимаций скелетонов загрузки и выделения ценовых таблиц. Градиенты устраняют необходимость в фоновых изображениях, сокращая HTTP-запросы и улучшая производительность.
CSS linear-gradient() принимает направление (угол или ключевое слово вроде 'to right') и две или более цветовых остановок с опциональными позициями. Браузер интерполирует цвета между остановками. Radial-gradient() использует форму (circle или ellipse), размер (closest-side, farthest-corner и т.д.) и ключевые слова позиции. Цветовые остановки могут использовать любой CSS-формат цвета (hex, rgb, hsl, именованные цвета). Инструмент генерирует CSS без вендорных префиксов, так как все современные браузеры поддерживают градиенты без префиксов.
CSS-градиент - это плавный переход между двумя или более цветами, рендерящийся браузером без изображений. CSS поддерживает linear-gradient (прямая линия), radial-gradient (круговой) и conic-gradient (вокруг центральной точки).
Используйте свойство background с функцией градиента: background: linear-gradient(to right, #ff0000, #0000ff); создаёт градиент слева направо от красного к синему.
Да. CSS-градиенты поддерживают неограниченное количество цветовых остановок. Каждая остановка может иметь конкретную позицию: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%).
Линейные градиенты переходят цвета вдоль прямой линии (вы указываете направление/угол). Радиальные градиенты переходят от центральной точки наружу в круговой или эллиптической форме.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты