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

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

1. Изберете Вид градиент: Линеен, Радиален или Конусен. Големият преглед най-горе се обновява при всяка промяна.
2. При линеен градиент задайте Ъгъл с плъзгача или го въведете в градуси (90° е отляво надясно, 180° отгоре надолу). При конусен градиент ъгълът е мястото, откъдето започва обхождането.
3. При радиални и конусни градиенти преместете центъра с Център X и Център Y. Радиалният градиент може да е Кръг или Елипса (менюто Форма).
4. Редактирайте Цветови спирки. Щракнете където и да е върху лентата, за да добавите спирка там с цвета, който градиентът вече има в тази точка, или използвайте Добави спирка, за да запълните най-широката празнина. Плъзнете манипулатор, за да го преместите. Всяка спирка има и ред, в който можете да изберете цвета ѝ, да въведете произволен CSS цвят, да зададете Позиция (%) или да я Премахни (градиентът запазва поне две спирки).
5. По желание отметнете Повтарящ се, изберете Интерполация на цветовете, щракнете върху Обърни, за да обърнете спирките, или върху Случаен градиент за вдъхновение.
6. Копирайте резултата от CSS код с бутона Копирай.

Клавиатура: фокусирайте манипулатор върху лентата, после използвайте стрелките, за да го преместите с 1 % (10 % със Shift), Home и End, за да скочите в краищата, и Delete, за да го премахнете.

Инструментът работи във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Трите функции за градиент

• linear-gradient() смесва цветовете по права линия. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) върви от индиго отляво към розово отдясно. Ъглите са по посока на часовниковата стрелка от върха: 0deg сочи нагоре, 90deg надясно.
• radial-gradient() излъчва от централна точка. radial-gradient(circle at 30% 40%, …) поставя центъра на 30 % от лявата страна и 40 % от горната. Елипсата се разтяга с блока, а кръгът остава кръгъл.
• conic-gradient() обхожда около център като стрелките на часовник. conic-gradient(from 0deg at 50% 50%, …) създава цветни кръгове, кръгови диаграми и ефекти на индикатори за зареждане. Позициите на спирките са части от пълния оборот.

Опцията Повтарящ се използва repeating-linear-gradient() и сродните му функции: шарката, определена от вашите спирки, се повтаря, докато блокът се запълни. Поставете последната спирка доста под 100 % (например 20 %), за да видите ивици или пръстени.

Две спирки на една и съща позиция създават рязък ръб вместо преливане, така се правят ивици и знамена. Генераторът държи спирките подредени по позиция в кода, както изисква CSS.

Интерполация в sRGB или OKLCH

По подразбиране браузърите смесват цветовете на градиента в sRGB. Между два наситени цвята, като синьо и жълто, това често създава безличен сив или кален среден тон. CSS Color Level 4 позволява да изберете пространство за интерполация: linear-gradient(90deg in oklch, …) смесва в перцептивното пространство OKLCH и запазва средата жива.

С OKLCH (по-гладък, със sRGB резервен вариант) инструментът записва две декларации background: първо класическата версия в sRGB, после тази в OKLCH. Браузърите, които поддържат пространства за интерполация (Chrome и Edge 111+, Safari 16.2+, Firefox 127+), използват втория ред; по-старите го игнорират и остават с първия.

Съвети

• Цветове с прозрачност се приемат в полетата на спирките, например #00000080 или rgb(0 0 0 / 50%), което е удобно за наслагвания върху изображения.
• Кодът е записан с background. Използвайте background-image вместо него, ако задавате другите свойства на фона поотделно.
• Фините градиенти (два близки нюанса на един цвят) обикновено изглеждат по-професионално от преливания в цветовете на дъгата.