CSS-gradientgenerator
Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
Hva er en CSS-gradient?
En CSS-gradient er en CSS-bildverdi som viser myke overganger mellom to eller flere farger uten bildefiler. Gradienter gjengis av nettleseren, noe som gjør dem oppløsnings uavhengige og svært ytelsesdyktige.
Hvilke typer CSS-gradienter støttes?
Denne generatoren støtter tre typer: linear-gradient (farger langs en rett linje), radial-gradient (farger som stråler fra sentrum) og conic-gradient (farger som roterer rundt et sentralt punkt).
Forskjell mellom lineær og radiell gradient?
Lineære gradienter overfører farger langs en rett linje definert av en vinkel eller retnings nøkkelord. Radielle gradienter overfører farger utover fra et sentralt punkt i sirkulære eller elliptiske former.
Hvor mange fargestopp kan jeg bruke?
Du kan bruke så mange fargestopp du trenger. Hvert stopp definerer en farge og valgfritt en posisjon (0% til 100%) langs gradientlinjen.
Hvordan bruker jeg den genererte CSS-koden?
Kopier den genererte CSS-koden og lim den inn som verdi for background eller background-image-egenskapen i CSS-stilarket. Koden fungerer i alle moderne nettlesere.
Hva er fargestopp i gradienter?
Fargestopp definerer spesifikke farger ved spesifikke posisjoner langs gradientlinjen. For eksempel skaper "red 0%, blue 50%, green 100%" en gradient som starter rød, overgår til blått i midten og slutter grønt.
Kan jeg lage vinklede gradienter?
Ja, lineære gradienter støtter vinkelverdier fra 0deg til 360deg. Du kan også bruke retnings nøkkelord som "to right", "to bottom", "to top left".
Er CSS-gradienter responsive?
Ja, CSS-gradienter er i seg responsive fordi de er vektorbaserte og gjengis av nettleseren. De skalerer perfekt til enhver beholderstørrelse uten kvalitetstap.
Påvirker CSS-gradienter sideytelsen?
CSS-gradienter er generelt svært ytelsesdyktige. De eliminerer HTTP-forespørsler for bildefiler og er maskinvareakselererte. Ekstremt komplekse gradienter kan imidlertid påvirke gjengivelse på svake enheter.
Kan jeg bruke gradienter for bakgrunner og kanter?
Ja, gradienter kan brukes til background-image, border-image, mask-image og enhver egenskap som godtar CSS-bildverdier.
Hvilke nettlesere støtter CSS-gradienter?
Alle moderne nettlesere støtter CSS-gradienter: Chrome, Firefox, Safari, Edge og Opera. Støtten har vært utmerket siden IE10. Leverandørprefikser er ikke lenger nødvendige.
Hvordan lager jeg en gjentatt gradient?
Bruk repeating-linear-gradient eller repeating-radial-gradient i stedet for standardversjonene. Disse gjentar gradientmønsteret for å fylle hele elementet.
Kan jeg animere CSS-gradienter?
CSS-gradienter kan ikke animeres direkte med CSS-overganger. Du kan imidlertid animere background-position, background-size eller bruke egendefinerte CSS-egenskaper med @property.
Er denne gradientgeneratoren gratis?
Ja, denne CSS-gradientgeneratoren er helt gratis. Ingen registrering påkrevd, ingen bruksgrenser og all generert kode er din å bruke i ethvert prosjekt.