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

Създавайте безплатно красиви CSS градиенти онлайн. Проектирайте линейни и радиални градиенти с множество цветни спирки и копирайте CSS кода мигновено.

Preview
CSS Code

Как работи

  1. Изберете тип градиент – линеен или радиален – според нуждите на вашия дизайн.
  2. Добавете цветови спирки, като кликнете върху плъзгача и изберете желания цвят от палитрата.
  3. Регулирайте ъгъла или посоката на градиента с помощта на въртящия се контрол.
  4. Прегледайте резултата в реално време в областта за предварителен преглед.
  5. Копирайте генерирания CSS код с един клик и го поставете директно в своя проект.

Пример

Вход: Линеен градиент: от #FF6B6B (0%) към #4ECDC4 (100%), ъгъл 135°
Резултат: background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);

ЧЗВ

Да, абсолютно. Цялата обработка се извършва директно във вашия браузър на устройството ви. Никакви данни не се изпращат към сървър.

Да, можете да добавите неограничен брой цветови спирки, за да създадете сложни многоцветни градиенти.

Генерираният код е съвместим с всички съвременни браузъри. Инструментът автоматично добавя необходимите префикси за по-широка съвместимост.

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