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

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

Цветови спирки

Използвайте дръжките на спирките или клавишните стрелки за редактиране на позиции. Всяка спирка включва изричен цвят, прозрачност и процент.

Готов

Браузърно-местна обработка

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

Ограничена граматика за внос

Импортирането приема linear-gradient(), radial-gradient() или conic-gradient() с шестнадесетични цветове и проценти. Декларации, URL адреси, променливи и неизвестни функции се отхвърлят локално.

Достъпни паунда

Генерираният CSS включва плътен резервен фонов цвят заедно с градиента за неподдържани рендери и достъпен контролен интерфейс.

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

Дали моят градиент се качва?

Не. Състоянието на градиента, цветовете, импортираният CSS и генерираният CSS остават в браузъра ви.

Кои типове CSS градиенти се поддържат?

Генераторът създава linear-gradient(), radial-gradient() и conic-gradient() изход с множество шестнадесетични цветови спирки.

Какво мога да импортирам?

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

Свързани инструменти за разработчици и дизайн

Инструменти за разработчициРазгледайте помощните програми на браузъра CSS Конвертор на цветовеКонвертиране на CSS цвята SCSS КомпилаторКомпилирайте Sass/SCSS фрагменти онлайн CSS МинификаторКомпресирайте CSS код локално в браузъра си. Снимка на цветовете PickerИзберете цветове от изображения локално.

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

Изградете линейни или радиални CSS градиенти и прегледайте цветовите спирки, ъгъла, позицията и повторението.

Вход
тип градиент, цветови спирания, позиции, ъгъл и настройки за повторение.
Изход
Преглед на живо и копие на CSS фонова декларация.
Реални ограничения
Рендирането в браузъра може леко да се различава според двигателя, а инструментът не оценява контраст или гарантира поддръжка в наследени браузъри.
Поверителност и обработка на данни
тип на градиента, цветови спирания, позиции, ъгъл и настройки за повторение се обработват в този раздел на браузъра. Convertr не получава или съхранява данните; затварянето или презареждането на страницата изчиства работното състояние, освен ако инструментът изрично предлага локално изтегляне.

Как да използваме този инструмент

  1. Осигурете тип на градиента, цветови спирания, позиции, ъгъл и настройки за повторение в контролите на инструмента.
  2. Изберете настройките, които влияят на преглед на живо и копируема CSS декларация за фон, след което изпълнете инструмента.
  3. Прегледайте жив преглед и копируема CSS фонова декларация, преди да я копирате или изтеглите.

Често срещани режими на отказ

Липсата на цветова спирка, невалиден цвят или несъвместима позиция възпрепятства изграждането на валидна CSS декларация.

Полезен пример

Създайте 90-градусов линеен градиент от #111827 на 0% до #f59e0b на 100% и копирайте декларацията.