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.
Sådan bruges CSS-gradientgenerator
Lav CSS-gradienter visuelt og kopiér produktionsklar CSS med det samme. Renderingen sker lokalt i din browser, uden uploads.
- Vælg Type for gradienten: linear-gradient eller radial-gradient.
- Indstil Angle til lineære gradienter, eller vælg en Shape som circle eller ellipse til radiale.
- Tilføj, farv om og træk farvestop i afsnittet Color Stops.
- Klik på en farveprøve under Presets for at starte fra en færdig blanding.
- Kopiér den genererede CSS og indsæt den i dit stylesheet.
Placér to stop med forskellige farver på samme position for en hård kant — en hurtig måde at lave striber uden billeder.
Relaterede værktøjer
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
- CSS Border Radius Generator Visuel CSS border-radius generator. Juster hvert hjørne uafhængigt med realtidsforhåndsvisning og kopier CSS-koden med det samme.
- CSS Grid-generator Gratis visuel CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouts interaktivt og eksporter produktionsklar CSS-kode direkte.
- CSS Flexbox-generator Visuel CSS Flexbox-generator med live forhåndsvisning. Juster flex-egenskaper og få CSS-kode klar til brug.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.