CSS-verloopgenerator
Local only — nothing is uploaded unless you save or share it.
Een CSS-verloopgenerator voor lineair, radiaal en conisch — kopieer de code er zo uit.
- Kies de soort verloop, en de hoek als het er een heeft
- Zet je kleuren — voeg stops toe of plaats ze met de hand
- Kopieer het CSS
Bewaar deze tool
Houd CSS-verloopgenerator bij de hand
Gebruik het deelmenu van je browser en dan „Zet op beginscherm”.
Over deze tool
Een verloop is een van die dingen die sneller op het oog te bouwen zijn dan met de hand te schrijven, want het getal dat je wilt is zelden het getal dat je als eerste gokt. Hier zie je het resultaat terwijl je het verandert, en krijg je het CSS eronder aangereikt. Alle drie de soorten zitten erin: lineair voor de gebruikelijke overgang van links naar rechts of van boven naar beneden, radiaal voor een gloed die vanuit het midden uitwaaiert, en conisch voor de zwaai rond een punt waar kleurenwielen en taartdiagrammen van gemaakt zijn. Je kunt zoveel kleurstops toevoegen als je wilt en elk ervan plaatsen, of de posities leeg laten en de browser ze gelijkmatig laten verdelen, wat je bijna altijd wilt en de waarde kort genoeg houdt om er later nog in te werken. De herhaalstand maakt van elk ervan een patroon dat zich herhaalt, en zo maak je strepen in CSS zonder ook maar één afbeelding. Elke kleur die je typt wordt gelezen en opnieuw geschreven in plaats van doorgegeven, dus de waarde die op je klembord belandt is een kleur en verder niets. Het gereedschap draait volledig in je browser.
Veelgestelde vragen
Wat is het verschil tussen lineair, radiaal en conisch?
Lineair vervaagt langs een rechte lijn, en dat is degene die de meeste mensen bedoelen. Radiaal waaiert vanuit een punt naar buiten als een gloed. Conisch zwaait om een punt heen in plaats van er vandaan, en dat is wat kleurenwielen en taartpunten in puur CSS mogelijk maakt.
Moet ik de posities van de stops instellen?
Meestal niet. Laat je ze leeg, dan verdeelt de browser de stops gelijkmatig, wat je meestal wilt en wat het CSS kort en later makkelijk te bewerken houdt. Zet ze met de hand als je een kleur langer wilt laten staan, of als je een harde grens tussen twee kleuren wilt.
Hoe maak ik een harde streep in plaats van een overgang?
Geef twee stops dezelfde positie. Een verloop dat van de ene kleur op 50 procent naar een andere ook op 50 procent gaat, wisselt meteen in plaats van te mengen. Combineer dat met de herhaalstand en je hebt strepen zonder enig afbeeldingsbestand.
Waarom kwam mijn kleur terug als hexcode?
Elke kleur wordt gelezen en herschreven in plaats van rechtstreeks doorgegeven. Dat houdt de uitvoer een geldige kleur en verder niets, wat telt omdat de waarde in een stylesheet terechtkomt. Een kleur die niet te begrijpen is wordt geweigerd in plaats van stilzwijgend opgenomen.
Werken verlopen in elke browser?
Lineair en radiaal werken al vele jaren overal. Conisch is nieuwer maar wordt door alle huidige browsers ondersteund. Moet je iets heel ouds ondersteunen, dan toont de generator ook een effen kleur die je er als terugval vóór kunt zetten.
Help deze tool beter te maken
Een fout gevonden, iets anders willen, of mis je een tool?
Je hebt een niet-verzonden bericht.
Dank je — hij is binnen. Het antwoord vind je in je postvak.Go to my messages