Wat doet de Gradient Generator?
De Gradient Generator is een online tool waarmee je een CSS-verloop kunt ontwerpen door het type te selecteren, de richting of vorm aan te passen en tot maximaal acht kleurstops toe te voegen. Terwijl je wijzigingen aanbrengt in de instellingen, zie je direct een live preview van het verloop op je scherm. Wanneer het ontwerp naar wens is, kun je de gegenereerde CSS-code met een enkele klik kopiëren.
Dit hulpmiddel is nuttig voor verschillende doeleinden en gebruikers:
- Iemand die een CSS-achtergrond wil maken.
- Een gebruiker die simpelweg twee kleuren en een richting voor een verloop wil aanpassen.
- Een ontwerper of front-end developer die het type, de positie en meerdere kleurstops van een verloop nauwkeurig wil afstellen.
De invoeropties van de tool
Om het gewenste CSS-verloop te genereren, biedt de tool verschillende invoervelden en instellingen onder specifieke labels:
- Type verloop: Je kunt kiezen uit drie verschillende typen verlopen, namelijk Lineair (linear), Radiaal (radial) of Conisch (conic).
- Hoek: Een numerieke waarde die de richting bepaalt voor lineaire of conische verlopen.
- Vorm: Voor radiale verlopen selecteer je de vorm, waarbij je kunt kiezen tussen een Ellips of een Cirkel.
- Kleurstops: Je kunt tot maximaal acht kleurstops configureren. Elke individuele kleurstop bestaat uit:
- Kleur van stop: De specifieke kleurwaarde van de stop.
- Positie: Een percentage dat loopt van 0% tot 100%.
De uitvoer van de tool
De Gradient Generator genereert direct visuele en tekstuele resultaten op basis van je invoer:
- Preview: Een directe visuele weergave van het verloop waarin alle gemaakte aanpassingen live te zien zijn.
- CSS: De daadwerkelijke, gegenereerde CSS-code die hoort bij het ontworpen verloop. Met de knop "Kopieer CSS" kopieer je deze code direct naar je klembord. Na het klikken op deze knop verandert de status van de knop in "Gekopieerd".
Regels, standaardwaarden en uitzonderingen
Bij het ontwerpen van een verloop gelden er binnen de tool een aantal vaste regels en standaardinstellingen:
- Standaardwaarden bij opstarten: Het initiële verloop start altijd met twee specifieke kleurstops:
#6366f1 0%en#ec4899 100%. - Nieuwe kleurstops: Wanneer je een nieuwe kleurstop toevoegt via de knop "Kleurstop toevoegen", krijgt deze automatisch een standaardpositie van 50%.
- Limiet op kleurstops: Je kunt maximaal acht kleurstops gebruiken. Zodra er exact acht kleurstops actief zijn, wordt de knop "Kleurstop toevoegen" uitgeschakeld. Indien gewenst kun je kleurstops ook weer weghalen met de knop "Kleurstop verwijderen".
- Werking van de hoek: De hoek-schuifregelaar voor lineaire of conische verlopen bepaalt de richting van het verloop, waarbij een waarde van 0° recht omhoog wijst en een waarde van 90° naar rechts wijst. Radiale verlopen maken geen gebruik van een hoek; in plaats daarvan bepaal je de weergave met de vormopties cirkel of ellips.
Privacy en gegevensverwerking
Elk verloop wordt direct in je browser gerenderd. Niets van wat je in de tool instelt, wordt geüpload naar BroBroGo.
Veelgestelde vragen (FAQ)
Wat is het verschil tussen lineaire, radiale en conische verlopen?
Een lineair verloop (linear gradient) mengt kleuren langs een rechte lijn die je met een hoek instelt. Een radiaal verloop (radial gradient) verspreidt kleuren vanuit het midden naar buiten in een cirkel of ellips. Een conisch verloop (conic gradient) draait de kleuren om het middelpunt heen, net als een kleurencirkel.
Wat zijn kleurstops?
Elke kleurstop is een kleur die is vastgezet op een specifieke positie langs het verloop — 0% aan het begin, 100% aan het einde. Verschuif een stop om te bepalen waar die kleur het sterkst is, of voeg extra stops toe voor een rijkere overgang. Je kunt er maximaal acht gebruiken.
Hoe bepaal ik de richting van het verloop?
Bij een lineair of conisch verloop bepaalt de hoek-schuifregelaar de richting — 0° wijst omhoog, 90° wijst naar rechts. Een radiaal verloop heeft geen hoek; kies in plaats daarvan een cirkel- of ellips-vorm om te bepalen hoe het verloop zich verspreidt.