CSS Gradient Generator

Skapa vackra CSS-gradienter gratis online. Designa linjära och radiella gradienter med flera färgstopp och kopiera CSS-koden direkt.

Preview
CSS Code

Så här fungerar det

  1. Välj gradienttyp – linjär eller radiell – beroende på ditt designbehov.
  2. Lägg till färgstopp genom att klicka på skjutreglaget och välj färger från färgväljaren.
  3. Justera gradientens vinkel eller riktning med rotationskontrollen.
  4. Se resultatet i realtid i förhandsgranskningsområdet.
  5. Kopiera den genererade CSS-koden med ett klick och klistra in den direkt i ditt projekt.

Exempel

Indata: Linjär gradient: från #43CEA2 (0%) till #185A9D (100%), vinkel 60°
Resultat: background: linear-gradient(60deg, #43CEA2 0%, #185A9D 100%);

Vanliga frågor

Ja, absolut. All bearbetning sker direkt i din webbläsare på klientsidan. Inga data skickas till någon server, så ditt arbete förblir helt privat.

Ja, du kan lägga till hur många färgstopp som helst för att skapa komplexa flerfärgade gradienter med mjuka övergångar.

Den genererade koden är kompatibel med alla moderna webbläsare. Verktyget lägger automatiskt till nödvändiga leverantörsprefix för bredare kompatibilitet.

Nej, CSS Gradient Generator är helt gratis och kräver ingen registrering eller inloggning.