Създайте линейни, радиални и конусовидни CSS градиенти от нулата с преместваем контрол на спирките и подбрани пресети. Копирайте готов CSS мигновено.

Визуализация в реално време
Пресети
Тип на градиента
Ъгъл
°
Цветови спирки
Плъзнете манипулатор за преместване на спирка или щракнете върху лентата, за да добавите нова. Изберете спирка, за да редактирате цвета й.
Избрана спирка
%
CSS
background: ;

Всичко се изчислява в реално време в браузъра ви — без регистрация, напълно безплатно.


За Генератор на градиенти

Генераторът на градиент изгражда персонализирани CSS градиенти от нулата. Изберете линеен, радиален или конусен тип, задайте ъгъла и оформете сместа с редактор с множество спирки: плъзгайте дръжки, за да местите спирки, кликнете лентата, за да добавите нови, и прекрасявайте всяка спирка с палитра за избор — живият преглед се обновява, докато работите.

Подбрани готови шаблони ви дават силна отправна точка, когато не искате да започнете от празен лист, а действия с едно кликване — произволно, обратно, завъртане на 45° — правят изследването бързо. Генерираният CSS винаги е видим и остава синхронизиран с прегледа, така че това, което копирате, е точно това, което сте видели.

Всичко се изчислява на живо във вашия браузър безплатно. Копирайте пълното CSS правило или само стойността за фона и я поставете в стилов файл, стил на бутон или секция за герои — прост генератор на CSS градиент за фонове, наслагвания и акценти на интерфейса.

Как да използвате Генератор на градиенти

  1. Изберете тип градиент: линеен, радиален или конусен.
  2. Започнете от готов шаблон или кликнете "Random" за незабавна отправна точка.
  3. Плъзгайте дръжките на спирките, за да позиционирате цветовете, кликнете лентата, за да добавите спирки, и редактирайте цвета на всяка спирка.
  4. Настройте ъгъла, или използвайте "Reverse" и "Rotate 45°", за да преориентирате сместа.
  5. Копирайте CSS правилото или стойността за фона и я поставете в проекта си.

Често задавани въпроси

Да. Инструментът е изцяло от страна на клиента — без регистрация, без кредити и без лимити на това колко градиента изграждате или копирате.

Линейният градиент смесва цветовете по права линия под избрания от вас ъгъл. Радиалният градиент се излъчва навън от централна точка в кръгове. Конусният градиент завърта цветовете около централна точка като кръгова диаграма, което е чудесно за цветни кръгове и индикатори за прогрес.

На градиента са нужни поне две спирки и можете да продължавате да кликвате лентата, за да добавите още. Всяка спирка има собствен цвят и позиция, която може да се плъзга, така че сложни многоцветни смеси се изграждат лесно.

Линейните и радиалните градиенти се поддържат навсякъде. Конусните градиенти се поддържат във всички съвременни браузъри, но не и в много стари, така че предвидете резервен фонов цвят, ако трябва да поддържате стари версии.

Да — използвайте придружаващия инструмент Генератор на градиент от изображение, който извлича доминиращите цветове на качена снимка и ги превръща в редактируеми спирки на градиент. Този инструмент е неговият аналог, работещ от нулата.

Сподели

Популярни търсения
генератор на градиент създаване на css градиент генератор на линеен градиент създаване на радиален градиент коничен градиент css безплатен генератор на градиент
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.