CSS-gradientgenerator
Designa en bakgrundsgradient visuellt och kopiera färdig CSS. Dra färgstoppen längs listen, klicka på listen för att lägga till ett stopp, ändra vinkeln eller centrum och gör färger transparenta. Koden innehåller en enfärgad reservfärg för gamla webbläsare.
Så använder du den
- Välj linjär, radiell eller konisk, eller börja från ett förval eller en slumpmässig gradient.
- Klicka på ett stopp för att ändra dess färg, opacitet och position; dra det, eller klicka på listen för att lägga till ett till.
- Kopiera CSS-koden och klistra in den i elementets regel.
Vanliga frågor
Vad är skillnaden mellan linjära, radiella och koniska gradienter?
En linjär gradient byter färg längs en rak linje i den vinkel du väljer. En radiell gradient sprider sig från ett centrum som en cirkel eller ellips. En konisk gradient roterar runt ett centrum, som visarna på en klocka, vilket är användbart för färghjul och tårtdiagram.
Fungerar CSS-gradienter i alla webbläsare?
Ja. Linjära, radiella och koniska gradienter fungerar i alla aktuella versioner av Chrome, Edge, Firefox och Safari, utan prefix. Den första background-raden är en vanlig färg som bara mycket gamla webbläsare använder.
Hur gör jag ränder?
Sätt två stopp i samma färg i början och slutet av varje rand, så att färgen byter tvärt i stället för att blandas, och slå på Upprepa. Det sista förvalet är ett exempel.
🏷️ Metataggeneratorn
🖼️ Open Graph-generator
🔗 UTM-länkgenerator
🔲 CSS box-shadow-generator