Перейти к содержанию
TextArray
100% локально

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

Создавайте объявления линейных и радиальных градиентов CSS с настраиваемыми цветами и углами.

Выходные данные

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

Генератор градиентов CSS создает объявления фонового градиента за считанные секунды. Линейные градиенты текут в одном направлении и идеально подходят для нежных фонов или привлекательных наложений. Радиальные градиенты исходят из центральной точки и идеально подходят для эффектов прожектора или плавных цветовых переходов. Выберите тип градиента, установите угол для линейных градиентов (0–360 градусов) и выберите два цвета — шестнадцатеричные коды, RGB, RGBA или именованные цвета — все работает. Инструмент генерирует полное свойство фона CSS, готовое для вставки в вашу таблицу стилей.

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

Все работает в вашем браузере, поэтому ваш выбор цвета и настройки остаются конфиденциальными. Никакие данные никуда не отправляются. Инструмент также работает в автономном режиме, поэтому вы можете создавать градиенты где угодно и когда угодно. Независимо от того, разрабатываете ли вы веб-сайт, создаете прототип приложения или просто экспериментируете с цветовыми сочетаниями, этот генератор ускоряет ваш рабочий процесс. Настройте угол, поменяйте цвета и мгновенно увидите обновление CSS.

FAQ

Что такое градиент CSS?
CSS-градиент — это плавный переход цвета, отображаемый непосредственно браузером. Линейные градиенты переходят вдоль линии; радиальные градиенты исходят из центральной точки. Оба они легкие, масштабируемые и могут быть анимированы.
Какой угол я использую для разных направлений?
Для линейных градиентов: 0° — слева направо, 90° — сверху вниз, 180° — справа налево, 270° — снизу вверх. Подойдет любой угол от 0 до 360 градусов. Радиальные градиенты не используют угол.
Могу ли я использовать любой цветовой формат?
Да. Шестнадцатеричные коды (#FF0000), RGB (rgb(255, 0, 0)), RGBA с прозрачностью (rgba(255, 0, 0, 0,5)), HSL и именованные цвета (красный, синий) работают с градиентами CSS.
Отправляются ли куда-нибудь мои данные о цвете?
Нет. Этот инструмент полностью работает в вашем браузере. Ваши цвета, углы и настройки никогда не покидают ваше устройство.