Spring til indhold
patrache.tools

Gradientgenerator

Gratis CSS-gradientgenerator online. Lineær og radiel, juster retning, farver, stoppunkter. Kopier kode. Behandles i browseren.

Type
Vinkel
90°
Farver
0%
100%
CSS-kode
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockFiler sendes ikke til nogen server
Del
Indlejr

Indlejr dette værktøj på dit websted

Gratis online CSS-gradientgenerator. Design lineære, radiale og koniske gradienter visuelt, og kopiér derefter CSS-koden med det samme.

Hvordan bruger man Gradientgenerator?

  1. Vælg gradienttype (lineær, radial osv.).
  2. Tilføj farvestop, og indstil farver.
  3. Kopiér den genererede CSS-kode.

Ofte stillede spørgsmål om Gradientgenerator

Hvilke gradienttyper understøttes?

Lineære, radiale og koniske gradienter understøttes.

Kan jeg kopiere CSS-koden direkte?

Ja, kopiér den genererede CSS-gradientkode med ét klik for at anvende den direkte på dit websted.

Hvorfor opstår der et grumset gråt bånd midt i min gradient?

Når to farver ligger over for hinanden i cirklen, passerer blandingen et punkt, hvor mætningen falder næsten til nul, og det ses som et mat gråt bånd. Parrene blå-orange og rød-grøn er de sædvanlige syndere. At lægge en tredje farve ind som mellemstop fører overgangen uden om det grå, og to nabonuancer fjerner problemet fra begyndelsen.

Kan jeg gemme gradienten som billedfil og ikke kun som CSS?

Ja, du kan hente en PNG og bruge den direkte som slidebaggrund, billede til sociale medier eller trykt layout. Til en webside er CSS dog bedre: der er ingen fil at hente, gradienten strækker sig til enhver skærmstørrelse uden at knække, og den viser aldrig den trappekant, en opskaleret bitmap får.

Tips til effektiv brug af Gradientgenerator

  • Bland to nuancer, der ligger tæt på farvecirklen – modsatte farver bliver snavset grå i midten.
  • En diagonal på 135 grader er det sikreste valg til bannere og kortbaggrunde.
  • Skal der ligge tekst ovenpå, så tjek kontrasten mod det lyseste farvestop.

Powered by Patrache Studio Tools

Tillad annoncer på denne hjemmeside

Tillad annoncer på denne hjemmeside for at bruge værktøjerne. Annoncer holder tjenesten gratis.

Åbn annonceblokkeren, slå den fra for denne hjemmeside, og tjek igen.