CSS gradient generator
Creëer lineaire, radiale en conische CSS gradiënten in uw browser.
kleur stopt
Gebruik de stop handels of keyboard armbanden om posities te bewerken.Elke stop bevat een uitdrukkelijke kleur, onzuiverheid en percentage.
Browsers-native lokale verwerking
Uw gradient blijft in deze browser. Geen kleuren of gecreëerde CSS worden naar Converter gestuurd.
Beperkte invoer grammatica
De invoer accepteert lineaire gradient(), radiale gradiant(), of conic-gradient() met hex kleuren en percentages. verklaringen, URL's, variabelen en onbekende functies worden lokaal afgewezen.
Toegankelijke Fallback
De gecreëerde CSS bevat een solide achtergrondkleurige fallback naast de gradient voor niet-ondersteunde renderers en toegankelijke control chrome.
Veelgestelde vragen
Is mijn gradient gehaald?
No. Gradient staat, kleuren, geïmporteerde CSS en geïndiceerde CSS blijven in uw browser.
Welke CSS gradienttypen worden ondersteund?
De generator creëert lineaire gradient(), radiale gradiënt(), en conic-gradient() uitgang met meerdere hex kleurstops.
Wat kan ik importeren?
De invoer accepteert een gewetenvrij beperkte grammatica met één ondersteunde gradientfunctie, hex kleuren, optionele percentages en beperkte hoek of positiewaarden.
Gerelateerde ontwikkelaars en ontwerpingsinstrumenten
CSS gradient generator
Bouw lineaire of radiale CSS gradiënten en voorbeeld kleur stops, hoek, positie en herhaling.
- Invoer
- Gradient type, kleur stops, posities, hoek en herhaling instellingen.
- Uitvoer
- Een live voorbeeld en kopiabele CSS achtergrondverklaring.
- Echte beperkingen
- Browser rendering kan enigszins verschillen per motor, en het gereedschap beoordeelt geen contrast of garantie ondersteuning in erfgoed browsers.
- Privaciteit en gegevensbehandeling
- gradient type, kleur stops, posities, hoek en herhaling instellingen worden verwerkt in deze browser-tab. Converter ontvangt of opslaat het niet; het sluiten of opladen van de pagina helpt de werkomstand te verduidelijken tenzij het gereedschap uitdrukkelijk een lokale download biedt.
Hoe deze tool te gebruiken
- Geef gradient type, kleur stops, posities, hoek en herhaling instellingen in de tool controles.
- Selecteer de instellingen die een live voorbeeld en kopiëren CSS achtergrondverklaring beïnvloeden, en voer vervolgens het gereedschap uit.
- Bekijk een live voorbeeld en kopieerbare CSS-afgrondverklaring voordat u het kopiërt of downloaden.
Gemeenschappelijke mislukkingsmodi
Een ontbrekende kleurstop, ongeschikte kleur of incompatibele positie voorkomt dat een geldig CSS-verklaring wordt gebouwd.
nuttig voorbeeld
Creëer een 90 graden lineaire gradiënt van #111827 op 0% tot #f59e0b op 100% en kopieer de verklaring.