Generator CSS prelivov

Izberite barve in kot ter v živo ustvarite kodo CSS prelivov

Podatki o posodobitvahDodan generator CSS gradientov, ustvarjanje kode z izbiro barve in kotaPoglejte posodobitve

Značilnosti

Sočasna posodobitev predogleda in kode

Vsaka sprememba barve ali kota takoj posodobi videz in CSS

Podpora za linearne, krožne in stožčaste prelive

Natančna nastavitev kota, oblike in središčnega položaja za vsak tip

Do 10 barv, prilagodljivih z vlečenjem

Položaj barve prilagodite z vlečenjem po vrstici, prosojnost pa z drsnikom

8 vzorcev in naključno ustvarjanje

Izhodišče za fino nastavitev so priljubljene ali naključne barvne kombinacije

Navodila za uporabo

Izberite tip

Izberite tip preliva: linearni, krožni ali stožčasti

Določite barve

Izberite barve s kodo ali vzorci, nato z gumbom »Dodaj barvo« dodajte več barv in prilagodite položaj ter prosojnost

Prilagodite smer

Pri linearnem prelivu nastavite kot ali gumbe za smer, pri krožnem in stožčastem pa središčni položaj

Kopirajte kodo

Z gumbom »Kopiraj« prilepite enovrstično kodo CSS v svoj slog

Primeri uporabe

Oblikovanje ozadja za glavno sliko

Določite barvo ozadja za vrh strani ali gumbe brez pisanja kode

Izbira barvne kombinacije za naslove bloga

Izberite podobno kombinacijo iz vzorcev za ozadje naslovov člankov

Prekrivni sloj čez fotografijo

Z zmanjšano prosojnostjo barve ustvarite polprosojen sloj čez fotografijo

Prilagajanje večbarvnih prelivov

Z vlečenjem postopoma približajte meje med tremi ali več barvami

Osnovno znanje

Razlika med linear, radial in conic

CSS prelivi imajo tri funkcije z različnim načinom spreminjanja barv, vse pa se uporabljajo v lastnosti background.

linear-gradient：linear-gradient je linearni preliv, pri katerem se barva spreminja vzdolž premice pod določenim kotom.
radial-gradient：radial-gradient je krožni preliv, pri katerem se barva širi iz središčnega položaja navzven v obliki kroga ali elipse.
conic-gradient：conic-gradient je stožčasti preliv, pri katerem se barva spreminja v smeri urinega kazalca okoli središčnega položaja.

Ujemanje kotov s ključnimi besedami za smer

Pri linear-gradient je kot 0deg usmerjen od spodaj navzgor, večje vrednosti pa pomenijo vrtenje v smeri urinega kazalca. Kot lahko zapišete tudi s ključnimi besedami za smer, kot je »to right«, pri čemer 90deg ustreza »to right«, 180deg pa »to bottom«.

Zapis barvnih postankov in prosojnosti

Barvni postanek (color stop) je položaj v prelivu, kjer se pojavi določena barva; 0 % predstavlja začetno, 100 % pa končno točko. Na primer, zapis »#3B82F6 0%, #8B5CF6 100%« pomeni spremembo barve od modre na začetku do vijolične na koncu.

Oblika #RRGGBB：Oblika #RRGGBB zapisuje jakost rdeče, zelene in modre z dvomestnimi šestnajstiškimi števili; #FF0000 predstavlja neprosojno rdečo.
Oblika rgba：Oblika rgba dodaja vrednostim rdeče, zelene in modre (0–255) še prosojnost (0–1); prosojnost 0,5 predstavlja napol prosojno barvo.