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

Създайте линеен, радиален или коничен градиент, добавете цветни точки, задайте посоката и копирайте готовия CSS с едно щракване.

Тип градиент
Цветни точки
CSS
Регулирайте точките и посоката, за да оформите градиента си.

Всеки градиент се рендерира директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.

ЧЗВ

Каква е разликата между линеен, радиален и коничен градиент?

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

Какво представляват цветните точки (color stops)?

Всяка цветна точка (color stop) е цвят, фиксиран на определена позиция по протежение на градиента — 0% в началото, 100% в края. Преместете точка, за да промените мястото, където нейният цвят достига пик, или добавете още точки за по-богато преливане. Можете да използвате до осем точки.

Как да контролирам посоката?

За линеен или коничен градиент плъзгачът за ъгъл задава посоката — 0° сочи нагоре, 90° сочи надясно. Радиалният градиент няма ъгъл; вместо това изберете форма на кръг или елипса, за да промените начина, по който се разпространява.

CSS Cubic Bezier ГенераторПлъзнете двете дръжки, за да оформите крива на ускорение, наблюдавайте движението на точката спрямо постоянна скорост и копирайте cubic-bezier() стойността.Генератор на Box ShadowПлъзгайте регулаторите, за да оформите box-shadow, наслагвайте слоеве за дълбочина и копирайте готовия CSS веднага.Генератор на Border RadiusЗаобляйте всеки ъгъл с плъзгачи, оформяйте органични петна с елиптичния режим и копирайте CSS кода мигновено.Генератор на FlexboxНастройте flex контейнер и неговите елементи с визуални контроли, наблюдавайте промените в реално време и копирайте CSS кода с едно щракване.CSS Grid ГенераторНастройте Вашите колони и редове, плъзнете по клетките, за да разположите елементи, и копирайте CSS кода с подходящ HTML с едно щракване.CSS clamp() КалкулаторВъведете размер за малки и големи екрани и получете адаптивна clamp() стойност, която се мащабира плавно между тях — за шрифтове, отстояния, маржове или празнини.Цветови конверторКонвертирайте цветове между HEX, RGB, HSL, HSV, CMYK и LAB — редактирайте едно поле и останалите се обновяват в реално време.CSS форматиране и минифициранеПренаредете разхвърляния CSS за лесно четене или го минифицирайте за по-бързо зареждане — с безопасен режим, който никога не променя реда на правилата Ви.Проверка на контрастаВъведете цвят на текста и фона, за да видите съотношението на контраста по WCAG и кои нива AA и AAA се покриват.