Генератор цветовых градиентов
Создавайте CSS-градиенты - линейные, радиальные и конические - визуально, мгновенно и бесплатно. Добавляйте до 10 цветовых точек, задавайте точные позиции, выбирайте направление и угол и получайте готовый к продакшену CSS одним щелчком. Шесть шаблонов для быстрого старта. Полностью приватно, без регистрации.
Presets
Gradient Type
Direction
Color Stops (2)
Click the colour swatch to open the colour picker. Drag the slider to adjust position.
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
Почему стоит использовать наш генератор цветовых градиентов?
- Живой предпросмотр и мгновенный CSS: генератор цветовых градиентов обновляет живой предпросмотр и вывод CSS при каждом изменении - нажимать кнопку не нужно. Вы видите градиент ровно таким, каким он будет в браузере, и копируете CSS одним щелчком.
- Три типа градиентов и полный контроль: создавайте линейные, радиальные и конические градиенты с полным контролем направления, угла, формы, размера и положения центра. Добавляйте до 10 цветовых точек, задавайте точные позиции и включайте режим повторения для мозаичных узоров.
- 100% приватно - без загрузки файлов: вся генерация градиентов происходит локально в вашем браузере. Ваш выбор цветов никогда не покидает устройство и не отправляется на сервер - это безопасно для клиентских проектов и закрытых дизайн-систем.
- Бесплатно и без ограничений: создавайте неограниченное число градиентов без регистрации, подписки и лимитов использования. Генератор цветовых градиентов полностью бесплатен навсегда, без рекламы, перекрывающей интерфейс.
Типичные сценарии использования генератора цветовых градиентов
- Фоны сайтов и hero-секций: веб-дизайнеры используют генератор цветовых градиентов для создания эффектных фонов hero-секций, градиентов страниц и разделителей. Скопируйте CSS прямо в свою таблицу стилей одним щелчком.
- Разработка CSS и Tailwind: фронтенд-разработчики используют генератор, чтобы собрать и протестировать CSS-градиент перед добавлением в кодовую базу. На выходе получается готовый к продакшену CSS, работающий во всех современных браузерах.
- Токены дизайн-систем: команды дизайн-систем используют генератор для определения токенов градиентов для фонов, карточек и UI-компонентов. Визуальный конструктор упрощает согласование градиентов с фирменными цветами.
- Графика для соцсетей и маркетинга: маркетологи и авторы контента используют генератор для создания градиентных фонов для постов в соцсетях, баннеров и шапок писем. Библиотека шаблонов даёт мгновенные точки старта.
- Оформление кнопок и карточек: UI-разработчики используют генератор для создания градиентных заливок кнопок, карточек, бейджей и индикаторов прогресса. Радиальные и конические градиенты придают UI-компонентам глубину и визуальный интерес.
- Дизайн лендингов и CTA: специалисты по конверсии используют генератор для создания контрастных градиентных CTA и фонов секций, которые привлекают внимание и ведут пользователя по странице.
Что такое CSS-градиент?
CSS-градиент - это плавный переход между двумя или более цветами, полностью описанный в CSS, без файла изображения. Градиенты создаются с помощью свойства background или background-image и функций градиента. Наш генератор цветовых градиентов собирает строку CSS-градиента визуально и выдаёт готовый к продакшену CSS, работающий во всех современных браузерах без вендорных префиксов.
Как работает наш генератор цветовых градиентов
- Выберите тип градиента: линейный (переход по прямой линии), радиальный (круговой или эллиптический от центральной точки) или конический (вращение вокруг центральной точки). Используйте шаблон, чтобы начать мгновенно.
- Настройте цветовые точки и параметры: добавьте до 10 цветовых точек с помощью палитры или ввода hex-кода. Перетаскивайте ползунок позиции, чтобы точно разместить каждую точку. Задайте направление, угол, форму, размер и положение центра для выбранного типа градиента. Все изменения мгновенно обновляют живой предпросмотр.
- Скопируйте CSS: нажмите «Копировать CSS», чтобы скопировать готовое к продакшену объявление background: в буфер обмена. Вставьте его прямо в свою таблицу стилей.
Три типа CSS-градиентов
- Линейный градиент: переходит между цветами вдоль прямой линии. Управляйте направлением с помощью предустановленных ключевых слов (to right, to bottom и т. д.) или собственного угла в градусах. Используйте repeating-linear-gradient для полосатых узоров.
- Радиальный градиент: переходит между цветами наружу от центральной точки в круговой или эллиптической форме. Управляйте формой (circle или ellipse), размером (farthest-corner, closest-side и т. д.) и положением центра.
- Конический градиент: переходит между цветами, поворачиваясь вокруг центральной точки - как цветовое колесо или круговая диаграмма. Управляйте начальным углом и положением центра. Идеален для круговых диаграмм, цветовых колёс и угловых дизайнов.
Позиции цветовых точек
У каждой цветовой точки есть позиция (0%-100%), которая определяет, где этот цвет появляется в градиенте. Если две точки имеют одинаковую позицию, градиент создаёт резкую границу вместо плавного перехода - это удобно для полосатых эффектов. Генератор цветовых градиентов автоматически сортирует точки по позиции, поэтому добавлять их можно в любом порядке.
Часто задаваемые вопросы
Генератор цветовых градиентов - это визуальный инструмент, который собирает CSS-код градиента из настраиваемых цветовых точек, типа градиента и параметров направления. Наш генератор поддерживает линейные, радиальные и конические градиенты с количеством цветовых точек до 10 и выдаёт готовый к продакшену CSS. Вся генерация выполняется целиком в вашем браузере, данные не отправляются на сервер.
Линейные градиенты переходят между цветами вдоль прямой линии в заданном направлении или под заданным углом. Радиальные градиенты переходят между цветами наружу от центральной точки в круговой или эллиптической форме. Конические градиенты переходят между цветами, поворачиваясь вокруг центральной точки - как цветовое колесо. У каждого типа свои сценарии использования и визуальные эффекты.
Да. Вся генерация градиентов на 100% выполняется на стороне клиента в вашем браузере с помощью JavaScript. Ваш выбор цветов никогда не отправляется на сервер, не сохраняется и никуда не передаётся. Генератор цветовых градиентов полностью приватен и безопасен для клиентских проектов.
Да. Генератор цветовых градиентов на 100% бесплатен: без регистрации, без платных функций и без ограничений по использованию. Создавайте неограниченное число градиентов без каких-либо ограничений и скрытых платежей.
Опция повторения заменяет функцию градиента на repeating-linear-gradient, repeating-radial-gradient или repeating-conic-gradient. Это повторяет узор градиента по всему элементу, создавая эффекты полос или орнаментов. Размер узора определяется позициями ваших цветовых точек.
Чтобы получить резкую границу между двумя цветами, поставьте две соседние цветовые точки в одну и ту же позицию. Например, если точка A стоит на 50% и точка B тоже на 50%, градиент резко переключится с цвета A на цвет B в этом месте без какого-либо смешения.
Да. Скопируйте значение градиента и используйте его в классе Tailwind с произвольным значением: bg-[linear-gradient(to_right,#6366f1,#ec4899)]. В произвольных значениях Tailwind заменяйте пробелы символами подчёркивания. Также можно добавить градиент в tailwind.config.js в разделе theme.extend.backgroundImage.
Генератор цветовых градиентов поддерживает до 10 цветовых точек на градиент. Сам CSS не имеет жёсткого предела по числу точек, но градиенты с более чем 10 точками на практике нужны редко. Удалять точки можно до минимума в 2.
Да. Линейные и радиальные градиенты поддерживаются всеми современными браузерами без вендорных префиксов. Конические градиенты поддерживаются в Chrome 69+, Firefox 83+, Safari 12.1+ и Edge 79+. Для старых браузеров стоит указать сплошной цвет как запасной вариант перед объявлением градиента.