Tool overview
Что такое Генератор CSS-градиентов?
Генератор CSS-градиентов — инструмент, который помогает создавать многоточечные linear, radial и конические CSS-градиенты с OKLCH и экспортом Tailwind.
Зачем использовать Генератор CSS-градиентов?
Повышает читаемость и скорость работы, когда нужно создавать многоточечные linear, radial и конические CSS-градиенты с OKLCH и экспортом Tailwind, без отправки данных на сервер.
Ключевые возможности
Конфиденциальность на стороне клиента, мгновенный результат и копирование в один клик. создавать многоточечные linear, radial и конические CSS-градиенты с OKLCH и экспортом Tailwind
Как использовать
Следуйте этим шагам, чтобы получить точные результаты с инструментом выше.
- Выберите linear, radial или конический и добавьте цветовые стопы на живом превью.
- Настройте угол или позицию центра, включите OKLCH для более плавных смесей и при необходимости сравните с sRGB.
- Скопируйте CSS, произвольные классы Tailwind или CSS-свойства — либо ссылку для последующего восстановления градиента.
- Вставьте существующее объявление background: linear-gradient(...) в «Импорт CSS», чтобы восстановить стопы.
- Откройте конвертер цветов или WCAG Contrast в связанных инструментах, чтобы проверить цвета стопов.
Гид по генератору CSS-градиентов: linear-gradient, OKLCH, конический и Tailwind
С этим бесплатным генератором собирайте многоточечный CSS linear-gradient, radial-gradient и conic-gradient с интерполяцией OKLCH (CSS Color 4), fallbacks @supports, классами Tailwind и ссылками для обмена.
Линейные градиенты
Угол в градусах с неограниченным числом стопов, позиций и непрозрачности. Опциональная интерполяция in oklch.
Радиальные градиенты
Круг или эллипс от процентного центра с многоточечными цветовыми рампами.
Конические градиенты
Цвета вращаются вокруг центра с углом from — для круговых диаграмм и радуг.
Многоточечный цвет и непрозрачность
Добавляйте, удаляйте, инвертируйте или рандомизируйте стопы; импортируйте вставленный background CSS.
Интерполяция цвета OKLCH
По умолчанию перцепционные смеси с sRGB-fallback через @supports для старых браузеров.
CSS, Tailwind и CSS-переменные
Экспорт background CSS, произвольных классов Tailwind или свойств :root.
Ссылки для обмена и импорт CSS
Синхронизация конфигурации в ?g= / #g= и восстановление из вставленного CSS градиента.
Передача доступности
Глубокие ссылки выбранных стопов в WCAG Contrast и конвертер цветов.
Текст с CSS-градиентом
Экспортируйте градиент и примените с background-clip: text и прозрачным цветом текста (-webkit-background-clip: text для Safari).
Рамка с CSS-градиентом
Наложите экспортированный градиент на обёртку с padding и внутренним сплошным фоном или border-image с тем же градиентом.
Анимация CSS-градиентов
Экспортируйте статичный CSS здесь, затем анимируйте background-position или кастомные свойства в таблице стилей.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Часто задаваемые вопросы
Развёрнутые ответы на типичные проблемы отладки и вопросы конфиденциальности данных.
Официальная документация и ссылки
Авторитетные спецификации и документация платформы для этой утилиты.