Безплатен конвертор

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

Визуално генерирайте CSS градиенти с визуализация на живо. Създавайте линейни, радиални и конични градиенти с персонализирани цветни ограничители - безплатно и от страна на клиента.

Преглед на живо
CSS изход
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Ъгъл (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

За този инструмент

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

Как да използвате

  1. Изберете тип градиент: линеен или радиален.
  2. Добавете цветни спирачки, като щракнете върху лентата с градиенти и изберете цветове.
  3. Регулирайте ъгъла на градиента (линеен) или позицията (радиален), като използвате контролите.
  4. Копирайте генерирания CSS код от изходния панел.

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

CSS градиентите работят ли във всички браузъри?
Съвременните CSS градиенти (линеен градиент, радиален градиент) се поддържат във всички текущи браузъри, включително Chrome, Firefox, Safari и Edge. Инструментът може по избор да генерира префикси -webkit- за по-стари версии на браузъра.
Мога ли да създавам многоцветни градиенти?
да Добавете толкова цветни спирачки, колкото са ви необходими. Можете също така да регулирате позицията на всяка спирка, за да контролирате къде се смесват цветовете. Това позволява сложни градиенти на дъгата, залеза или персонализирана марка.
Каква е разликата между линейни и радиални градиенти?
Линейните градиенти преливат цветовете по права линия (отгоре надолу, отляво надясно, диагонално или произволен ъгъл). Радиалните градиенти преливат цветовете навън от централна точка в кръгла или елипсовидна форма.
Мога ли да използвам градиента като фон за текст?
да Използвайте background-clip: text с -webkit-text-fill-color: transparent, за да приложите градиента към текста. Генерираният CSS предоставя дефиницията на градиента — комбинирайте го с тези свойства за градиентен текст.