0

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

Създавайте CSS градиенти визуално: линеен, радиален или коничен тип, плъзгач за ъгъл и до шест цветови стопа с live преглед в цяла ширина и готов за копиране код.

🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.

90°
Обработка... 0%

Резултат

Да напишете linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) на ръка и да презареждате страницата, за да го видите, е бавен цикъл. Този генератор го затваря: изберете линеен, радиален или коничен, плъзнете плъзгача за ъгъл, задайте всеки цветови стоп с вграден селектор на цвят и позиция в проценти — а прегледът в цяла ширина се прерисува при всеки вход, като готовото фоново правило е винаги на разположение за копиране.

Трите типа градиенти покриват различни задачи. Линейните градиенти преминават по посока и носят повечето главни секции и бутони; радиалните се разпространяват от центъра за сияния и винетки; коничните обикалят около центъра и захранват кръгови диаграми и цветни колела. Можете да превключвате типа по всяко време — стоповете ви се запазват, така че сравняването на трите отнема секунди.

До шест цветови стопа ви дават място за многоцветни дизайни, а страниците с предварителни настройки предлагат изпитани комбинации — топъл залез, спокоен океан и мека пастелна двойка — като начални точки, които можете да донастроите, вместо да започвате от нула. Обърнете внимание на разпределението на задачите: генераторът на цветови палитри на този сайт избира хармонични плоски цветове, а конверторът на цветови формати превежда стойност между HEX, RGB и HSL, докато този инструмент върши различна работа — превръща избраните цветове в готов CSS градиентен код.

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