Генератор CSS-градиентов — бесплатно
Создавайте линейные, радиальные и конические CSS-градиенты с предпросмотром в реальном времени. Копируйте CSS одним нажатием.
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);Избавляет от серых середин между сильно различающимися цветами. Добавляет обычную строку sRGB как запасную для старых браузеров.
Пресеты
Частые применения
- Создание градиентов для секций HeroРазработайте полностраничные фоны с градиентом для героических секций веб-сайтов и целевых страниц.
- Создание градиентных кнопок и CTAРазработайте привлекательные фоны кнопок с градиентом для призывов к действию, которые выделяются.
- Создание фонов с градиентом для карточекРазработайте заливки с градиентом для карточек, модалей, боковых панелей и фонов компонентов пользовательского интерфейса.
- Создание градиентов для графики в социальных сетяхРазработайте яркие фоны с градиентом для постов Instagram, миниатюр YouTube и карточек Twitter.
- Создание цветовых шкал для диаграммСоздавайте цветовые шкалы с градиентом для тепловых карт, полос прогресса и визуализаций данных.
Как это работает
Генератор градиентов строит строки CSS-градиентов прямо в браузере — без библиотеки, без сервера, без загрузки. Написанная вручную функция собирает правильный синтаксис linear-gradient, radial-gradient или conic-gradient из ваших цветовых остановок и угла в реальном времени, затем форматирует результат для выбранной вами целевой платформы вывода.
- 1Настройте остановки и направлениеВы устанавливаете от 2 до 6 цветовых остановок, используя нативный выбор цвета браузера, затем позиционируете каждую остановку вдоль оси 0–100% ползунком диапазона. Для линейных и конических градиентов вы также выбираете угол (0–360°); для радиальных градиентов вы выбираете форму (эллипс или круг) и ключевое слово размера, которое контролирует, насколько далеко распространяется градиент.
- 2buildCss собирает строку градиентаПри каждом изменении локальная функция buildCss объединяет ваши параметры в правильный вызов функции CSS — например, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Никакая библиотека не задействована; строка строится с помощью простой шаблонной логики JavaScript и объединяется прямо из массива остановок.
- 3Живой предпросмотр рендерится через встроенный стильСобранная строка градиента применяется прямо к элементу div как встроенный стиль фона, так что собственный движок CSS браузера рендерит предпросмотр. Не задействован ни холст, ни изображение — то, что вы видите, буквально применяемое свойство CSS.
- 4Готовый к копированию вывод в четырёх форматахСелектор формата преобразует ту же строку градиента в простой CSS (background: ...), блок CSS с твёрдым резервным вариантом, класс Tailwind с произвольным значением или объявление переменной SCSS. Нажатие Копировать записывает выбранный вывод в буфер обмена через navigator.clipboard.writeText. Текущий градиент также кодируется в хэше URL, так что вы можете добавить его в закладки или поделиться им.
Похожие инструменты
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.
Генератор CSS Flexbox
Экспериментируйте с направлением, переносом, выравниванием на живых элементах — и копируйте CSS.
Калькулятор матриц
Сложение, вычитание, умножение, транспонирование, обращение и приведение матриц, а также определитель, ранг, собственные значения и решение Ax = b — до 8×8, с копированием одним касанием. Бесплатно и конфиденциально.