Hvad er CSS-gradientgenerator?

Gratis online CSS-gradientgenerator. Opret lineære, radiale og kegleformede gradienter med live-forhåndsvisning og generér tilsvarende CSS-kode.

CSS-gradients er en af de mest effektive måder at tilføje dybde, atmosfære og visuel interesse til et webdesign uden at være afhængig af eksterne billeder. En velvalgt gradient kan forvandle en flad baggrund til noget, der føles poleret og målrettet. CSS Gradient Generator gør det intuitivt at oprette disse gradients: vælg lineær eller radial, vælg dine farver, justér vinklen eller placeringen, og kopiér den klar-til-brug CSS-kode.

Lineære gradients overgår farver langs en lige linje. Justér vinklen fra 0 til 360 grader — 0deg går fra bund til top, 90deg fra venstre mod højre, 180deg fra top til bund, og 270deg fra højre mod venstre. Radiale gradients stråler ud fra et centrum i et cirkulært eller elliptisk mønster. Placer centrum ved hjælp af vandrette og lodrette skyder, så gradienten kan stamme fra et hvilket som helst hjørne eller en hvilken som helst kant i stedet for standardcentret.

Begge gradienttyper understøtter 2 til 3 farvestop. Hvert stop har sin egen farvevælger, så du kan finjustere hver farve i overgangen. Live-forhåndsvisningen opdateres, når du justerer en hvilken som helst parameter, og giver dig øjeblikkelig visuel feedback. Seks forudindstillede gradients er inkluderet som udgangspunkter — klik på en for at indlæse den i editoren, og tilpas derefter farver og vinkel, så de matcher dit design.

Den kopierede CSS-kode er produktionsklar. Den bruger standard linear-gradient()- eller radial-gradient()-syntaks med leverandørpræfikser, hvor det er nødvendigt, så den fungerer i Chrome, Firefox, Safari og Edge. Indsæt den direkte i dit stylesheets background- eller background-image-egenskab. Ingen oprydning eller ændring er nødvendig — koden er formateret rent og klar til øjeblikkelig brug.

Gradients er alsidige ud over simple baggrunde. Brug dem til overlejringseffekter — en semi-transparent gradientoverlejring over et hero-billede forbedrer tekstlæsbarheden ved at mørkne kanterne, mens centret holdes lysere. Opret fremdriftsbjælker, hvor farven overgår fra din brandfarve til en komplementær nuance for at angive fuldførelsesniveauet. Tilføj dybde til kort og knapper med bløde, subtile gradients, der fanger øjet uden at overdøve indholdet. Eksperimentér med komplementære og analoge farveskemaer for at finde kombinationer, der løfter dit design.