Generator gradijenata

Izgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.

Vrsta gradijenta
Točke boja
CSS
Prilagodite točke i smjer kako biste oblikovali svoj gradijent.

Svaki se gradijent iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Koja je razlika između linearnih, radijalnih i konusnih gradijenata?

Linearni gradijent stapa boje duž ravne linije koju usmjeravate pomoću kuta. Radijalni gradijent širi ih prema van iz središta u obliku kruga ili elipse. Konusni (conic) gradijent rotira ih oko središta poput kotača boja.

Što su točke boje (color stops)?

Svaka točka boje (color stop) je boja fiksirana na određenom položaju duž gradijenta — 0% na početku, 100% na kraju. Pomaknite točku kako biste promijenili mjesto gdje ta boja doseže vrhunac ili dodajte više točaka za bogatije stapanje. Možete koristiti do osam točaka.

Kako mogu kontrolirati smjer?

Za linearni ili konusni gradijent, klizač kuta postavlja smjer — 0° pokazuje prema gore, 90° prema desno. Radijalni gradijent nema kut; umjesto toga odaberite oblik kruga ili elipse kako biste promijenili način na koji se širi.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Pretvarač bojaPretvorite boje između formata HEX, RGB, HSL, HSV, CMYK i LAB — uredite bilo koje polje i ostala se ažuriraju u hodu.CSS uljepšivač i minifikatorPonovno uvucite neuredan CSS radi lakšeg čitanja ili ga minificirajte za objavu — uz siguran način koji nikada ne mijenja redoslijed pravila.Provjera kontrastaUnesite boju teksta i pozadine kako biste vidjeli WCAG omjer kontrasta i koje razine AA i AAA prolaze.