Hoe creëer je een fade-out effect met css?

Op veel websites zie je het terug: stukken tekst, afbeeldingen of andere elementen die aan de randen langzaam vervagen. Met dit ‘fade-out’ effect krijgen elementen een mooi verloop waarmee ze subtiel overgaan in de achtergrond. Hieronder laten we een paar voorbeelden zien, zodat je direct ziet wat we bedoelen.

Fade-out effect aan de onderkant van de afbeelding van het dashboard

Fade-out van de reviews

Wat is een fade-out effect?

Een fade-out effect is een effect waarmee je tekst, afbeeldingen of andere elementen langzaam transparant maakt. Het lijkt alsof de content in de achtergrond wegvloeit. Je hebt verschillende fade-out effecten.

Linear fade-out

De bekendste variant is de lineair fade-out. Daarbij wordt het een element aan de zij-, boven- of onderkant transparant.

Radial fade-out

Hierbij vervaagt een element in een soort cirkel. Dat zorgt ervoor dat de afbeelding als het ware oplost in de omgeving en een zachte, ingelijste uitstraling krijgt.

Hoe creëer je een fade-out effect op je eigen website?

Er zijn eigenlijk twee manieren om dit aan te pakken.

Een fade-out effect geven aan een afbeelding

Een afbeelding kun je met een programma als Figma of Photoshop een fade-out effect geven. Daarna exporteer je de afbeelding en zet je ‘m op je website. Een voorbeeld zie je hieronder. Deze website hebben we ontwikkeld voor Relivon. De website heeft op de homepage een afbeelding staan die aan de linkerkant zachtjes vervaagd.

Wanneer je dat afbeelding aanpast ben je het effect helaas kwijt. In dat geval moet je in Figma of Photoshop een nieuwe afbeelding maken met een fade-out.

Fade-out effect met code

Wil je tekst of andere elementen een fade-out effect geven, of wil je ervoor zorgen dat als iemand een nieuwe afbeelding upload deze automatisch het effect krijgt, dan kun je voor een duurzamere oplossing kiezen door een stukje CSS-code te voegen.

Fade-out effect toevoegen met CSS-code

CSS-code linear fade-out

Met onderstaand stukje code creëer je een fade-out effect dat een element aan de beide zijkanten transparant maakt. Hieronder leggen we verder uit hoe het werkt.

.CSS-selector {
--fade-amount: 5%;
mask-image: linear-gradient(to left, transparent, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent);
} 

Om het stukje code te gebruiken moet je eerst een CSS-class geven aan het element dat de fade-out moet krijgen. Op de plek in de code waar nu ‘.CSS-selector’ staat vul je dan de juiste class in.

De code werkt als volgt: als eerste stel je een ‘variabel’ in. Dat gaat dan om dit stukje code:

--fade-amount: 5%;

Deze variable gebruik je om de hoeveelheid ‘fade’ aan te geven die gebruikt wordt in het element. In dit geval zal aan beide zijkanten 5% van het element transparant worden. Je kunt hier zelf mee spelen en kijken wat welke hoeveelheid fade je mooi vindt.

Vervolgens gebruik je de CSS-property ‘mask-image’ waarmee je een masker legt bovenop het element. Dit masker zorgt uiteindelijk voor het fade-effect. Dit masker geef je een linear-gradient waarbij je de haakjes () gebruikt om argumenten mee te geven aan de gradient. Binnen die haakjes begin je met ’to left’. Dit geeft de richting van de gradient aan. Houdt er rekening mee dat de eerste kleur die je invult aan de rechterkant verschijnt. Dit kan soms verwarrend zijn. Vul in je in plaats van ’to left’ de richting ’to bottom’ in, dan zul je zien dat het fade effect van boven naar beneden loopt.

Vervolgens geef je ‘kleuren’ mee als argumenten tussen de haakjes. Je gebruikt daarvoor ’transparent’ en ‘black’. Natuurlijk is transparent geen kleur, maar het zorgt ervoor dat de zijkant transparant wordt. Black gebruik je omdat in combinatie met een mask-image property zwart staat voor volledige zichtbaarheid binnen een masker. In praktijk kun je hier ook ‘blue’ invullen, dan zal de code nog steeds werken.

transparent, black, black, transparent

In deze volgorde zijn beide zijkanten dus transparant en is het middenstuk zichtbaar.

Om er vervolgens voor te zorgen dat je aan beide zijkanten een fade krijgt die symmetrisch is, gebruik je de ‘fade-amount’ variable. Plaats daarvoor var(–fade-amount) achter de kleur ‘black’. Dit bepaalt op hoeveel procent de kleur zwart vanaf de rechterkant begint. Achter de tweede referentie van ‘black’ plaats je calc(100% – var(–fade-amount)). Dit drukt de kleur zwart compleet naar 100% op de linkerkant van het element, maar trekt vervolgens de ingestelde fade-amount af van het geheel. Hierdoor krijg je een fade die perfect symmetrisch is.

black var(--fade-amount), black calc(100% - var(--fade-amount))

Het eindresultaat ziet er dan als volgt uit:

CSS-code radial fade-out

Wil je ditzelfde effect nou toevoegen met een ‘radial gradient’ waardoor je een cirkelvormige fade out creëert? Voeg dan onderstaande code toe. In het geval van een radial gradient is het niet nodig om 4 kleuren toe te voegen. Je voegt 2 kleuren toe waarbij de eerste kleur staat voor de binnenkant van de cirkel en de tweede kleur effect heeft op de buitenkant.

De linear-gradient verander je in ‘radial-gradient’ en ’to left’ verander je in  ‘circle’.

.CSS-selector {
--fade-amount: 20%;
mask-image: radial-gradient(circle, black var(--fade-amount), transparent);
}