CSS gradient generator
Skapa linjära, radiala och koniska CSS gradienter i din webbläsare.
Färgstopp
Använd stopphandlarna eller tangentbordets strängar för att redigera positioner. Varje stopp innehåller en explicit färg, opacitet och procentsats.
Webbläsare-native lokala bearbetning
Din gradient stannar i denna webbläsare. Inga färger eller genererade CSS skickas till Converter.
Begränsad importgrammat
Importen accepterar linjär gradient(), radialgradient() eller konisk gradiant() med hexfärger och procentsatser. deklarationer, URL-adresser, variabler och okända funktioner avvisas lokalt.
Tillgänglig fallback
Den genererade CSS innehåller en solid bakgrundsfärg fallback tillsammans med gradienten för okomplicerade renderare och tillgänglig kontrollkrom.
Vanliga frågor
Är min gradient upphämtad?
Gradient status, färger, importerade CSS och genererade CSS stannar i din webbläsare.
Vilka CSS gradienttyper stöds?
Generatorn skapar linjärgradient(), radialgradiant(), och koniskgradiens() utgång med flera hexfärgstopp.
Vad kan jag importera?
Importen accepterar en avsiktligt begränsad grammatik med hjälp av en stödjande gradientfunktion, hexfärger, valfria procentsatser och begränsade vinklar eller positionvärden.
CSS gradient generator
Bygg linjära eller radiala CSS gradienter och förhandsvisning färgtopp, vinkel, position och upprepning.
- Inmatning
- Gradient typ, färgstopp, positioner, vinkel och upprepade inställningar.
- Utdata
- En live förhandsvisning och kopierbar CSS-bakgrundsdeklaration.
- Verkliga begränsningar
- Browser rendering kan skilja sig något efter motor, och verktyget utvärderar inte kontrast eller garanterar stöd i arvade webbläsare.
- Integritet och databehandling
- gradier typ, färgstopp, positioner, hörn och upprepade inställningar behandlas i denna webbläsarflik Konverter inte får eller lagrar det; stängning eller omlastning av sidan klarar arbetsstatus såvida verktyget uttryckligen erbjuder en lokal nedladdning.
Hur man använder detta verktyg
- Ge gradienttyp, färgstopp, positioner, vinkel och upprepade inställningar i verktygskontrollen.
- Välj inställningarna som påverkar en live-preview och kopierbar CSS-bakgrundsförklaring, kör sedan verktyget.
- Övervaka en live-preview och kopierbar CSS-bakgrundsförklaring innan du kopierar eller laddar ner den.
Vanliga misslyckande lägen
En saknad färgstopp, invalid färg eller inkompatibel position förhindrar att en giltig CSS-deklaration byggs.
Användbar exempel
Skapa en 90 graders linjär gradient från #111827 till 0 % till #f59e0b till 100% och kopiera deklarationen.