CSS-gradient-generator

Sådan bruger du CSS-gradient-generatoren

1. Vælg en Gradienttype: Lineær, Radial eller Konisk. Det store eksempel øverst opdateres ved hver ændring.
2. For en lineær gradient indstiller du Vinkel med skyderen eller skriver den i grader (90° går fra venstre mod højre, 180° oppefra og ned). For en konisk gradient er vinklen der, hvor strøget starter.
3. For radiale og koniske gradienter flytter du centrum med Centrum X og Centrum Y. En radial gradient kan være en Cirkel eller en Ellipse (menuen Form).
4. Rediger Farvestop. Klik et vilkårligt sted på bjælken for at tilføje et stop dér med den farve, gradienten allerede har i det punkt, eller brug Tilføj stop for at fylde det bredeste mellemrum. Træk i et håndtag for at flytte det. Hvert stop har også en række, hvor du kan vælge farven, skrive en vilkårlig CSS-farve, angive Position (%) eller Fjern det (en gradient beholder mindst to stop).
5. Sæt evt. kryds i Gentagende, vælg Farveinterpolation, klik på Vend om for at vende stoppene eller på Tilfældig gradient for inspiration.
6. Kopiér resultatet fra CSS-kode med Kopiér.

Tastatur: giv et håndtag på bjælken fokus, og brug piletasterne til at flytte det 1 % (10 % med Shift), Home og End til at springe til enderne og Delete til at fjerne det.

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

De tre gradientfunktioner

• linear-gradient() blander farver langs en ret linje. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) går fra indigo til venstre til pink til højre. Vinklerne regnes med uret fra toppen: 0deg peger opad, 90deg mod højre.
• radial-gradient() stråler ud fra et centrum. radial-gradient(circle at 30% 40%, …) placerer centrum 30 % fra venstre og 40 % fra toppen. En ellipse strækker sig med boksen, en cirkel forbliver rund.
• conic-gradient() svinger rundt om et centrum som viserne på et ur. conic-gradient(from 0deg at 50% 50%, …) laver farvehjul, lagkagediagrammer og spinnere. Stoppenes positioner er andele af en hel omgang.

Valget Gentagende bruger repeating-linear-gradient() og dens søskende: mønstret, som dine stop definerer, gentages, indtil boksen er fyldt. Sæt det sidste stop et godt stykke under 100 % (for eksempel 20 %) for at se striber eller ringe.

To stop på samme position giver en skarp kant i stedet for en overgang, og sådan laves striber og flag. Generatoren holder stoppene sorteret efter position i koden, som CSS kræver.

sRGB- eller OKLCH-interpolation

Som standard blander browsere gradientfarver i sRGB. Mellem to mættede farver som blå og gul giver det ofte en kedelig grå eller mudret midte. CSS Color Level 4 lader dig vælge interpolationsrummet: linear-gradient(90deg in oklch, …) blander i det perceptuelle OKLCH-rum og bevarer en levende midte.

Med OKLCH (jævnere, med sRGB-reserve) skriver værktøjet to background-erklæringer: først den klassiske sRGB-version og derefter OKLCH-versionen. Browsere, der understøtter interpolationsrum (Chrome og Edge 111+, Safari 16.2+, Firefox 127+), bruger den anden linje. Ældre ignorerer den og beholder den første.

Tips

• Farver med gennemsigtighed accepteres i stopfelterne, for eksempel #00000080 eller rgb(0 0 0 / 50%), hvilket er praktisk til overlejringer på billeder.
• Koden skrives med background. Brug background-image i stedet, hvis du sætter andre baggrundsegenskaber separat.
• Diskrete gradienter (to nære nuancer af én farve) ser som regel mere professionelle ud end regnbueovergange.