De korte versie
- Gradient color stops zijn de punten langs een verloop waar een bepaalde kleur wordt bereikt, geschreven als een kleur gevolgd door een positie, zoals
#7c3aed 40%. - Stops zonder positie worden gelijkmatig verdeeld, wat zelden de natuurlijkste keuze is.
- Een colour hint is een los percentage tussen twee stops dat het middelpunt van hun overgang verschuift zonder een kleur toe te voegen.
- Twee stops op dezelfde positie geven een harde rand, zo maak je strepen en scherpe banden in CSS.
- Meerdere tussenstops die een easingcurve volgen halen de zichtbare rand weg waar een lineaire fade begint en eindigt.
Op deze pagina
Gradient color stops zijn de punten waar een verloop een bepaalde kleur bereikt. In CSS is elke stop een kleur met een optionele positie, zoals #7c3aed 40%, en de browser mengt in een rechte lijn tussen aangrenzende stops. Waar je ze plaatst bepaalt bijna alles: of een overgang soepel of abrupt aanvoelt, of één kleur domineert en of het oog een naad ziet waar een fade begint. Stops verschuiven is vaak een grotere verbetering dan kleuren veranderen.
Hoe gradient color stops werken
Een verloopslijn loopt van 0 procent tot 100 procent. Elke stop pint een kleur vast op een punt van die lijn. Laat je de posities weg, dan verdeelt de browser de stops gelijkmatig, dus drie kleuren landen op 0, 50 en 100 procent. Tussen elk paar verandert de kleur in een constant tempo. De volledige syntaxis staat in de linear-gradient()-referentie van MDN.
#1e3a8a, #f472b6Wat er gebeurt
#1e3a8a 20%, #f472b6 80%Wat er gebeurt
#1e3a8a, 30%, #f472b6Wat er gebeurt
#1e3a8a 50%, #f472b6 50%Wat er gebeurt
#1e3a8a 0 40%, #f472b6 40% 100%Wat er gebeurt
#1e3a8a 10px, #f472b6 200pxWat er gebeurt
Waarom gelijkmatig verdeelde stops kunstmatig ogen
Echt licht verandert zelden in een gelijkmatig tempo. Een zonsondergang is vooral één kleur met een smalle band verandering bij de horizon; een schaduw is vooral middentoon met een korte daling aan de rand. Gelijkmatige verdeling geeft elke kleur hetzelfde aandeel, wat als een grafiek leest. Bepaal welke kleur leidt en laat die het grootste deel van de ruimte houden.
Colour hints: het middelpunt verschuiven
Een colour hint is een los percentage tussen twee stops. Het voegt geen kleur toe; het verschuift het punt waar de overgang precies halverwege is. Een hint op 20 procent betekent dat de kleur haar middelpunt vroeg bereikt, zodat de tweede kleur snel arriveert en dan blijft hangen. Hints zijn de goedkoopste manier om een verloop van twee kleuren minder mechanisch te laten aanvoelen.
Harde stops voor strepen en banden
Delen twee stops een positie, dan is er geen afstand om over te mengen en verandert de kleur direct. Zo teken je strepen, gesplitste achtergronden, voortgangsbalken en vlaggen met niets dan een verloop. De syntaxis met dubbele positie, kleur begin einde, maakt het korter om te schrijven. Herhalende verlopen nemen hetzelfde idee en leggen het in tegels, behandeld in repeterende lineaire verlopen.
Eased stops: de naad wegwerken
Een lineaire overgang heeft een zichtbaar begin en einde. Laat je een donkere scrim over een foto naar transparant uitlopen, dan zie je vaak een lijn waar de fade begint, omdat het veranderingstempo van nul naar volle snelheid springt. Meerdere tussenstops langs een easingcurve lossen het op: de kleur begint langzaam te veranderen, versnelt en komt dan tot rust. Dat is vooral nuttig voor overlays achter tekst en voor transparante verlopen.
/* Linear: a visible edge where the fade starts */
.scrim-linear {
background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}
/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
background: linear-gradient(180deg,
rgba(10, 12, 20, 0) 40%,
rgba(10, 12, 20, 0.02) 46%,
rgba(10, 12, 20, 0.08) 52%,
rgba(10, 12, 20, 0.18) 58%,
rgba(10, 12, 20, 0.32) 66%,
rgba(10, 12, 20, 0.48) 74%,
rgba(10, 12, 20, 0.62) 82%,
rgba(10, 12, 20, 0.73) 91%,
rgba(10, 12, 20, 0.8) 100%);
}Stops plaatsen: een praktische methode
- 1
Kies de leidende kleur
Geef hem 50 tot 70 procent van de lijn. Hij zet de sfeer.
- 2
Plaats de verandering waar het oog heen moet
Zet de snelste kleurverandering bij het brandpunt, niet standaard in het midden.
- 3
Voeg hints toe voordat je kleuren toevoegt
Voelt een overgang niet goed, probeer dan eerst het middelpunt te verschuiven. Extra kleuren voegen complexiteit toe.
- 4
Controleer de middelpunten
Kijk naar de kleur halverwege elk paar. Is die grijs, voeg dan een brug toe of meng in OKLCH, zoals uitgelegd in gradient interpolation.
- 5
Laat lange fades uitlopen met easing
Voeg voor alles wat naar transparant of een egale kleur uitloopt tussenstops toe, zodat er geen naad is.
Vermijd
- Elke kleur een gelijk aandeel
- Een nieuwe kleur om elk probleem op te lossen
- Lineaire fades naar transparant achter tekst
- Harde stops waar je zachte overgangen bedoelde
Doe
- Eén leidende kleur, de andere komen laat
- Colour hints om een overgang te verschuiven
- Eased stops voor scrims en fades
- Harde stops alleen voor strepen en banden
Wil je stops in hun eenvoudigste vorm zien, dan loopt CSS lineaire verlopen de volledige syntaxis door en toont soorten verlopen hoe stops zich in radiale en conische verlopen gedragen. In Gradiently regelt een Mark zijn eigen overgangen en licht op elk formaat, dus je kunt meteen ontwerpen en de tijd aan de woorden besteden.
Vragen die mensen stellen
Wat is een gradient color stop?
Een punt langs een verloop waar een bepaalde kleur wordt bereikt, in CSS geschreven als een kleur met een optionele positie, zoals #7c3aed 40%.
Wat gebeurt er als ik stops geen positie geef?
De browser verdeelt ze gelijkmatig van 0 tot 100 procent. Drie kleuren landen op 0, 50 en 100 procent.
Wat is een colour hint in een CSS-verloop?
Een los percentage tussen twee stops, zoals #4c1d95, 25%, #f9a8d4. Het verschuift het halverwegepunt van de overgang zonder een kleur toe te voegen.
Hoe maak ik een harde lijn in een CSS-verloop?
Geef twee stops dezelfde positie, bijvoorbeeld #0f172a 50%, #f8fafc 50%, of gebruik de syntaxis met dubbele positie #0f172a 0 50%, #f8fafc 50% 100%.
Hoe laat ik een verloop vloeiend naar transparant uitlopen?
Voeg meerdere tussenstops toe waarvan de dekking een ease-in-out-curve volgt. Een eenvoudige fade met twee stops toont vaak een lijn waar hij begint.
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