CSS gradient maken met kleurstops en live voorbeeld
Met deze CSS gradient generator ontwerp je lineaire, radiale en conische kleurverlopen. Kies het type, pas de hoek aan, stel twee tot acht kleurstops in en kopieer de complete background-declaratie of alleen de gradientwaarde. Het voorbeeld wordt direct door de browser gerenderd.
Lineaire gradient
Een lineair verloop beweegt langs een rechte as. De tool genereert syntax zoals linear-gradient(135deg, #6366f1 0%, #ec4899 100%). De hoek bepaalt de richting volgens CSS: 0 graden wijst omhoog, 90 graden naar rechts, 180 graden omlaag en 270 graden naar links.
Lineaire gradients zijn geschikt voor pagina-achtergronden, knoppen, overlays en decoratieve secties. Kies kleuren met voldoende contrast wanneer er tekst bovenop staat.
Radiale gradient
Een radiale gradient verspreidt kleuren vanuit een middelpunt naar buiten. Deze generator gebruikt een cirkelvormige standaard: radial-gradient(circle, ...). De hoekinstelling is daarom verborgen. De tool biedt geen aparte bediening voor positie, ellipsvorm of groottewoorden zoals closest-side; die kun je na het kopiëren handmatig in CSS toevoegen.
Conische gradient
Een conisch verloop draait kleuren rondom een centrum, vergelijkbaar met een kleurenwiel. De uitvoer gebruikt conic-gradient(from 0deg, ...). Dit type is bruikbaar voor wijzerplaten, badges, kleurwielen en eenvoudige diagramachtige effecten. Een conische gradient is alleen visuele vormgeving en levert geen semantisch of toegankelijk datadiagram.
Kleurstops en posities
Iedere kleurstop combineert een kleur met een positie tussen 0 en 100 procent. Stops hoeven niet gelijkmatig verdeeld te zijn. Door twee stops dicht bij elkaar te zetten ontstaat een snelle overgang; dezelfde positie kan een harde scheiding opleveren. De tool bewaart de volgorde waarin stops staan en sorteert ze niet automatisch wanneer je posities kruist. De browser past dan de CSS-regels voor niet-oplopende stopposities toe, wat onverwachte randen kan geven.
Met Stop toevoegen wordt een nieuwe willekeurige kleur tussen de laatste twee stops geplaatst. Minimaal twee en maximaal acht stops worden door de interface ondersteund. CSS zelf kan meer stops verwerken.
Voorinstellingen en willekeurige gradients
De presets geven snelle combinaties voor onder meer zonsondergang, oceaan en donkere achtergronden. Willekeurig genereert twee tot vier kleuren met gelijkmatig verdeelde posities en een willekeurige hoek. Een willekeurig resultaat is niet automatisch geschikt voor een merk, tekstcontrast of rustige gebruikersinterface; gebruik het vooral als inspiratie.
Gradient toepassen in CSS
De gegenereerde regel gebruikt background. Wil je naast het verloop ook een fallbackkleur, zet die in een aparte eerdere declaratie. Gradients zijn CSS-afbeeldingen en kunnen ook worden gebruikt waar een afbeeldingswaarde is toegestaan, afhankelijk van de eigenschap. Meerdere achtergrondlagen kunnen met komma's worden gecombineerd.
Toegankelijkheid en prestaties
Controleer contrast op alle delen achter tekst, niet alleen op één gemiddelde kleur. Een verloop kan lokaal een te lichte of donkere zone hebben. Gebruik kleur niet als enige informatiedrager en respecteer bewegingsvoorkeuren wanneer gradients worden geanimeerd. Statische gradients zijn meestal efficiënt, maar grote, complexe of continu geanimeerde lagen kunnen extra rendering kosten.
Browsercontrole
De uitvoer gebruikt moderne, niet-geprefixte CSS-syntax. Test het resultaat in de browsers en apparaten die je ondersteunt, vooral bij conische gradients en afdrukweergave. Bewaar de gegenereerde code in je eigen stylesheet en geef kleurvariabelen betekenisvolle namen wanneer dezelfde tinten op meerdere plaatsen terugkomen.
Reacties