Preview

Generirani CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Kontrole gradijenta

135°
0%
100%

Popularne unaprijed postavljene postavke

Primjeri gradijenta

Istražite ove zapanjujuće primjere gradijenta i inspirirajte se za svoj sljedeći projekt. Kliknite na bilo koji gradijent da biste ga učitali u generator.

Rumenilo zalaska sunca

Topli gradijent inspiriran prekrasnim zalascima sunca.

Oceanski povjetarac

Miran gradijent koji evocira osjećaj obalnih voda.

Fuzija metvice

Svjež i moderan gradijent koji kombinira mentu i nebesko plavo.

Bujni vrt

Živahni gradijent koji predstavlja ljepotu prirode.

Kozmički san

Čarobni gradijent inspiriran noćnim nebom.

Zlatni sat

Topli gradijent koji hvata bit sumraka.

Dokumentacija gradijenta

Što su CSS gradijenti?

CSS gradijenti omogućuju vam prikaz glatkih prijelaza između dvije ili više boja. Mogu se koristiti kao pozadina za elemente i dolaze u tri različite vrste:

  • Linearni gradijenti:Prijelazne boje duž ravne linije.
  • Radijalni gradijenti:Prijelaz boja od središnje točke prema van.
  • Konusni gradijenti:Prijelaz boja oko središnje točke u krugu.

Kako koristiti gradijente

Nakon što generirate gradijent pomoću našeg alata, možete koristiti CSS kod u svojim projektima:

  1. Kopirajte CSS kod iz generatora.
  2. Zalijepite ga u svoju CSS datoteku ili ga upotrijebite u svojim HTML elementima.
  3. Primijenite gradijent na bilo koji element pomoćubackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Koristite više od dvije boje za složeniji efekt gradijenta.
  • Prilagodite položaje boja kako biste kontrolirali gdje se pojavljuju prijelazi.
  • Kombinirajte više gradijenata za još kreativnije efekte.
  • Za stožaste gradijente promjena središta stvara zanimljive uzorke.
  • Spremite svoje omiljene gradijente za kasniju upotrebu.

Podrška za preglednike

CSS gradijenti široko su podržani u modernim preglednicima. Međutim, stariji preglednici poput Internet Explorera možda ih neće ispravno prikazati. Uvijek osigurajte rezervnu boju:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

O ovom alatu

Naš CSS Gradient Generator dizajniran je kako bi pomogao programerima i dizajnerima da bez napora stvore prekrasne gradijente. Bilo da radite na web stranici, aplikaciji ili samo želite eksperimentirati s bojama, ovaj alat olakšava generiranje savršenog gradijenta za vaš projekt.

Features

Jednostavan za korištenje

Intuitivno sučelje za stvaranje gradijenata.

Responzivni dizajn

Savršeno radi na svim veličinama zaslona.

Spreman za kopiranje i lijepljenje

Odmah očistite CSS kod.

Dostupne unaprijed postavljene postavke

Započnite s prekrasnim unaprijed definiranim gradijentima.

Related Tools

Pretvarač olovke u CSS

Transform your SCSS code into CSS. Fast, easy, and secure.

CSS Minifier

Komprimirajte i optimizirajte svoj CSS kod s profesionalnom preciznošću

Stvorite prekrasne CSS gradijente bez napora

Generirajte zapanjujuće linearne, radijalne i stožaste gradijente pomoću našeg intuitivnog sučelja. Kopirajte CSS kod i odmah ga upotrijebite u svojim projektima.

Mrežni alat za generator CSS stupaca

Stvaranje i vizualizacija prilagođenih CSS funkcija olakšavanja

Univerzalni pretvarač jedinica

Pretvarajte između različitih jedinica u više kategorija s preciznošću za sve svoje potrebe

Pretvarač CSV u Base64

Brzo i jednostavno pretvorite svoje CSV podatke u Base64 kodiranje