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 форматы қызыл·жасыл·көк күші 2 таңба 16нан сандармен білдіретін түстің жазулары, #FF0000 мәрт емес қызылды білдіреді.
rgba форматы：rgba форматы қызыл·жасыл·көк мәні (0~255) мәрт түстіліктілігіне (0~1) қосынсалған түстің жазулары, мәрт түстіліктілігі 0.5 жартысы мәрт түстіні білдіреді.