---

Какво е CSS градиент?

CSS градиентите ви позволяват да показвате плавни преходи между два или повече цвята без да използвате файлове с изображения. Предлагат се в три вида: linear-gradient (по права линия), radial-gradient (излъчващ се от централна точка) и conic-gradient (обикалящ около централна точка). Градиентите се използват за фонове, бутони, наслагвания и декоративни елементи.

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

1. Изберете предварителна настройка от мострите или конфигурирайте собствен градиент.

2. Изберете типа на градиента: linear, radial или conic.

3. Регулирайте ъгъла (за linear/conic) или формата (за radial).

4. Редактирайте цветовите спирки — променяйте цветовете и позициите (0–100%).

5. Добавяйте или премахвайте цветови спирки при нужда.

6. Копирайте CSS и го поставете в стиловата си таблица.

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

Как да направя прозрачен градиент? Използвайте rgba() или hsla() цветни стойности с алфа канал от 0 за пълна прозрачност. Например, цветна точка rgba(0,0,0,0) е напълно прозрачен черен, полезен за угасващи наслагвания върху изображения.

Как да създам твърдо цветно спиране (без преход)? Поставете две цветни точки на същото място — едната завършва и едната начало в тази точка. Например, червено 50%, синьо 50% създава моментален преход от червено към синьо в средната точка без преход на градиент.

Кои браузъри поддържат конични градиенти? Коничните градиенти се поддържат във всички модерни браузъри (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Те не се поддържат в Internet Explorer.

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

Keywords: генератор на CSS градиент, линеен градиент, радиален градиент, коничен градиент, генератор на CSS фон, избор на цвят за градиент, инструмент за CSS градиент