CSS-gradientgenerator

Linjära gradienter övergår färger längs en rak linje (horisontell, vertikal eller diagonal) och skapar ett riktat flöde från en färg till en annan. Radiala gradienter strålar från en mittpunkt och utåt i ett cirkulärt eller elliptiskt mönster. Använd linjära gradienter för att framhäva riktningar och moderna gränssnitt, och radiella gradienter för spotlight-effekter, knappar eller organiskt visuellt intresse.

Du kan ange lutningsvinkeln i grader (0deg till 360deg) eller använda nyckelord som "till höger", "till botten", "upp till höger" osv. 0deg pekar uppåt, 90deg pekar åt höger, 180deg pekar nedåt och 270deg pekar åt vänster. Vinkeln bestämmer den axel längs vilken färgerna övergår, vilket ger dig fullständig kontroll över gradientens riktning.

Ja, det är det! CSS-gradienter stöder obegränsade färgstopp. Du kan lägga till flera färger för att skapa komplexa gradienter med flera färger. Varje färg kan ha en valfri positionsprocent (0 % till 100 %) för att styra var den visas i lutningen. Detta är perfekt för att skapa regnbågseffekter, solnedgångsgradienter eller sofistikerade färgövergångar.

Använd två färger som ligger nära varandra i nyans, mättnad eller ljushet. Övergå till exempel från en mellanblå färg till en något ljusare eller mörkare blå. Håll kontrasten låg och överväg att använda HSL-värden där du bara justerar ljusheten med 10-20%. Subtila gradienter ger djup och visuellt intresse utan att överväldiga innehållet.

Moderna CSS-gradienter (med linjär-gradient och radial-gradient) stöds i alla aktuella webbläsare utan leverantörsprefix. Men om du behöver stödja mycket gamla webbläsare (IE9 och tidigare) kan du behöva leverantörsprefix (-webkit-, -moz-, -o-) eller reservfärger. För modern webbutveckling fungerar standard CSS-gradientsyntax överallt.

Placera dina färgstopp jämnt och undvik drastiska färgsprång. Använd mellanliggande färgstopp mellan extrema färger för att skapa mjukare övergångar. För radiella gradienter kan du experimentera med formen (cirkel vs ellips) och positionen. Överväg att använda färger med liknande mättnads- och ljushetsvärden, eller arbeta i HSL-utrymme där du kan skapa mjuka nyansövergångar.

Radiala gradienter kan vara cirkulära (lika i alla riktningar) eller elliptiska (utsträckta för att passa behållaren). Cirklar fungerar bra för spotlight-effekter och centrerad design, medan ellipser är bättre för bakgrunder som måste täcka rektangulära områden jämnt. Med parametern shape kan du styra detta beteende.

Ja, det gör jag! Använd vinklar mellan 0deg och 360deg för diagonala gradienter. 45 grader skapar en perfekt diagonal från botten-vänster till toppen-höger, 135 grader går från botten-höger till toppen-vänster. Diagonala gradienter ger ett dynamiskt visuellt intresse och kan leda ögat genom din design.

Använd RGBA- eller HSLA-färgformat med en alfakanal för att skapa gradienter som övergår till att bli transparenta. Detta är perfekt för överlagringseffekter, bildmasker eller för att skapa djup. Till exempel skapar en gradient från rgba(0,0,0,1) till rgba(0,0,0,0) en övertoning till transparent svart.

Färgstopp styr var varje färg visas i gradienten (0% till 100%). Jämnt avstånd ger mjuka övergångar, medan skarpa färgförändringar skapas när stoppen samlas ihop. Om du till exempel placerar två färger på 50% skapas en hård linje, medan ett avstånd på 40% och 60% skapar en jämn blandning.