Градиент генераторы

Сызықтық, радиалды немесе конустық градиент жасаңыз, түс нүктелерін қосып, бағытын орнатыңыз, содан кейін CSS кодын бір басумен көшіріп алыңыз.

Градиент түрі
Түс нүктелері
CSS
Градиентті реттеу үшін нүктелер мен бағытты баптаңыз.

Әрбір градиент тікелей браузеріңізде жасалады. Мұнда орнатқан ештеңе BroBroGo серверіне жүктелмейді.

Жиі қойылатын сұрақтар

Сызықтық, радиалды және конустық градиенттердің айырмашылығы неде?

Сызықтық (linear) градиент түстерді сіз бұрышпен бағыттаған түзу сызық бойымен араластырады. Радиалды (radial) градиент оларды орталықтан сыртқа қарай шеңбер немесе эллипс түрінде таратады. Конустық (conic) градиент оларды түстер палитрасы сияқты орталықтың айналасында айналдыра орналастырады.

Түс нүктелері (color stops) дегеніміз не?

Әрбір түс нүктесі — бұл градиент бойындағы белгілі бір позицияға бекітілген түс (басында 0%, соңында 100%). Түстің ең айқын тұсын жылжыту үшін нүктені қозғаңыз немесе байытылған градиент үшін көбірек нүкте қосыңыз. Сегізге дейін нүкте қолдануға болады.

Бағытты қалай басқарамын?

Сызықтық немесе конустық градиент үшін бұрыш жүгірткісі бағытты орнатады — 0° жоғары қарайды, 90° оңға қарайды. Радиалды градиенттің бұрышы болмайды; оның орнына оның қалай таралатынын өзгерту үшін шеңбер немесе эллипс пішінін таңдаңыз.

CSS Cubic Bezier генераторыАнимация қисығын жасау үшін екі тұтқаны тартыңыз, нүктенің қозғалысын қалыпты қозғалыспен салыстыра отырып бақылаңыз және cubic-bezier() мәнін көшіріп алыңыз.Box Shadow генераторыЖүгірткілерді тартып box-shadow жасаңыз, тереңдік үшін қабаттарды біріктіріңіз және дайын CSS кодын лезде көшіріп алыңыз.Border Radius генераторыЖүгірткілердің көмегімен әр бұрышты жұмырлаңыз, эллипстік режиммен табиғи пішіндер жасаңыз және CSS кодын лезде көшіріп алыңыз.Flexbox генераторыВизуалды басқару элементтерімен flex контейнерін және оның элементтерін баптаңыз, орналасудың тікелей өзгеруін бақылаңыз және CSS кодын бір басумен көшіріп алыңыз.CSS Grid генераторыБағандар мен жолдарды орнатыңыз, элементтерді орналастыру үшін ұяшықтар бойымен тартыңыз және бір басумен сәйкес HTML коды бар CSS тор кодын көшіріп алыңыз.CSS clamp() калькуляторыКіші және үлкен экрандар үшін өлшемді енгізіп, олардың арасында бірқалыпты өзгеретін икемді clamp() мәнін алыңыз — қаріп өлшемдері, ішкі/сыртқы шегіністер немесе аралықтар үшін.Түс түрлендіргішТүстерді HEX, RGB, HSL, HSV, CMYK және LAB арасында түрлендіріңіз — кез келген өрісті өзгертсеңіз, қалғандары бірден жаңарады.CSS әдемілегіш және минификаторРетсіз CSS кодын оқу үшін шегіністерін реттеңіз немесе ережелердің ретін ешқашан өзгертпейтін қауіпсіз режимде минификациялаңыз.Контраст тексергішWCAG контраст қатынасын және қандай AA мен AAA деңгейлерінен өтетінін көру үшін мәтін мен фон түсін енгізіңіз.