Акысыз CSS градиент генератору

Бул кантип иштейт

Градиент генератору браузерде түз CSS градиент сабдарын курат — китепкана жок, сервер жок, жүктөө жок. Кол менен жазылган функция түс токтомдоруңуздан жана бурчуңуздан реалдуу убакытта туура linear-gradient, radial-gradient же conic-gradient синтаксисин чогултат, андан кийин тандаган чыгуу максатыңызга форматтайт.

1. 1
   Токтомдорду жана багытты конфигурациялаңыз

   Браузердин нативдик түс тандагычы колдонуп 2ден 6гo чейин түс токтому коесуз, андан кийин ар бир токтомду 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 хешине коддолот, ошондуктан аны кыстармага коюсо же бөлүшсө болот.

Байланыштуу куралдар