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

Изберете цветове и ъгли за генериране на CSS градиент код с живо визуализиране

Новини за обновленияДобавен CSS генератор на градиенти, генериране на код чрез избор на цвят и ъгълПреглед на актуализации

Възможности

Едновременно актуализиране на преглед и код

Промяната на цвета или ъгъла обновява изгледа и CSS кода едновременно

Поддръжка на линейни, радиални и конични градиенти

Точна регулировка на ъгъл, форма и централна позиция за всеки тип

До 10 цвята регулирани чрез влачене

Позицията на цвета се регулира чрез влачене на лента, прозрачността чрез плъзгач

8 предварителни избора и случайна генерация

Начнете с предварителни цветови комбинации или случайни цветове и направете фини настройки

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

Изберете тип

Изберете между линеен, радиален или конични градиент

Изберете цветове

Изберете цветове по цветен код или предварителен избор, добавяйте цветове с "Добавяне на цвят" и регулирайте позицията и прозрачност

Регулирайте посоката

За линейни: задайте ъгъл или посока; за радиални и конични: задайте централна позиция

Копирайте кода

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

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

Създаване на фон за герой изображение

Задайте цвета на фона за началната страница или бутони без писане на код

Избор на цветова гама за блог заглавията

Изберете близка цветова комбинация от предварителния избор и оформете фона на заглавието на статията

Оверлей върху снимка

Създайте полупрозрачен слой чрез намаляване на прозрачността и поставяне над снимката

Регулировка на многоцветни градиенти

Постепенно регулирайте позициите на границите между 3 или повече цвята чрез влачене

Основни знания

Разлики между linear, radial и conic

CSS градиентите имат 3 различни функции с различни начини на променяне на цвета, всички се използват в свойството background.

linear-gradient：linear-gradient е линеен градиент, където цветът се променя по права линия в посочения ъгъл.
radial-gradient：radial-gradient е радиален градиент, където цветът се разпростира от централната позиция в кръг или елипса.
conic-gradient：conic-gradient е конична градиент, където цветът се променя по часовниковата стрелка около централната позиция.

Съответствие между ъгъл и ключови думи за посока

За linear-gradient 0deg е насочен нагоре, а стойностите се увеличават по часовниковата стрелка. Ъгълът може да се напише и с ключови думи като "to right": 90deg е еквивалентно на "to right", а 180deg на "to bottom".

Как се пишат цветови точки и прозрачност

Цветова точка (color stop) е позицията, където се появява даден цвят в градиента; 0% е начало, 100% е край. Например "#3B82F6 0%, #8B5CF6 100%" задава преход от синьо в началото към виолетово в края.

#RRGGBB формат：#RRGGBB формат представя цвята чрез интензивност на червено, зелено и синьо като шестнадесетични цифри: #FF0000 е непрозрачен червен.
rgba формат：rgba формат включва стойности за червено, зелено, синьо (0–255) и прозрачност (0–1): прозрачност 0.5 означава полупрозрачен цвят.