Генератор CSS градиентов создаёт linear-gradient, radial-gradient и conic-gradient визуально: двигаете ползунки остановок цвета (color stops), выбираете угол, направление, тип — и получаете готовый CSS для копирования в проект. Поддерживается неограниченное число color stops, прозрачность (rgba/hsla), сглаживание цветового пространства (in oklch, in srgb).
Инструмент полезен верстальщикам и frontend-разработчикам: градиент можно вставить в CSS-модуль, Tailwind через `bg-gradient-to-*` с произвольными стопами, Bootstrap-утилиту или CSS-переменные темы. Есть preset-пресеты популярных градиентов (Instagram, Stripe, Spotify), экспорт в CSS-переменные для дизайн-системы и JSON для Figma Tokens.
Поддержка всех современных браузеров — Chrome, Firefox, Safari, Edge. Для линейных градиентов не нужны префиксы, для conic-gradient проверяется совместимость. Код оптимизирован: короткие формы hex, объединение стопов, минификация.
Выберите тип: linear, radial или conic.
Бесплатный виджет с бэклинком на ваш сайт
Загрузка…
Doubao API в 2026 году можно настроить за 5 минут: подключить 19 моделей ByteDance, платить $0.022 за миллион токенов и использовать готовый Python‑клиент.
Надёжную валидацию структурированного вывода LLM в Python можно реализовать с помощью pydantic, jsonschema и кастомных проверок — это гарантирует корректность данных и упрощает отладку.
Для корректного взаимодействия API используйте основные HTTP‑коды: 200 — успех, 201 — создано, 400 — ошибка запроса, 401 — неавторизовано, 404 — не найдено и 500 — ошибка сервера.
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);Добавьте color stops и настройте цвет, прозрачность, позицию.
Задайте угол (для linear) или центр (для radial / conic).
Скопируйте CSS, Tailwind-класс или CSS-переменную.
Все три типа CSS-градиентов в одном редакторе с живым превью.
Добавляйте 2, 3, 5+ остановок цвета — мульти-градиенты для сложных фонов.
Экспорт в `:root { --gradient-hero: ... }` и в синтаксис Tailwind bg-[linear-gradient(...)].
Гладкие переходы без «серой зоны» посередине — современное цветовое пространство.
Скопируйте градиент из Figma — инструмент распознает стопы и углы.
40+ готовых градиентов и история последних 20 ваших вариантов.
Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)
Все файлы обрабатываются локально в вашем браузере для максимальной безопасности
Сохраняйте результат сразу после обработки
Попробуйте разные настройки для оптимального результата
В редакторе нажмите «+» на шкале стопов — добавится новый color stop. Укажите цвет и позицию в процентах. Пример синтаксиса: `linear-gradient(90deg, #f00 0%, #ff0 50%, #00f 100%)`. Число стопов не ограничено.
Radial-gradient расходится от центра во все стороны (как радуга), conic-gradient вращается вокруг точки (как секундная стрелка) — это даёт эффект круговой диаграммы или циферблата.
Поддерживается в Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Для IE 11 и старых Android нужен fallback `background: #color;` перед градиентом.
Либо через утилиты `bg-gradient-to-r from-... via-... to-...`, либо через arbitrary value `bg-[linear-gradient(90deg,#f00,#00f)]`. Мы экспортируем оба варианта.
Современное цветовое пространство OKLCH даёт визуально равномерные переходы без «грязной» серой зоны посередине. Синтаксис: `linear-gradient(in oklch, blue, yellow)`. Поддержка Chrome 111+, Safari 16.4+, Firefox 113+.
Да. Задайте `background-size: 200% 200%` и анимируйте `background-position` через @keyframes. Сам `background-image` анимируется только в современных браузерах с `@property --angle`.
Создайте QR-код из текста, URL или данных