CSS gradient generator
Skapa linjära, radiala och koniska CSS gradienter i din webbläsare.
Färgstopp
Använd stopphandtagen eller tangentbordets piltangenter för att redigera positioner. Varje stopp innehåller en explicit färg, opacitet och procentsats.
Webbläsarnativ lokal bearbetning
Din gradient stannar i denna webbläsare. Inga färger eller genererade CSS skickas till Convertr.
Begränsad importgrammatik
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 som reserv tillsammans med gradienten för renderare som inte stöder den och för 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(), radialgradient() och koniskgradient() som utdata 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 radiella CSS-gradienter och förhandsgranska färgstopp, vinkel, position och upprepning.
- Inmatning
- Gradienttyp, färgstopp, positioner, vinkel och upprepningsinställningar.
- Utdata
- En live-förhandsvisning och kopierbar CSS-bakgrundsdeklaration.
- Verkliga begränsningar
- Webbläsarrendering kan skilja sig något beroende på motor, och verktyget utvärderar inte kontrast eller garanterar stöd i äldre webbläsare.
- Integritet och datahantering
- gradienttyp, färgstopp, positioner, vinkel och upprepningsinställningar bearbetas i denna webbläsarflik. Convertr tar inte emot eller lagrar det; att stänga eller ladda om sidan rensar arbetsläget om inte 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-förhandsvisning och kopierbar CSS-bakgrundsdeklaration, kör sedan verktyget.
- Granska en liveförhandsvisning och kopierbar CSS-bakgrundsdeklaration innan du kopierar eller laddar ner den.
Vanliga feltillstånd
En saknad färgstopp, ogiltig färg eller inkompatibel position förhindrar att en giltig CSS-deklaration byggs.
Användbart exempel
Skapa en 90-graders linjär gradient från #111827 vid 0% till #f59e0b vid 100% och kopiera deklarationen.