CSS Gradient Generator

Lineære gradienter overfører farver langs en lige linje (vandret, lodret eller diagonalt) og skaber et retningsbestemt flow fra en farve til en anden. Radiale gradienter udstråler fra et midtpunkt og udad i et cirkulært eller elliptisk mønster. Brug lineære gradienter til at fremhæve retninger og moderne grænseflader, og radiale gradienter til spotlight-effekter, knapper eller organisk visuel interesse.

Du kan indstille gradientvinklen i grader (0deg til 360deg) eller bruge nøgleord som 'til højre', 'til bunden', 'øverst til højre' osv. 0 grader peger opad, 90 grader peger mod højre, 180 grader peger nedad, og 270 grader peger mod venstre. Vinklen bestemmer den akse, som farverne bevæger sig langs, og giver dig fuld kontrol over gradientens retning.

Ja, det er det! CSS-gradienter understøtter ubegrænsede farvestop. Du kan tilføje flere farver for at skabe komplekse, flerfarvede gradienter. Hver farve kan have en valgfri positionsprocent (0 % til 100 %) for at styre, hvor den vises i gradienten. Dette er perfekt til at skabe regnbueeffekter, solnedgangsgradienter eller sofistikerede farveovergange.

Brug to farver, der ligger tæt på hinanden i nuance, mætning eller lyshed. Gå f.eks. fra en mellemblå til en lidt lysere eller mørkere blå. Hold kontrasten lav, og overvej at bruge HSL-værdier, hvor du kun justerer lysstyrken med 10-20 %. Subtile gradienter giver dybde og visuel interesse uden at overvælde indholdet.

Moderne CSS-gradienter (ved hjælp af linear-gradient og radial-gradient) understøttes i alle nuværende browsere uden leverandørpræfikser. Men hvis du har brug for at understøtte meget gamle browsere (IE9 og tidligere), kan du få brug for leverandørpræfikser (-webkit-, -moz-, -o-) eller ensfarvede fallback-farver. Til moderne webudvikling fungerer standard CSS-gradient-syntaksen overalt.

Placer dine farvestop jævnt, og undgå drastiske farvespring. Brug mellemliggende farvestop mellem ekstreme farver for at skabe mere glidende overgange. Ved radiale gradienter skal du eksperimentere med formen (cirkel vs. ellipse) og positionen. Overvej at bruge farver med lignende mætningsog lyshedsværdier eller at arbejde i HSL-rum, hvor du kan skabe jævne nuanceovergange.

Radiale gradienter kan være cirkulære (lige store i alle retninger) eller elliptiske (strækkes, så de passer til beholderen). Cirkler fungerer godt til spotlight-effekter og centrerede designs, mens ellipser er bedre til baggrunde, der skal dække rektangulære områder jævnt. Med shape-parameteren kan du styre denne adfærd.

Ja, ja! Brug vinkler mellem 0 og 360 grader til diagonale gradienter. 45 grader skaber en perfekt diagonal fra nederst til venstre til øverst til højre, 135 grader går fra nederst til højre til øverst til venstre. Diagonale gradienter tilføjer dynamisk visuel interesse og kan lede øjet gennem dit design.

Brug RGBA- eller HSLA-farveformater med en alfakanal til at skabe gradienter, der fader ud til at blive gennemsigtige. Dette er perfekt til overlejringseffekter, billedmasker eller til at skabe dybde. For eksempel skaber en gradient fra rgba(0,0,0,1) til rgba(0,0,0,0) en fade til gennemsigtig sort.

Farvestoppene styrer, hvor hver farve vises i gradienten (0% til 100%). Jævn afstand skaber bløde overgange, mens det skaber skarpe farveændringer at samle stoppene sammen. Hvis man f.eks. placerer to farver ved 50 %, får man en hård linje, mens afstanden mellem dem ved 40 % og 60 % giver en jævn blanding.