Om detta verktyg
Skapa vackra linjära och radiella CSS-gradienter med en visuell redigerare. Välj färger, justera stopp, ändra riktning eller vinkel och se live-förhandsvisningsuppdateringen i realtid. Kopiera den genererade CSS-koden – inklusive leverantörsprefix för äldre webbläsare – och klistra in den direkt i din stilmall.
Vanliga frågor
- Fungerar CSS-gradienter i alla webbläsare?
- Moderna CSS-gradienter (linjär-gradient, radiell-gradient) stöds i alla aktuella webbläsare inklusive Chrome, Firefox, Safari och Edge. Verktyget kan valfritt generera -webkit- prefix för äldre webbläsarversioner.
- Kan jag skapa flerfärgsgradienter?
- Ja. Lägg till så många färgstopp som du behöver. Du kan också justera positionen för varje stopp för att kontrollera var färgerna blandas. Detta möjliggör komplexa regnbågs-, solnedgångs- eller anpassade varumärkesgradienter.
- Vad är skillnaden mellan linjära och radiella gradienter?
- Linjära övertoningar överför färger längs en rak linje (uppifrån och ned, vänster till höger, diagonal eller valfri vinkel). Radiella gradienter överför färger utåt från en mittpunkt i en cirkulär eller elliptisk form.
- Kan jag använda övertoningen som bakgrund för text?
- Ja. Använd bakgrundsklipp: text med -webkit-text-fyllningsfärg: transparent för att tillämpa övertoningen på text. Den genererade CSS tillhandahåller gradientdefinitionen — kombinera den med dessa egenskaper för gradienttext.