De korte versie
- Een radiaal kleurverloop mengt kleur vanuit een middelpunt naar buiten in cirkels of ellipsen, in plaats van langs een rechte lijn.
- Omdat het oog naar het helderste gebied gaat, werkt een radiaal kleurverloop als een spotlight die mensen vertelt waar ze eerst moeten kijken.
- De nuttigste radiale kleurverlopen staan uit het midden, achter het onderwerp of deels buiten het beeld, niet pal in het centrum.
- Een ellips volgt de vorm van zijn container, terwijl een cirkel zijn verhoudingen houdt, en dat doet ertoe op hoge en brede formaten.
- Donkere radiale gloed krijgt snel banding, dus geef hem ruimte om uit te vloeien en voeg een beetje korrel toe.
Op deze pagina
Een radiaal kleurverloop is een verloop dat zich vanuit één punt naar buiten verspreidt, in ringen, in plaats van in één richting te reizen. Het midden houdt één kleur vast en elke ring schuift op naar de volgende. Omdat onze ogen eerst naar het helderste, meest verzadigde gebied van een beeld gaan, werkt een radiaal kleurverloop als een spotlight: jij bepaalt waar de aandacht landt en zet daar je kop, product of gezicht.
Deze gids gaat over radiale kleurverlopen gebruiken in ontwerp. Zie voor de volledige syntaxis CSS radial-gradient(); zie voor de vergelijking met lineair, conisch en mesh soorten kleurverlopen.
Wat een radiaal kleurverloop met een layout doet
Een lineair kleurverloop suggereert richting: licht van boven, een horizon, een veeg. Een radiaal kleurverloop suggereert een bron. Die bron wordt het natuurlijke brandpunt, dus alles wat erop staat voelt bewust en alles aan de randen voelt secundair. Het is een van de simpelste manieren om visuele hiërarchie op te bouwen zonder ook maar één vorm toe te voegen.
radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)Cirkel of ellips
In CSS is een radiaal kleurverloop standaard een ellips, uitgerekt naar de verhoudingen van zijn vak. Op een brede banner betekent dat een platte, brede gloed; op een hoge story wordt het een hoog ovaal. Een cirkel houdt op elk formaat dezelfde vorm, en dat leest meer als een echte lichtbron.
Gebruik een ellips wanneer de gloed het formaat gelijkmatig moet vullen, zoals bij een vignet. Gebruik een cirkel wanneer het kleurverloop op één lamp, een zon of een halo achter één object moet lijken.
Waar je het midden plaatst
Een gloed pal in het midden van een vierkant is het meest voorkomende radiale kleurverloop en het minst interessante. Het lijkt op een schietschijf. Het midden verplaatsen verandert de hele sfeer van het stuk.
- Achter het onderwerp. Zet de gloed recht achter een product of portret, zodat het loskomt van de achtergrond.
- Op een derde. De bron op ongeveer een derde van de breedte of hoogte plaatsen voelt in balans zonder statisch te zijn.
- Buiten het beeld. Een midden onder of naast het canvas geeft een zachte rand van licht, zoals een zonsopgang of een lamp net buiten beeld.
- Weg van de tekst. Zit het helderste punt onder witte letters, dan zakt het contrast precies waar je het het hardst nodig hebt.
Vier taken die radiale kleurverlopen goed doen
Spotlight en focus
Een helder midden op een donkere ondergrond wijst naar wat erop staat. Het past bij productbeelden, evenementposters en aankondigingsposts waar één ding telt.
Vignet
Het omgekeerde: een lichter midden dat naar donkerdere randen vervaagt. Een subtiel vignet trekt het oog naar binnen en laat een vlakke achtergrond gefotografeerd aanvoelen. Houd de verandering klein, anders lijkt het op een oud camerafilter.
radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)Gloed en halo
Een kleine, verzadigde cirkel die naar transparant vervaagt, leest als licht dat van iets af komt: een neonreclame, een scherm, een icoon. Leg er twee of drie op verschillende posities over elkaar en je bent halverwege een aurora-kleurverloop.
Kleurvelden
Stapel meerdere radiale kleurverlopen met transparante randen en ze vloeien samen tot een zacht, organisch veld. Zo worden de meeste mesh-kleurverlopen in CSS nagebootst.
.poster {
background:
radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%),
radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%),
radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%),
#0f0a1f;
}Radiale kleurverlopen met tekst
Een poster waarbij het belichte gebied achter de kop zit.
Een story waarin de tekst in het rustige, donkerdere vlak blijft.
Bepaal welke van twee taken de gloed heeft. Of hij omlijst de woorden, met donkere letters op het lichte midden, of hij omlijst de ruimte naast de woorden, met lichte letters op de donkere omgeving. De problemen beginnen wanneer de rand van de gloed door een regel tekst snijdt, omdat het contrast halverwege verandert. Tekst op een kleurverloop heeft meer over het vinden van de rustige zone.
Veelvoorkomende problemen met radiale kleurverlopen
Vermijd
- Een gecentreerde gloed op elk ontwerp, als een schietschijf
- Een harde ring waar twee stops te dicht bij elkaar staan
- Een donkere gloed die over een korte afstand vervaagt en banding krijgt
- Een ellips die per ongeluk dun over een brede banner is uitgerekt
Doe
- Plaats de bron waar het onderwerp of het licht zou zijn
- Spreid de stops zodat de afname als echt licht voelt
- Geef donkere gloed een lange uitloop en een beetje korrel
- Kies per formaat bewust voor cirkel of ellips
Banding is degene om op te letten. Een gloed van diep marineblauw naar zwart beslaat heel weinig kleurniveaus over een groot gebied, dus hij verspringt in stappen. Laat de uitloop verder reizen en voeg korrel toe, zoals beschreven in banding in kleurverlopen.
Vragen die mensen stellen
Wat is een radiaal kleurverloop?
Een radiaal kleurverloop mengt kleuren vanuit een middelpunt naar buiten in cirkels of ellipsen, in plaats van langs een rechte lijn zoals een lineair kleurverloop.
Wat is het verschil tussen een radiaal kleurverloop als cirkel en als ellips?
Een ellips rekt mee met de verhoudingen van zijn container, terwijl een cirkel op elk formaat dezelfde ronde vorm houdt. In CSS is de standaard een ellips.
Wanneer gebruik ik een radiaal kleurverloop in plaats van een lineair?
Gebruik een radiaal kleurverloop wanneer je een brandpunt, een gloed of een vignet wilt. Gebruik een lineair kleurverloop wanneer je richting wilt, zoals licht van boven of een horizon.
Waarom lijkt mijn radiale kleurverloop op een schietschijf?
Waarschijnlijk staat het gecentreerd, met stops die dicht bij elkaar liggen. Verplaats het midden uit het centrum of buiten het beeld, en spreid de stops zodat het licht geleidelijk vervaagt.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
