CSS Tools CSS-gradiëntgenerator
Maak visueel lineaire, radiale en conische gradiënten en kopieer nette CSS. Stapel meerdere lagen, voeg kleurstops met transparantie toe en sleep direct in het voorbeeld om de richting te wijzigen.
CSS-gradiënt van groen naar wit
Elke gradiënt kan meerdere lagen hebben, en elke laag heeft een eigen type, hoek en kleuren. Het resultaat is pure CSS zonder vendor-prefixes, klaar om in je project te plakken. De link van de pagina bewaart je gradiënt, zodat je hem kunt delen of later terugvinden.
Zo gebruik je de gradiëntgenerator
Kies een gradiënttype
Kies per laag lineair, radiaal of conisch. Lineair mengt kleuren langs een rechte lijn, radiaal spreidt ze vanuit een middelpunt, conisch draait ze rond het middelpunt.
Pas kleuren en lagen aan
Klik op de kleurenbalk om een kleurstop toe te voegen, sleep hem om de positie te wijzigen en kies elke kleur met transparantie. Met de knop om een laag toe te voegen leg je er een extra gradiënt bovenop.
Bekijk je ontwerp
Test de gradiënt op zes vormen: volledig scherm, vierkant, liggende en staande rechthoek, cirkel en ster. Je kunt ook de achtergrond achter de vorm wijzigen.
background: linear-gradient(90deg, #008000 0%, #ffffff 100%);