CSS-verloopgenerator voor lineaire, radiale en conische achtergronden
De pagina opent met een verloop van drie kleuren en de bijbehorende CSS staat al in de uitvoervakken. Wijzig één stop en beide vakken volgen meteen. Deze CSS-verloopgenerator dekt de drie verloopfuncties van de browser, linear-gradient(), radial-gradient() en conic-gradient(), plus de repeating--variant van elk.
Vijf stappen van eerste stop tot gekopieerde regel
- Kies Lineair, Radiaal of Conisch. Lineair krijgt een hoek van 0 tot 360 graden. Radiaal krijgt een vorm, cirkel of ellips, en een middelpunt. Conisch krijgt een starthoek en een middelpunt.
- Bewerk de kleurstops. Elke stop heeft een kleurkiezer, een hexveld, een positie in procent en een alfa van 0 tot 100. De pijlknoppen verplaatsen een stop, het kruisje verwijdert hem en Stop toevoegen voegt een nieuwe toe.
- Druk op Gelijkmatig verdelen om de stops van 0 tot 100 te spreiden, of op Stops omkeren om het verloop om te draaien. Een voorinstelling vult de hele editor als je liever met een voorbeeld begint.
- Bekijk het grote voorbeeld. Het staat op een dambordpatroon, zodat transparante delen zichtbaar zijn.
- Druk op Kopiëren boven het vak dat je nodig hebt.
Harde randen, strepen en stops in de verkeerde volgorde
Twee stops op dezelfde positie maken een harde rand in plaats van een overgang. De voorinstelling Strepen gebruikt dit: donkere en amberkleurige banden van elk 10%, herhaald omdat de herhaalschakelaar aan staat en de laatste stop op 20% zit. Die laatste positie is de lengte van één herhaling. Zet hem op 100% en de herhaling verdwijnt.
De tool sorteert je stops nooit. Als een stop vóór een eerdere staat, tilt de browser hem naar de eerdere positie, wat een nieuwe harde rand geeft. De posities die je typt zijn beperkt tot 0 tot 100.
Wat de twee uitvoervakken bevatten
Het eerste vak bevat één regel, background: ...;. Het tweede bevat twee regels: een background-color gelijk aan de eerste stop en een background-image met het verloop. De kleur is de reserve voor een browser die het verloop niet kan lezen. Dekkende stops worden geschreven als #rrggbb. Een stop met alfa onder 100 wordt rgb(0 0 255 / 50%). Radiale en conische verlopen schrijven het midden als at 50% 50%. Er wordt geen grootte-sleutelwoord geschreven, dus de browserstandaard farthest-corner geldt.
Wat de generator niet doet
Kleuren zijn alleen hex: #rgb of #rrggbb. Kleurnamen, hsl() en hex met acht cijfers worden niet gelezen, en een foute waarde toont een fout terwijl de laatste geldige kleur blijft staan. Er is één verloopalaag, geen lijst met achtergronden, geen kleurhints tussen stops en geen eigen radiale grootte. Een verloop heeft 2 tot 8 stops.
Niets verlaat het tabblad
Het voorbeeld wordt ingesteld met een stijleigenschap op een pagina-element. Bij bewerken of kopiëren wordt geen verzoek verstuurd en er wordt niets opgeslagen, dus herladen brengt het beginverloop terug. De kopieerknoppen schrijven naar je klembord. Er is geen bestandsdownload.
Veelgestelde vragen (FAQ)
rgb(r g b / 50%). Het voorbeeld staat op een dambordpatroon zodat je het kunt zien.