Light Leak
Trois dégradés surdimensionnés animés en CSS pur fusionnent via mix-blend-mode screen pour reproduire les fuites lumineuses argentiques — sans une ligne de JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est 100 % CSS : aucun JavaScript, aucun canvas. Trois <div> (.lightleak-a, .lightleak-b, .lightleak-c) sont empilés dans un .lightleak-overlay qui porte mix-blend-mode: screen. Ce mode de fusion additionne les canaux RGB : superposer orange et rose donne du blanc chaud, superposer deux zones sombres reste sombre — exactement le comportement d'une fuite de lumière sur pellicule argentique.
Chaque div est délibérément surdimensionné (150 %, 120 %, 80 × 200 % de son conteneur) et positionné en débordement. L'overflow: hidden du .lightleak-container le découpe — on ne voit que la zone qui entre dans le cadre, ce qui donne l'illusion d'une source de lumière hors-champ qui glisse sur la scène.
Trois animations @keyframes indépendantes pilotent le mouvement : leakDrift1 (7 s), leakDrift2 (9 s), leakDrift3 (6 s). Leurs durées sont premières entre elles (PGCD = 1 s, PPCM = 63 s) — les trois ne se retrouvent jamais en phase simultanément avant 63 secondes, ce qui rend le mouvement organique. Chaque keyframe combine translate, rotate (±3–5°) et opacity pour imiter le tremblement de la caméra et la variation d'exposition d'un film physique.
Les dégradés ont des géométries différentes : .lightleak-a utilise un radial-gradient ancré à 30 % / 50 % (nuance orange→jaune), .lightleak-b un radial-gradient à 70 % / 30 % (nuance rose→mauve), .lightleak-c un linear-gradient à 135° sur un div en portrait 80 × 200 % (nuance or ambré). La composition des trois crée les zones de surexposition caractéristiques du look film.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucun bloc
@media (prefers-reduced-motion: reduce)— les animations tournent quelle que soit la préférence système. À implémenter manuellement si nécessaire (voir FAQ). - Le
.lightleak-overlayne porte pasaria-hiddendans le code fourni — à ajouter si l'effet est purement décoratif, pour éviter que le lecteur d'écran ne traverse inutilement les divs vides. - L'effet n'utilise pas le clavier et n'expose aucune interactivité — pas de problème de focus ou de trap à gérer.
- Le contraste du texte dépend entièrement du contenu que vous placez dans
.lightleak-content-bg; les fuites lumineuses enmix-blend-mode: screenpeuvent éclaircir localement le fond et réduire le contraste — vérifiez WCAG AA (4,5:1) avec votre texte final. - Aucune alerte de clignotement (WCAG 2.3.1) : les animations ont des transitions douces
ease-in-outet les durées longues (6–9 s) ne produisent pas de flashs.
Compatibilité navigateur
Nécessite mix-blend-mode et les animations CSS @keyframes — supportés dans tous les navigateurs modernes depuis 2016.
Sur IE 11 (non supporté officiellement), <code>mix-blend-mode</code> est ignoré — les divs de fuite apparaissent en opaque sur le fond sans fusion. La page reste fonctionnelle. Sur tous les navigateurs modernes, le rendu est identique.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="lightleak-container">
<!-- Fond + contenu textuel : z-index inférieur à l'overlay -->
<div class="lightleak-content-bg">
<span>Votre contenu</span>
</div>
<!-- Overlay de fuites lumineuses : mix-blend-mode screen -->
<div class="lightleak-overlay">
<div class="lightleak-a"></div>
<div class="lightleak-b"></div>
<div class="lightleak-c"></div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleurs de .lightleak-a (CSS ligne radial-gradient) | rgba(255,100,50,.3) → rgba(255,200,50,.15) | Teinte du premier dégradé (nuance orange→jaune). Modifiez les valeurs RGB pour un look teal, violet ou brand. |
| Couleurs de .lightleak-b (CSS ligne radial-gradient) | rgba(255,50,100,.25) → rgba(200,100,255,.1) | Teinte du deuxième dégradé (rose→mauve). Réduire l'opacité à 0,08 supprime le rose pour un look purement chaud. |
| Couleurs de .lightleak-c (CSS ligne linear-gradient) | rgba(255,200,100,.15) → rgba(255,150,50,.2) → rgba(255,200,100,.1) | Teinte du rail de lumière diagonal. Changez l'angle (135deg) pour orienter le flare différemment. |
| Durées des animations (propriété animation) | 7s / 9s / 6s (leakDrift1/2/3) | Des durées plus courtes (3–5 s) donnent un mouvement plus nerveux ; des durées plus longues (12–18 s) un drift très lent et cinématographique. |
| Amplitudes de translate dans @keyframes leakDrift1 | translate(30px, -20px) rotate(5deg) | Augmenter les valeurs px élargit le balayage de la fuite sur la scène ; réduire à 10 px / 0 deg donne une pulsation presque statique. |
| Amplitudes de translate dans @keyframes leakDrift2 | translate(-20px,15px) / translate(15px,-10px) | leakDrift2 a 3 étapes — son mouvement plus complexe crée le battement organique avec leakDrift1. |
| Fond .lightleak-container | #1a1a2e | Le fond sombre maximise le contraste des dégradés en screen mode. Passer à #0a0a0f accentue le noir cinéma ; un fond coloré teinte toute la composition. |
| Taille de .lightleak-a / .lightleak-b / .lightleak-c (width/height) | 150%/150% · 120%/120% · 80%/200% | Réduire à 80 % localise la fuite ; augmenter à 200 % la fait déborder encore plus hors-champ pour une lumière très diffuse. |
FAQ
@media (prefers-reduced-motion: reduce) { .lightleak-a, .lightleak-b, .lightleak-c { animation: none; opacity: 0.4; } }. Les fuites resteront visibles en état statique (opacité fixe) sans aucune animation — l'ambiance est préservée sans causer de gêne aux utilisateurs sensibles au mouvement..lightleak-content-bg (déjà dans le HTML, z-index inférieur à l'overlay) ou ajoutez un élément avec position: relative; z-index: 3 au-dessus de .lightleak-overlay (z-index 2). Vérifiez le contraste WCAG AA : les zones les plus claires de l'overlay screen peuvent atteindre +20–30 % de luminosité sur le fond, ce qui peut exiger un text-shadow ou un scrim semi-transparent derrière le texte.lightleak-*) sous un sélecteur parent si vos classes globales entrent en conflit. Dans un Shadow DOM ou un CSS Module, renommez simplement les classes de manière cohérente.
