CSS gradient generator
Creëer lineaire, radiale en conische CSS gradiënten in uw browser.
Kleurstops
Gebruik de stop-handvatten of toetsenbordpijlen om posities te bewerken. Elke stop bevat een expliciete kleur, dekking en percentage.
Lokale verwerking in de browser
Uw gradient blijft in deze browser. Geen kleuren of gecreëerde CSS worden naar Convertr gestuurd.
Beperkte importgrammatica
De import accepteert linear-gradient(), radial-gradient() of conic-gradient() met hex-kleuren en percentages. Declaraties, URL's, variabelen en onbekende functies worden lokaal afgewezen.
Toegankelijke fallback
De gegenereerde CSS bevat een effen achtergrondkleur als fallback naast het verloop voor niet-ondersteunde renderers en toegankelijke bedieningselementen.
Veelgestelde vragen
Wordt mijn verloop geüpload?
Nee. Verloopstatus, kleuren, geïmporteerde CSS en gegenereerde CSS blijven in uw browser.
Welke CSS gradienttypen worden ondersteund?
De generator maakt linear-gradient(), radial-gradient() en conic-gradient() uitvoer met meerdere hex-kleurstops.
Wat kan ik importeren?
De import accepteert een bewust beperkte grammatica met één ondersteunde verloopfunctie, hex-kleuren, optionele percentages en beperkte hoek- of positiewaarden.
Gerelateerde ontwikkelaars- en ontwerptools
CSS gradient generator
Bouw lineaire of radiale CSS-gradiënten en bekijk kleurstops, hoek, positie en herhaling.
- Invoer
- Gradient type, kleur stops, posities, hoek en herhaling instellingen.
- Uitvoer
- Een live voorbeeld en kopieerbare CSS achtergronddeclaratie.
- Echte beperkingen
- Browserweergave kan enigszins verschillen per engine, en het gereedschap beoordeelt geen contrast of garandeert ondersteuning in verouderde browsers.
- Privacy en gegevensverwerking
- gradient type, kleur stops, posities, hoek en herhaling instellingen worden verwerkt in deze browser-tab. Convertr 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 verlooptype, kleurstops, posities, hoek en herhalingsinstellingen in de toolbesturing.
- Kies de instellingen die een live voorbeeld en kopieerbare CSS-achtergronddeclaratie beïnvloeden, en voer vervolgens het gereedschap uit.
- Bekijk een live voorbeeld en kopieerbare CSS-achtergronddeclaratie voordat je deze kopieert of downloadt.
Veelvoorkomende foutmodi
Een ontbrekende kleurstop, ongeldige kleur of incompatibele positie voorkomt dat een geldige CSS-declaratie wordt gebouwd.
Nuttig voorbeeld
Maak een lineair verloop van 90 graden van #111827 op 0% naar #f59e0b op 100% en kopieer de declaratie.