Utilia
Kategorije ▾
Jezik: sl ▾

Generator CSS prelivov

Ustvari linearne, radialne in konusne CSS-prelive z živim predogledom. Dodajaj in vleci barvne postaje, nastavi kot in z enim klikom kopiraj čisto kodo CSS.

Vrsta preliva

Barvne postaje

Klikni vrstico, da dodaš postajo, povleci ročaj, da jo premakneš. Ko je ročaj izbran, uporabi smerne tipke (s Shiftom za 10 %) in Delete.

    Kako uporabljati generator CSS prelivov

    1. Izberi Vrsta preliva: Linearni, Radialni ali Konusni. Velik predogled na vrhu se posodobi ob vsaki spremembi.
    2. Pri linearnem prelivu nastavi Kot z drsnikom ali ga vpiši v stopinjah (90° gre od leve proti desni, 180° od zgoraj navzdol). Pri konusnem prelivu je kot mesto, kjer se vrtenje začne.
    3. Pri radialnem in konusnem prelivu premakni središče z Središče X in Središče Y. Radialni preliv je lahko Krog ali Elipsa (meni Oblika).
    4. Uredi Barvne postaje. Klikni kamor koli na vrstico, da tam dodaš postajo z barvo, ki jo preliv na tisti točki že ima, ali uporabi Dodaj postajo, da zapolniš najširšo vrzel. Povleci ročaj, da ga premakneš. Vsaka postaja ima tudi vrstico, kjer izbereš njeno barvo, vpišeš poljubno CSS-barvo, nastaviš Položaj (%) ali jo Odstrani (preliv obdrži vsaj dve postaji).
    5. Po želji obkljukaj Ponavljajoči, izberi Interpolacija barv, klikni Obrni, da obrneš postaje, ali Naključni preliv za navdih.
    6. Rezultat iz polja Koda CSS kopiraš z gumbom Kopiraj.

    Tipkovnica: izberi ročaj na vrstici, nato ga s smernimi tipkami premakneš za 1 % (s Shiftom za 10 %), s tipkama Home in End skočiš na konca, z Delete pa ga odstraniš.

    Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

    Tri funkcije prelivov

    • linear-gradient() meša barve vzdolž premice. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) teče od indiga na levi do rožnate na desni. Koti se merijo v smeri urinega kazalca od vrha: 0deg kaže navzgor, 90deg v desno.
    • radial-gradient() se širi iz središčne točke. radial-gradient(circle at 30% 40%, …) postavi središče 30 % od leve in 40 % od zgoraj. Elipsa se razteza z okvirjem, krog ostane okrogel.
    • conic-gradient() se vrti okoli središča kot kazalci ure. conic-gradient(from 0deg at 50% 50%, …) ustvari barvna kolesa, tortne grafikone in učinke vrtečih se kazalnikov. Položaji postaj so deleži polnega kroga.

    Možnost Ponavljajoči uporabi repeating-linear-gradient() in sorodne funkcije: vzorec, ki ga določajo tvoje postaje, se ponavlja, dokler ni okvir zapolnjen. Zadnjo postajo postavi precej pod 100 % (na primer na 20 %), da dobiš črte ali kroge.

    Dve postaji na istem položaju ustvarita ostro mejo namesto prehoda, tako nastanejo črte in zastave. Generator postaje v kodi hrani urejene po položaju, kot zahteva CSS.

    Interpolacija sRGB ali OKLCH

    Privzeto brskalniki mešajo barve prelivov v prostoru sRGB. Med dvema nasičenima barvama, na primer modro in rumeno, to pogosto ustvari medlo sivo ali blatno sredino. CSS Color Level 4 omogoča izbiro prostora interpolacije: linear-gradient(90deg in oklch, …) meša v zaznavnem prostoru OKLCH in ohrani živo sredino.

    Z možnostjo OKLCH (gladkejše, z rezervo sRGB) orodje zapiše dve deklaraciji background: najprej klasično različico sRGB, nato različico OKLCH. Brskalniki, ki podpirajo prostore interpolacije (Chrome in Edge 111+, Safari 16.2+, Firefox 127+), uporabijo drugo vrstico; starejši jo prezrejo in obdržijo prvo.

    Nasveti

    • V poljih postaj so sprejete barve s prosojnostjo, na primer #00000080 ali rgb(0 0 0 / 50%), kar je priročno za prekrivanja na slikah.
    • Koda je zapisana z background. Če druge lastnosti ozadja nastavljaš ločeno, raje uporabi background-image.
    • Subtilni prelivi (dva bližnja odtenka iste barve) so običajno videti bolj profesionalno kot mavrični prehodi.

    Pogosta vprašanja

    Kako naredim preliv od zgoraj navzdol?

    Izberi Linearni in nastavi Kot na 180°. 0° gre od spodaj navzgor, 90° od leve proti desni in 270° od desne proti levi.

    Kako ustvarim ostro črto med dvema barvama?

    Dvema postajama daj isti položaj, na primer rdečo pri 50 % in modro pri 50 %. Barvi se tedaj stakneta brez prehoda.

    Ali lahko preliv uporabim kot barvo besedila?

    Da, z nekaj dodatnega CSS: preliv uporabi kot background, nato elementu z besedilom dodaj background-clip: text in color: transparent.

    Ali CSS-prelivi delujejo v vseh brskalnikih?

    Linearni, radialni in konusni prelivi delujejo v vseh sodobnih brskalnikih. Samo interpolacija OKLCH potrebuje novejšo različico, zato orodje doda rezervo sRGB.

    Je CSS-preliv boljši od slike?

    Običajno da: nič ne tehta, se skalira na katero koli velikost brez zameglitve in ga je mogoče spreminjati v kodi. Sliko uporabi samo za zapletene teksture.

    Sorodna orodja