Generator CSS gradientov

Kaj je to orodje?

CSS gradienti so slike, ki jih brskalnik ustvari iz seznama barv, ne datoteke, ki jo naložiš — linear-gradient() prehaja barve vzdolž ravne linije pod danim kotom, medtem ko radial-gradient() prehaja barve navzven od osrednje točke. Oba sprejemata dva ali več barvnih postankov, vsak neobvezno pripet na položaj vzdolž gradienta.

Ročno pisani gradienti se zlahka rahlo zmotijo: vrstni red postankov, manjkajoči odstotki ali vrednost kota v napačni smeri (CSS koti tečejo v smeri urinega kazalca od 'to top', za razliko od matematičnih kotov). To orodje umakne sintakso s poti — barve in položaje nastaviš z izbirniki in drsniki, opazuj, kako se predogledni okvir posodablja v realnem času, in kopiraj nastali CSS, ko izgleda pravilno.

Vir: CSS Images Module Level 3, W3C — specifikacija, ki definira sintakso linear-gradient() in radial-gradient().

Zakaj ga uporabiti?

• Živ predogled se posodobi takoj ob vsaki spremembi barve, položaja in kota — strani ni treba ponovno naložiti, da vidiš rezultat.
• Preklopi med linearnim in radialnim gradientom z enim klikom; kontrola kota se pri radialnem gradientu samodejno skrije, kjer ne velja.
• Dodaj ali odstrani barvne postanke (2 do 4) namesto da si omejen na fiksen dvobarvni gradient.
• Vsak postanek ima svoj drsnik položaja, tako da postanki ne morejo biti le enakomerno razporejeni.
• Ustvari za lepljenje pripravljen CSS s standardno sintakso linear-gradient()/radial-gradient().
• Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se nikamor ne naloži. Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

1. Izberi Linearni ali Radialni kot vrsto gradienta.
2. Za linearni gradient povleci drsnik kota — 90deg gre od leve proti desni, 180deg gre od zgoraj navzdol in tako naprej.
3. Nastavi barvo in položaj za vsak postanek; prvi postanek je začetna barva gradienta, zadnji je njegova končna barva.
4. Klikni '+ Dodaj postanek', da dodaš do 4 skupne postanke za večbarvni gradient, ali gumb ✕, da enega odstraniš (najmanj 2).
5. Kopiraj ustvarjen CSS in ga prilepi v deklaracijo background ali background-image.

Primer

Vnos

Linearni · Kot: 90deg · Postanki: #f97316 pri 0%, #ec4899 pri 100%

Rezultat

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Gradient od oranžne do rožnate od leve proti desni — pogost slog za gumbe, pasice in glavne razdelke.

Linearni proti radialnim gradientom

Linearni gradient prehaja barvo vzdolž ravne linije, nadzorovane s kotom — uporaben za pasice, gumbe in usmerjena ozadja. Radialni gradient prehaja barvo navzven od osrednje točke v širitvenih obročih, kar ustreza učinkom žarometa, značkam ali ozadjem v slogu sija. To orodje privzeto nastavi radialni gradient na obliko kroga, centriranega v okvirju, kar pokrije najpogostejšo rabo radialnega gradienta; CSS podpira tudi oblike elipse in izven sredine postavljene položaje, če potrebuješ ročno urediti rezultat naprej.

Pogosti vzorci gradientov

• Subtilen poudarek blagovne znamke: dva bližnja odtenka (npr. dva odtenka iste barve) pod plitvim kotom za mehko ozadje.
• Kontrasten gumb za poziv k dejanju: dve nasičeni, komplementarni barvi pod 90deg ali 135deg za drzen, klikljiv videz.
• Prekrivanje na sliki: gradient od prosojnega do polne barve (nastavi prosojnost prek barve rgba v osnovnem heksu izbirnika ali prilagodi po kopiranju), naložen čez background-image.
• Večbarvni mavrični/blagovni gradient: 3–4 postanki, razporejeni po celotnem razponu 0–100 %, za gladkejše, postopnejše prehode kot pri dvobarvnem gradientu.
• Radialni žaromet: svetel osrednji postanek blizu 0 %, ki pojema v temnejši rob blizu 100 %, uporaben za glavne razdelke ali poudarke kartic.

Kombiniranje z drugimi CSS orodji

Gradienti se pogosto kombinirajo z zaobljenimi koti in sencami na istem elementu — kartica z gradientom, mehko box-shadow in zaobljenimi koti je pogost vzorec vmesnika. Ustvari vsak del posebej in združi deklaracije CSS na elementu.

→ Generator box-shadow · Generator border-radius · Izbirnik barv

Pogosta vprašanja