CSS Gradient Generator

Om det här verktyget

CSS-gradientgeneratorn skapar mjuka flerfärgade gradienter som du kan klistra in direkt i din CSS. Stöder linjära (riktade) och radiella (cirkulära) gradienter med valfritt antal färgstopp.

Färgstopp definierar var varje färg börjar och slutar längs gradientaxeln. Vinkelsreglaget roterar linjära gradienter från 0° till 360°.

Hur man använder

1. Välj gradienttyp: Linjär eller Radiell.
2. För linjära gradienter, dra vinkelreglaget för att ange riktningen.
3. Klicka på ett färgprov för att ändra det och dra reglaget för positionen.
4. Klicka på + Lägg till stopp för fler stopp. Klicka på ✕ för att ta bort.
5. Klicka på Kopiera för att kopiera CSS background-deklarationen.

Användningsfall

Webbdesigners skapar hero-sektionsbakgrunder med CSS-gradienter istället för bilder. Varumärkesteam genererar gradientpaletter som matchar företagets färgriktlinjer. Utvecklare prototypar kort, knappar och överlagringar.

Vanliga frågor

• Vad är skillnaden mellan linjära och radiella gradienter? — En linjär gradient övergår färger längs en rak linje vid en viss vinkel. En radiell gradient strålar färger utåt från en mittpunkt.
• Kan jag använda fler än två färger? — Ja. Klicka på + Lägg till stopp för att lägga till hur många färgstopp som helst.
• Är den genererade CSS webbläsaröverskridande kompatibel? — Ja. Funktionerna linear-gradient() och radial-gradient() stöds fullt ut i alla moderna webbläsare utan leverantörsprefix.