CSS-gradients aanmaken
Ontwerp mooie CSS-gradiënten en kopieer de code.
Hoe gebruikt u dit middel? CSS-verloopgenerator
Kies lineair of radiale
Lineair gaat over een rechte lijn. Radiaal verspreidt zich naar buiten vanaf een middelpunt.
Kleurstops toevoegen en positie
Voeg zoveel kleuren toe als je nodig hebt en sleep elke stop om het langs het verloop te plaatsen.
Kopiëren van het CSS
Pas de hoek of vorm aan totdat het er goed uitziet, kopieer dan de gegenereerde CSS in je stylesheet.
Over de CSS-verloopgenerator
CSS-gradiëntsyntaxis is gemakkelijk te lezen en ellendig om vanuit het geheugen te schrijven. Hoeken worden gemeten vanuit een richting die de meeste mensen verrast de eerste keer, kleurenstop posities interageren op manieren die moeilijk te voorspellen zijn, en de enige betrouwbare manier om een gradiënt rechts te krijgen is om te zien veranderen als je het aanpast. Dat is waar dit gereedschap voor is: bouw de gradiënt visueel, kopieer CSS die je direct kunt plakken in een stylesheet.
Beide types zijn bedekt. Een lineair verloop gaat over een rechte lijn onder welke hoek je ook instelt, en is degene die gebruikt wordt voor knoppen, heldensecties en achtergrondbanden. Een radiaalgradiënt verspreidt zich naar buiten vanuit een middelpunt in een cirkel of ellips, die past bij spots, gloeit en subtiele vignetten. Hoe dan ook kunt u zoveel kleurstops toevoegen als u nodig heeft en sleept u elk van deze langs het spoor.
De output is eenvoudig, productie-ready CSS zonder afhankelijkheid van deze site en geen leverancier prefixes die u niet nodig hebt, omdat elke huidige browser heeft ondersteund onvoorbereide gradiënten voor jaren. Alles draait in uw browser, en de gegenereerde CSS is de uwe te gebruiken in elk project, commercieel of anderszins.
Veelgestelde vragen
- Hoe maak ik een CSS-gradiënt aan?
- Kies lineair of radiale, voeg uw kleur stopt, zet de hoek, dan kopieer de gegenereerde CSS recht in uw stylesheet.
- Wat is het verschil tussen lineair en radiale?
- Een lineair verloop gaat over een rechte lijn onder een hoek die u kiest. Een radiaal verloop verspreidt zich naar buiten in een cirkel of ellips vanuit een middenpunt.
- Kan ik meer dan twee kleuren gebruiken?
- Ja. Voeg zoveel kleur stopt als je nodig hebt en plaats elke langs het verloop.