Към основното съдържание
LibraTool logoLibraTool

Генератор на CSS градиент — безплатно

Създайте линейни, радиални и конични CSS градиенти с жив преглед. Копирайте CSS с едно кликване.

Работи офлайн след зареждане
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Избягва сивите междинни точки между много различни цветове. Добавя обикновен ред в sRGB като резервен вариант за по-стари браузъри.

0%
100%

Предварително зададени

Често срещани употреби

  • Създаване на градиенти за героически секцииПроектирайте фонове на цялата страница с градиенти за героески секции на уебсайта и целеви страници.
  • Създаване на градиентни бутони и CTAПроектирайте привлекателни фонове на бутони с градиенти за призивите към действие, които се откроават.
  • Създаване на градиентни фонове за картиПроектирайте градиентни запълвания за карти, модални прозорци, странични ленти и фонове на компоненти на UI.
  • Създаване на градиенти за социални медийни графикиПроектирайте живи фонове на градиенти за публикации в Instagram, видео миниатури на YouTube и карти на Twitter.
  • Създаване на цветови скали за диаграмиГенерирайте цветови скали на градиента за топлотни карти, ленти за прогрес и визуализации на данни.

Как работи

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

  1. 1
    Конфигурирайте стопове и посока
    Задавате между 2 и 6 цветови стопа, използвайки нативния избор на цвят на браузъра, след което позиционирате всеки стоп по оста 0–100% с плъзгач за диапазон. За линейни и конични градиенти избирате и ъгъл (0–360°); за радиални градиенти избирате формата (елипса или кръг) и ключовата дума за размер, която контролира до къде се разпростира градиентът.
  2. 2
    buildCss сглобява низа на градиента
    При всяка промяна локална функция buildCss съединява параметрите ви в правилното извикване на CSS функция — напр. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Не участва библиотека; низът се изгражда с обикновена логика на шаблони на JavaScript и се съединява директно от масива на стоповете.
  3. 3
    Прегледът на живо се рендерира чрез вграден стил
    Сглобеният низ на градиента се прилага директно към div елемент като вграден стил за фон, така че собственият CSS двигател на браузъра рендерира прегледа. Не участва нито canvas, нито изображение — това, което виждате, буквално е приложеното CSS свойство.
  4. 4
    Готов за копиране изход в четири формата
    Селектор на формат преобразува същия низ на градиента в обикновен CSS (background: ...), CSS блок с плътен резервен вариант, произволен клас на Tailwind или декларация на SCSS променлива. Кликването върху „Копирай“ записва избрания изход в клипборда чрез navigator.clipboard.writeText. Текущият градиент се кодира и в хеша на URL адреса, така че можете да го отметнете или споделите.

Свързани инструменти

🟦

CSS Grid генератор

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте
↔️

CSS Flexbox генератор

Експериментирайте с flex посока, обвиване, justify и align на живите елементи — и копирайте CSS.

Опитайте
🧮

Матричен калкулатор

Събиране, изваждане, умножение, транспониране, обръщане и редуциране на матрици, плюс детерминанта, ранг, собствени стойности и решаване на Ax = b — до 8×8, с копиране с едно докосване. Безплатно и поверително.

Опитайте

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