CSS-gradientgenerator
Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
Hvad er en CSS-gradient?
En CSS-gradient er en CSS-billedværdi, der viser bløde overgange mellem to eller flere farver uden billedfiler. Gradienter gengives af browseren, hvilket gør dem opløsnings uafhængige og meget ydelsesdygtige.
Hvilke typer CSS-gradienter understøttes?
Denne generator understøtter tre typer: linear-gradient (farver langs en ret linje), radial-gradient (farver der stråler fra centrum) og conic-gradient (farver der roterer rundt om et centralt punkt).
Forskel mellem lineær og radial gradient?
Lineære gradienter overfører farver langs en ret linje defineret af en vinkel eller retnings nøgleord. Radiale gradienter overfører farver udad fra et centralt punkt i cirkulære eller elliptiske former.
Hvor mange farvestop kan jeg bruge?
Du kan bruge så mange farvestop du har brug for. Hvert stop definerer en farve og valgfrit en position (0% til 100%) langs gradientlinjen.
Hvordan bruger jeg den genererede CSS-kode?
Kopier den genererede CSS-kode og indsæt den som værdi for background eller background-image-egenskaben i dit CSS-typografiark. Koden fungerer i alle moderne browsere.
Hvad er farvestop i gradienter?
Farvestop definerer specifikke farver ved specifikke positioner langs gradientlinjen. For eksempel skaber "red 0%, blue 50%, green 100%" en gradient, der starter rød, overgår til blå i midten og slutter grøn.
Kan jeg oprette vinklede gradienter?
Ja, lineære gradienter understøtter vinkelværdier fra 0deg til 360deg. Du kan også bruge retnings nøgleord som "to right", "to bottom", "to top left".
Er CSS-gradienter responsive?
Ja, CSS-gradienter er i sig responsive, fordi de er vektorbaserede og gengives af browseren. De skalerer perfekt til enhver beholderstørrelse uden kvalitetstab.
Påvirker CSS-gradienter sideydelsen?
CSS-gradienter er generelt meget ydelsesdygtige. De eliminerer HTTP-forespørgsler for billedfiler og er hardwareaccelereret. Ekstremt komplekse gradienter kan dog påvirke gengivelse på svage enheder.
Kan jeg bruge gradienter til baggrunde og kanter?
Ja, gradienter kan bruges til background-image, border-image, mask-image og enhver egenskab, der accepterer CSS-billedværdier.
Hvilke browsere understøtter CSS-gradienter?
Alle moderne browsere understøtter CSS-gradienter: Chrome, Firefox, Safari, Edge og Opera. Støtten har været fremragende siden IE10. Leverandørpræfikser er ikke længere nødvendige.
Hvordan opretter jeg en gentaget gradient?
Brug repeating-linear-gradient eller repeating-radial-gradient i stedet for standardversionerne. Disse gentager gradientmønsteret for at udfylde hele elementet.
Kan jeg animere CSS-gradienter?
CSS-gradienter kan ikke animeres direkte med CSS-overgange. Du kan dog animere background-position, background-size eller bruge tilpassede CSS-egenskaber med @property.
Er denne gradientgenerator gratis?
Ja, denne CSS-gradientgenerator er helt gratis. Ingen registrering påkrævet, ingen brugsbegrænsninger, og al genereret kode er din at bruge i ethvert projekt.