Generator gradijenata

Kreirajte linearni, radijalni ili konusni gradijent, dodajte tačke prekida boje i postavite smjer, a zatim kopirajte CSS jednim klikom.

Vrsta gradijenta
Tačke prekida boje
CSS
Podesite tačke prekida i smjer da oblikujete svoj gradijent.

Svaki gradijent se iscrtava direktno 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 miješa boje duž prave linije koju usmjeravate pomoću ugla. Radijalni gradijent ih širi prema van iz centra u obliku kruga ili elipse. Konusni (conic) gradijent ih rotira oko centra poput točka boja.

Šta su tačke prekida boje (color stops)?

Svaka tačka prekida boje je boja fiksirana na određenoj poziciji duž gradijenta — 0% na početku, 100% na kraju. Pomjerite tačku da promijenite mjesto gdje je ta boja najizraženija, ili dodajte više tačaka za bogatije miješanje. Možete koristiti do osam tačaka.

Kako da kontrolišem smjer?

Za linearne ili konusne gradijente, klizač ugla postavlja smjer — 0° pokazuje prema gore, 90° prema desno. Radijalni gradijent nema ugao; umjesto toga odaberite oblik kruga ili elipse da biste promijenili način na koji se širi.

CSS Cubic Bezier GeneratorPovucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.Generator za Box ShadowPovucite klizače da oblikujete box-shadow, slažite slojeve za dubinu i odmah kopirajte gotov CSS.Generator za Border RadiusZaoblite svaki ugao pomoću klizača, oblikujte organske mrlje pomoću eliptičnog režima i odmah kopirajte CSS.Flexbox GeneratorPostavite flex kontejner i njegove stavke pomoću vizuelnih kontrola, posmatrajte promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite kolone i redove, prevucite preko ćelija da postavite stavke i kopirajte CSS mreže sa odgovarajućim HTML-om jednim klikom.Kalkulator za CSS clamp()Unesite veličinu za male i velike ekrane i dobićete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Konverter bojaKonvertujte boje između HEX, RGB, HSL, HSV, CMYK i LAB formata — uredite bilo koje polje i ostala se ažuriraju u hodu.CSS Beautifier & MinifierPonovo uvucite neuredan CSS radi lakšeg čitanja ili ga minifikujte za brže učitavanje — uz siguran režim koji nikada ne mijenja redoslijed vaših pravila.Provjera kontrastaUnesite boju teksta i pozadine da vidite WCAG omjer kontrasta i koji AA i AAA nivoi zadovoljavaju.