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.

Napisao i pregledao urednički tim BroBroGo.Zadnje ažuriranje:

Osnove CSS gradijenata i njihova primjena

Gradijenti u CSS-u omogućuju glatke prijelaze između dviju ili više boja, zamjenjujući statične jednobojne pozadine dinamičnim vizualnim elementima. U modernom web dizajnu, ovi se prijelazi koriste za oblikovanje pozadina elemenata, gumba i drugih grafičkih komponenti sučelja.

Ovisno o željenom vizualnom efektu, CSS podržava različite geometrijske rasporede boja. Generator gradijenata omogućuje izradu triju osnovnih vrsta gradijenata: linearnih, radijalnih i konusnih. Svaka vrsta koristi specifična matematička pravila za iscrtavanje prijelaza boja na temelju definiranih parametara kao što su kut, oblik i točke boja.

Razumijevanje linearnih gradijenata: Smjer i točke boja

Linearni gradijent stapa boje duž ravne linije. Smjer te linije određuje se pomoću kuta koji definira korisnik.

Pravila za postavljanje smjera i ponašanje boja kod linearnog gradijenta uključuju:

  • Kut usmjeravanja: Klizač kuta postavlja smjer u kojem se boje kreću. Vrijednost od 0° usmjerava gradijent prema gore, dok vrijednost od 90° usmjerava gradijent prema desno.
  • Početak i kraj: Prva točka boje nalazi se na početku linije (0%), dok se zadnja nalazi na kraju linije (100%). Sve ostale točke raspoređuju se između tih vrijednosti.

Ova vrsta gradijenta najčešće se koristi za klasične pozadine koje simuliraju prirodni pad svjetlosti odozgo prema dolje ili s jedne strane na drugu.

Istraživanje radijalnih gradijenata: Oblici i raspodjela boja

Za razliku od linearnih prijelaza, radijalni gradijent širi boje prema van iz središta. Kod ove vrste gradijenta ne koristi se kut za usmjeravanje, već se geometrija definira odabirom oblika.

Korisnik može odabrati dva osnovna oblika za radijalni gradijent:

  • Elipsa: Boje se šire u obliku elipse, prilagođavajući se omjeru stranica elementa.
  • Krug: Boje se šire u pravilnom kružnom obliku bez obzira na dimenzije samog elementa.

Raspodjela boja kreće se od središnje točke (koja predstavlja početak gradijenta na 0%) prema vanjskim rubovima (koji predstavljaju kraj na 100%). Radijalni gradijenti korisni su za stvaranje efekta osvjetljenja, dubine ili sfernih oblika na stranici.

Konusni gradijenti: Rotacija oko središnje točke

Konusni (conic) gradijent stvara prijelaz koji se okreće oko središnje točke, slično izgledu kotača boja ili radarskog zaslona.

Karakteristike konusnog gradijenta su:

  • Kut rotacije: Poput linearnog gradijenta, konusni gradijent koristi kut za određivanje početne točke zakreta. Kut od 0° postavlja početak gradijenta prema gore, a kut od 90° prema desno.
  • Kretanje boja: Boje se ne šire prema van niti duž ravne linije, već se "metu" u smjeru kazaljke na satu oko središta, počevši od definiranog kuta.

Ovaj efekt je pogodan za izradu kružnih grafikona, indikatora napretka ili specifičnih dekorativnih elemenata u web dizajnu.

Uloga točaka boja u dizajnu gradijenta

Točke boja (color stops) ključni su elementi koji određuju koje će se boje pojaviti u gradijentu i na kojim točno mjestima. Svaka točka sastoji se od dvije komponente: same boje i njezinog položaja izraženog u postocima od 0% do 100%.

Pravila za upravljanje točkama boja u ovom alatu su:

  • Početne postavke: Inicijalni gradijent sadrži dvije točke boja: #6366f1 na položaju 0% i #ec4899 na položaju 100%.
  • Dodavanje novih točaka: Korisnik može dodati nove točke boja kako bi stvorio složenije prijelaze. Svaka novododana točka automatski dobiva zadani položaj od 50%.
  • Ograničenje broja točaka: Alat omogućuje korištenje najviše osam točaka boja. Kada je aktivno svih osam točaka, gumb "Dodaj točku" postaje onemogućen.

Pravilnim rasporedom točaka može se postići oštar prijelaz između boja (postavljanjem dviju različitih boja na isti ili vrlo bliski postotak) ili iznimno blago i postupno stapanje kroz cijeli raspon od 0% do 100%.

Kako učinkovito koristiti Generator gradijenata

Alat je dizajniran za brzu izradu i prilagodbu CSS koda kroz vizualno sučelje. Proces rada sastoji se od nekoliko jednostavnih koraka:

  1. Odabir vrste gradijenta: Unutar odjeljka "Vrsta gradijenta" odaberite opciju "Linearni", "Radijalni" ili "Konusni (Conic)".
  2. Podešavanje geometrije: Ako ste odabrali linearni ili konusni gradijent, pomoću klizača postavite željeni "Kut". Ako radite s radijalnim gradijentom, u odjeljku "Oblik" odaberite opciju "Elipsa" ili "Krug".
  3. Upravljanje točkama boja: U odjeljku "Točke boja" definirajte boje i njihove položaje. Klikom na gumb "Dodaj točku" unosite novu boju, a neželjene točke možete ukloniti klikom na gumb "Ukloni točku". Za svaku točku možete precizno odrediti "Položaj" i odabrati vrijednost za "Boja točke".
  4. Pregled i kopiranje koda: Tijekom rada, vizualni prikaz gradijenta ažurira se u stvarnom vremenu. Kada postignete željeni izgled, u odjeljku "CSS" kliknite na gumb "Kopiraj CSS". Nakon klika, natpis na gumbu promijenit će se u "Kopiran", što potvrđuje da je generirani CSS kod spremljen u vaš međuspremnik i spreman za umetanje u vašu stilsku datoteku.

Privatnost i obrada podataka

Svaki se gradijent iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo. Svi izračuni, promjene boja, pomaci kutova i generiranje samog CSS koda odvijaju se lokalno na vašem uređaju, bez mrežnih prijenosa podataka prema poslužitelju.

Često postavljana pitanja (FAQ)

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.

Koliko točaka boja mogu dodati u gradijent? Možete dodati najviše osam točaka boja. Kada dosegnete taj broj, gumb za dodavanje novih točaka bit će onemogućen.

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.