CSS-gradientgenerator

Designa linjära, radiella och koniska CSS-gradienter visuellt. Lägg till färgstopp, justera positioner och kopiera den färdiga CSS-koden.

Omedelbart resultat Körs i webbläsaren
CSS-gradientgenerator
135°

Förinställningar

Tips för CSS-gradienter

Gradienter fungerar på alla CSS-egenskaper som accepterar bilder: bakgrund, bakgrundsbild, kantbild, mask och mer. Använd kommaseparerade gradienter för att lagra dem: bakgrund: linear-gradient(...), linear-gradient(...); CSS: background, background-image, border-image, mask; background: linear-gradient(...), linear-gradient(...);

Hur använder man?

  1. 1
    Välj Gradient TypeVälj Linjär, Radiell eller Konisk. Justera vinkeln för linjära eller koniska gradienter.
  2. 2
    Ställ in färgstoppVälj färger och positioner för varje stopp. Lägg till fler stopp för komplexa gradienter.
  3. 3
    Kopiera CSSKlicka på Kopiera CSS för att få koden klar att klistra in, eller kopiera bara bakgrundsvärdet.

FAQ

Vad är en CSS-gradient?
En CSS-gradient är en mjuk övergång mellan två eller flera färger som genereras enbart av webbläsaren – ingen bildfil behövs. Linjära gradienter går i en rak linje, radiella gradienter utstrålar från en mittpunkt och koniska gradienter sveper runt ett centrum som ett färghjul.
Hur många färgstopp kan jag lägga till?
Det här verktyget stöder upp till 8 färgstopp. CSS i sig har ingen officiell gräns, men webbläsare hanterar dussintals stopp utan problem.
Är den genererade CSS-en kompatibel med alla webbläsare?
Ja. Utdatan använder standardsyntaxen utan prefix som stöds av alla moderna webbläsare (Chrome, Firefox, Safari, Edge). Internet Explorer 9 är den enda större webbläsaren som kräver det äldre -ms- prefixet, som detta verktyg utelämnar.

CSS-gradientgenerator för linjära, radiella och koniska övergångar

CSS-gradientgeneratorn låter dig bygga färgövergångar visuellt och kopiera färdig CSS. Du kan välja linear, radial eller conic gradient, justera vinkel där det är relevant, lägga till färgstopp, dra positioner i procent, slumpa färger och starta från färdiga presets. Förhandsvisningen uppdateras direkt och verktyget visar både en komplett background:-regel och själva gradientvärdet. Det är praktiskt för webbdesign, prototyper, knappar, bakgrunder, diagram, kampanjsidor och UI-teman.

Tre gradienttyper

En linjär gradient rör sig längs en riktning, till exempel linear-gradient(135deg, ...). Den passar för bakgrunder, kort och subtila ljuseffekter. En radiell gradient börjar i mitten som en cirkel och sprider sig utåt, vilket fungerar för fokuspunkter, avatarbakgrunder och mjuka highlights. En konisk gradient roterar runt en mittpunkt med conic-gradient(from ...deg, ...) och kan användas för färghjul, ringdiagram eller dekorativa ytor. Verktyget bygger strängen med vald typ, vinkel och alla färgstopp i ordning.

Färgstopp och positioner

Varje färgstopp består av en HEX-färg och en position mellan 0 och 100 procent. Om två stopp ligger nära varandra blir övergången skarpare; om de ligger långt ifrån varandra blir den mjukare. Du kan lägga till fler stopp för komplexa övergångar eller hålla dig till två för renare design. För linjära och koniska gradients påverkar vinkelreglaget riktningen, medan radialläget döljer vinkelbehovet eftersom övergången utgår från en cirkel.

CSS och prestanda

CSS-gradients renderas av webbläsaren och kräver ingen bildfil. De skalar bra på högupplösta skärmar, kan ändras med variabler och är ofta enklare att underhålla än exportade PNG-bakgrunder. Samtidigt bör gradients användas med måtta. För stark kontrast bakom text kan läsbarheten försämras, särskilt på små skärmar. Om text ligger ovanpå en gradient behöver du kontrollera kontrast vid både ljusa och mörka delar av övergången.

Arbetssätt

Välj först en preset nära önskat uttryck, justera färgerna, kontrollera procentpositionerna och kopiera sedan CSS-regeln. Om gradienten ska användas på flera komponenter är det bättre att lägga den i en CSS-variabel eller design token än att kopiera samma sträng överallt. Testa även hover, mörkt läge och utskrift om gradienten används i viktiga knappar eller informationsytor. För datavisualisering bör färgerna ha tydlig betydelse och inte bara vara dekorativa.

Testa i verkliga komponenter

En gradient som ser bra ut i stor förhandsvisning kan kännas annorlunda på en liten knapp eller i en smal mobilvy. Prova därför den kopierade CSS-regeln på den faktiska komponenten innan den blir del av designsystemet.

Från förhandsvisning till CSS

När gradienten ser bra ut bör du testa den bakom riktig text och på både ljus och mörk bakgrund. Små skillnader i stopp, vinkel och kontrast kan avgöra om gradienten fungerar i en produktionsdesign.

Kommentarer