Генератор CSS-градиентов

Создайте линейный или радиальный фон, настройте цвета и скопируйте CSS. Фон и размер предпросмотра не входят в код.

Настройки градиента

Тип градиента

Угол (градусы)

Введите число от 0 до 360 с одним десятичным знаком; используйте точку или запятую.

Цветовая точка 1Выбрать цвет

Цвет в HEX

Используйте #RGB или #RRGGBB; непрозрачность задаётся отдельно.

Непрозрачность (%)

Введите число от 0 до 100 с одним десятичным знаком; используйте точку или запятую.

Позиция (%)

Введите число от 0 до 100 с одним десятичным знаком; используйте точку или запятую.

Цветовая точка 2Выбрать цвет

Цвет в HEX

Используйте #RGB или #RRGGBB; непрозрачность задаётся отдельно.

Непрозрачность (%)

Введите число от 0 до 100 с одним десятичным знаком; используйте точку или запятую.

Позиция (%)

Введите число от 0 до 100 с одним десятичным знаком; используйте точку или запятую.

Предпросмотр и CSS

Фон предпросмотра

Форма предпросмотра

Линейный угол 0° направлен вверх, 90° — вправо. Радиальные проценты зависят от формы и размера. Центр на краю и ближайший размер могут дать плоский или линейный результат. Фон и размер окна меняют вид, но не CSS.

Объявление CSS

background-image: linear-gradient(90deg in srgb, rgb(255 0 0 / 100%) 0%, rgb(0 0 255 / 100%) 100%);

Как создаётся CSS

Линейный градиент · явная интерполяция sRGB

Градиент использует выбранную геометрию и явную интерполяцию в закодированном sRGB. Непрозрачность задаётся отдельно от RGB.

Угол (градусы): 90° · sRGB

Точка	Цвет в HEX	Непрозрачность (%)	Позиция (%)
1	#FF0000 · RGB 255 0 0	100%	0%
2	#0000FF · RGB 0 0 255	100%	100%

Точки с одинаковой позицией сохраняются отдельно и по порядку, образуя резкую границу.

Градиент создаётся на этой странице. Инструмент не загружает и не сохраняет ваши данные.

Создайте градиент

Выберите линейный градиент и угол либо радиальный с формой, размером и центром.
Настройте цвет, непрозрачность и позицию каждой точки. Соблюдайте порядок; одинаковые позиции создают резкую границу. Добавьте или дублируйте точку.
Проверьте результат и скопируйте CSS или скачайте gradient.css. Меняйте фон предпросмотра, чтобы оценить прозрачность.

Как работают настройки

Линейный угол 0° направлен вверх, 90° — вправо. В широком и квадратном окне вид может различаться.

Радиальный градиент расширяется от центра. Форма и размер определяют положение 100%.

Непрозрачность задаётся отдельно от RGB. CSS сохраняет точный процент и явно использует sRGB; фон предпросмотра не экспортируется.

Введите процент с точкой или запятой и не более чем одним десятичным знаком. Позиции должны идти по порядку. Редактор поддерживает 2–8 точек, а не все возможности CSS.

Примеры

Для фона слева направо выберите линейный градиент 90° с красной точкой на 0% и синей на 100%.

Для резкой границы задайте разным цветам одинаковую позицию. Порядок строк определяет переход.

Для затухающего радиального фона выберите круг и непрозрачность внешнего цвета 0%. Проверьте светлый и тёмный фон: он не экспортируется.

Ограничения предпросмотра

Создаётся один линейный или радиальный градиент sRGB. Произвольный CSS, конические, повторяющиеся, сетчатые, графические и анимированные фоны не поддерживаются.

Браузер без поддержки явного синтаксиса интерполяции не покажет предпросмотр, но код можно скопировать. Замена не подставляется.

Размер, фон, браузер и дисплей влияют на вид. Одинаковые пиксели, контраст и цветопередача печати не гарантируются.

Некоторые положения центра и ближайшие размеры дают вырожденный результат. При ошибке текущий результат исчезает.

Градиент остаётся на странице

Редактирование и генерация выполняются на странице без загрузки значений. Черновики не сохраняются. Копирование и скачивание выполняются только по вашему выбору; действует общая политика конфиденциальности сайта.

Вопросы о CSS-градиентах

От 2 до 8 точек с отдельными цветом RGB, непрозрачностью и позицией. Дубликаты сохраняются.

Разместите разные цвета в одной позиции в нужном порядке. Редактор не сортирует и не объединяет точки.

Нет, это только фон предпросмотра. Экспорт содержит одно объявление background-image.

Проверьте размер элемента, фон и поддержку браузера: они влияют на отображение.

Нет. CSS сохраняет точный процент отдельно от RGB, без округления до альфа-байта.

gradient.css содержит то же полное объявление в UTF-8 без BOM и конечного перевода строки.

Источники и метод

Спецификации CSS описывают геометрию градиентов, интерполяцию цветов и сериализацию.

Один десятичный знак — ограничение редактора. Эти документы не подтверждают поддержку или точность браузера.

SVG в PNG

Преобразуйте SVG-файл или вставленный код в PNG: задайте размер, прозрачный фон или цвет и используйте встроенные шрифты.

Открыть инструмент — SVG в PNG

Генератор CSS-фильтров

Настройте порядок эффектов, сравните образец и скопируйте объявление filter.

Открыть инструмент — Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.

Открыть инструмент — Калькулятор плавного размера шрифта

Генератор CSS-кнопок

Настройте состояния кнопки, проверьте фокус клавиатуры и скопируйте HTML и CSS.

Открыть инструмент — Генератор CSS-кнопок

Генератор CSS border-radius

Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.

Открыть инструмент — Генератор CSS border-radius

Генератор CSS Grid

Создайте пример CSS Grid с дорожками, размещением и именованными областями. Просматривайте, копируйте CSS и HTML или скачивайте полный пример.

Открыть инструмент — Генератор CSS Grid

Генератор CSS Flexbox

Создайте пример Flexbox с элементами управления контейнером и элементами, явными осями макета, соответствующими CSS и HTML, а также локальной загрузкой полного примера.

Открыть инструмент — Генератор CSS Flexbox

Генератор CSS-тени текста

Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.

Открыть инструмент — Генератор CSS-тени текста

Генератор преобразований CSS

Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.

Открыть инструмент — Генератор преобразований CSS

Генератор теней CSS

Создавайте упорядоченные слои box-shadow с предпросмотром и копируйте код.

Открыть инструмент — Генератор теней CSS

Водяной знак на изображениях

Добавьте текст или логотип к изображениям, проверьте результаты и скачайте отдельные файлы или ZIP.

Открыть инструмент — Водяной знак на изображениях

Конвертер цветов

Преобразуйте поддерживаемые значения sRGB HEX, RGB и HSL с альфа-каналом и указанной точностью.

Открыть инструмент — Конвертер цветов

Изображение в текст (OCR)

Распознавайте печатный текст на локальных PNG и JPEG, выбирайте язык и проверяйте результат перед копированием или скачиванием.

Открыть инструмент — Изображение в текст (OCR)

Чтение QR-кода из изображения

Прочитайте один QR-код из локального PNG или JPEG и проверьте текст или байты, не открывая ссылки.

Открыть инструмент — Чтение QR-кода из изображения

Проверка контрастности цветов

Сравните цвета переднего плана и фона, настройте непрозрачность и проверьте числовые пороги контрастности WCAG для текста и важных деталей интерфейса.

Открыть инструмент — Проверка контрастности цветов