Besplatni pretvarač

CSS Gradijent Generator

Vizualno generirajte CSS gradijente s pregledom uživo. Stvorite linearne, radijalne i konusne gradijente s prilagođenim graničnicima boja — besplatno i na strani klijenta.

Pregled uživo
CSS izlaz
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Kut (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

O ovom alatu

Stvorite prekrasne CSS linearne i radijalne gradijente pomoću vizualnog uređivača. Odaberite boje, prilagodite zaustavljanja, promijenite smjer ili kut i pogledajte ažuriranje pregleda uživo u stvarnom vremenu. Kopirajte generirani CSS kod — uključujući prefikse dobavljača za starije preglednike — i zalijepite ga izravno u svoju tablicu stilova.

Kako koristiti

  1. Odaberite vrstu gradijenta: linearni ili radijalni.
  2. Dodajte granice boje klikom na traku gradijenta i odabirom boja.
  3. Podesite kut gradijenta (linearno) ili položaj (radijalno) pomoću kontrola.
  4. Kopirajte generirani CSS kod s izlazne ploče.

Često postavljana pitanja

Rade li CSS gradijenti u svim preglednicima?
Moderni CSS gradijenti (linearni gradijent, radijalni gradijent) podržani su u svim trenutnim preglednicima uključujući Chrome, Firefox, Safari i Edge. Alat po izboru može generirati prefikse -webkit- za starije verzije preglednika.
Mogu li stvoriti višebojne prijelaze?
da Dodajte onoliko graničnika u boji koliko vam je potrebno. Također možete prilagoditi položaj svakog zaustavljanja kako biste kontrolirali gdje se boje stapaju. To omogućuje složene gradijente duge, zalaza ili prilagođene marke.
Koja je razlika između linearnih i radijalnih gradijenata?
Linearni gradijenti prelaze boje duž ravne linije (odozgo prema dolje, slijeva nadesno, dijagonalno ili pod bilo kojim kutom). Radijalni gradijenti prelaze boje prema van od središnje točke u kružnom ili eliptičnom obliku.
Mogu li koristiti gradijent kao pozadinu za tekst?
da Koristite background-clip: text s -webkit-text-fill-color: transparent za primjenu gradijenta na tekst. Generirani CSS pruža definiciju gradijenta — kombinirajte je s ovim svojstvima za gradijentni tekst.