Изберете два или повече цвята, плъзнете градиента по ваш вкус, копирайте CSS-а. Или го изтеглете като PNG, за да го използвате като тапет, фон за презентация или фон за публикация в социалните мрежи. Поддържат се линейни, радиални и конични градиенти, както и режим за мрежови градиенти за меките фонове в стил Apple, които виждате в съвременните интерфейси.
Видове градиенти — обяснение
- Линеен: права линия от цвят А до цвят Б. Избор на посока (отгоре→надолу, диагонално и т.н.).
- Радиален: концентричен — цвят А в центъра, преливащ към цвят Б по краищата. Полезен за ефекти на прожектор.
- Коничен: обикаля около централна точка като цветно колело. Модерен в съвременния UI дизайн.
- Мрежов (премиум): множество цветни петна, смесени плавно. Видът „Apple градиент“.
Какво можете да копирате
- CSS: готово за поставяне
linear-gradient(...) или декларация background-image:.
- Tailwind: най-близкия клас
bg-gradient-* плюс всякакви добавки с персонализирани цветове.
- SVG: за мащабируема употреба в икони или UI графики.
- Изтегляне като PNG: всякакъв размер, включително тапет за телефон (1284×2778), десктоп (3840×2160) и квадрат (1080×1080).
Често срещани случаи на употреба
- Тапети за телефон: мрежовите градиенти са много популярни на iOS. Опитайте нашия преглед на тапети за iPhone, за да тествате.
- Фонове за публикации в социални мрежи: незабавен професионален вид за графики с цитати.
- Hero секции: градиентни фонове са навсякъде в началните страници.
- Слайд презентации: заменете скучните едноцветни фонове.
Избор на цветове, които работят
Съседни на цветното колело = фини, хармонични. Противоположни = смели, привличащи вниманието. Добавете трета междинна спирка, за да преодолеете голяма разлика. За градиенти, съобразени с марката, поставете вашия марков HEX код и изберете оттенък или нюанс за втората спирка. Използвайте нашия Конвертор на цветове, за да намерите оттенъци (HSL с по-висока светлота) или нюанси (по-ниска).
Често задавани въпроси
Мога ли да ги използвам в продукция?
Да — копираният CSS работи във всеки модерен браузър. Предоставени са SVG резервни варианти за по-стари цели.
Какво ще кажете за поддръжката на радиални градиенти в браузърите?
Универсални в съвременните браузъри. CSS синтаксисът е един ред.
Колко голям мога да експортирам PNG?
Безплатно: до 4K (3840×2160). Premium: 8K и повече.
Трудни ли са за използване мрежестите градиенти?
В мрежата те са базирани на SVG или canvas. Ние ви предоставяме сплескан PNG за лесна употреба, плюс SVG източника за редактиране.
Мога ли да запазя моите градиенти?
Влезте (безплатно) и запазените градиенти ще се появят във вашата библиотека.
Какво е 'коничен' градиент?
Обхожда около точка — като цветно колело или кръгова диаграма. Съвременният CSS го поддържа естествено.
Работи ли за анимирани градиенти?
Само статичен експорт. За анимирани фонове копирайте CSS и добавете CSS анимация около ъгъла на градиента.
Защо просто не напишеш CSS на ръка?
Можеш — инструментът просто прави визуалната итерация по-бърза. Копирай и редактирай.
Относно Генератор на градиенти
Генератор на градиенти е безплатен онлайн инструмент от Wallpapers.com, който работи изцяло в браузъра ви — без инсталация, без воден знак, без имейл регистрация за първия опит.
Създавайте линейни или радиални градиенти с CSS изход за копиране и поставяне.
Как да използвате Генератор на градиенти
- Изберете цвят от палитрата или поставете HEX / RGB стойност.
- Настройте изхода — палитра, контраст, допълващи цветове.
- Копирайте стойността или експортирайте палитрата като JSON.
Кога да го използвате
Чести случаи на употреба включват:
подготовка на изображения за уеб качване, електронна търговия, социални платформи с ограничения на формата и конвертиране на файлове между устройства или приложения.
Безплатно срещу Премиум
Всеки посетител получава безплатен пробен период; влезлите безплатни потребители имат по-висока дневна квота. Абонирайте се за
Премиум
за неограничени изпълнения, групова обработка до 200 изображения на задача, приоритетна опашка и сърфиране без реклами.
Свързани инструменти
Търсите нещо малко по-различно? Опитайте
Цветово вземане от изображение
,
Palette Extractor
или
Конвертор за сива скала
— или разгледайте всички
Цветови инструменти Инструменти.
