Генератор градијената (Gradient Generator)

Креирајте линеарни, радијални или конусни градијент, додајте боје и подесите смер, па копирајте CSS код једним кликом.

Врста градијента
Тачке прелаза боја
CSS
Прилагодите тачке прелаза и смер да бисте обликовали градијент.

Сваки градијент се исцртава директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo.

Честа питања

Која је разлика између линеарних, радијалних и конусних градијената?

Линеарни градијент прелива боје дуж праве линије под одређеним углом. Радијални градијент их шири кружно или елиптично из центра ка споља. Конусни градијент их ротира око централне тачке, слично точковима боја.

Шта су то тачке прелаза боја?

Свака тачка прелаза (color stop) представља боју фиксирану на одређеној позицији дуж градијента — 0% на почетку, 100% на крају. Померите тачку да бисте променили где је та боја најизраженија, или додајте нове тачке за сложеније преливе. Можете користити до осам боја.

Како да контролишем смер градијента?

Код линеарних или конусних градијената, клизач за угао одређује смер — 0° је усмерено нагоре, а 90° надесно. Радијални градијент нема угао; уместо тога изаберите облик круга или елипсе да бисте дефинисали како се боје шире.

Генератор CSS Cubic Bezier кривихПревуците две ручице да бисте обликовали криву анимације, упоредите кретање са константном брзином и копирајте cubic-bezier() вредност.Генератор сенки (Box Shadow)Подесите клизаче да бисте креирали сенку, додајте слојеве за већу дубину и одмах копирајте готов CSS код.Генератор заобљености углова (Border Radius)Заоблите сваки угао помоћу клизача, обликујте органске форме уз елиптични режим и одмах копирајте CSS код.CSS Flexbox ГенераторПодесите flex контејнер и његове ставке помоћу визуелних контрола, пратите промене уживо и копирајте CSS једним кликом.CSS Grid ГенераторДефинишите колоне и редове, превуците преко ћелија да бисте поставили ставке и копирајте готов CSS и пратећи HTML код једним кликом.CSS clamp() КалкулаторУнесите величину за мале и велике екране и добијте флуидну clamp() вредност која се глатко прилагођава — за величину фонта, унутрашње и спољашње маргине или размаке.Конвертор бојаКонвертујте боје између HEX, RGB, HSL, HSV, CMYK и LAB формата — измените било које поље и остала се тренутно прилагођавају.CSS Beautifier & MinifierПоново увуците неуредан CSS ради лакшег читања или га минификујте за слање — уз безбедан режим који никада не мења редослед ваших правила.Провера контраста (Contrast Checker)Унесите боју текста и позадине да бисте израчунали WCAG однос контраста и проверили усклађеност са AA и AAA нивоима.