Light Rays
Un pseudo-élément CSS en rotation continue projette des rayons lumineux via conic-gradient — fond atmosphérique animé, zéro 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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un pseudo-élément ::before dont la surface fait 200 % × 200 % du conteneur, centré par la combinaison top: -50%, left: 50% et transform: translateX(-50%). Le conteneur .bg-rays applique overflow: hidden pour rogner le pseudo-élément à ses propres limites — quel que soit le rayon, aucun débordement n'est visible.
Le fond du pseudo-élément est un conic-gradient à un seul segment lumineux : transparent → rgba(99, 102, 241, .1) → transparent 30deg. Les 330° restants sont entièrement transparents, ce qui donne l'impression d'un unique rayon de lumière plutôt que d'une roue. La couleur indigo semi-transparente (opacité 0,10) se mélange avec le fond sombre pour produire une lueur diffuse et non agressive.
@keyframes rayRotate anime le pseudo-élément de translateX(-50%) rotate(0deg) à translateX(-50%) rotate(360deg) sur 20 s en boucle infinie. La translation doit être répétée dans les deux étapes — si elle était omise à 0 % ou 100 %, le navigateur l'interpolerait vers zéro en cours d'animation et le pseudo-élément se décalerait. transform-origin: center center garantit la rotation autour du point central du pseudo-élément, qui coïncide géométriquement avec le centre du conteneur.
Accessibilité
- prefers-reduced-motion absent du code : l'animation tourne quelle que soit la préférence système. Pour un usage production, ajoutez
@media (prefers-reduced-motion: reduce) { .bg-rays::before { animation: none; } }. - Le conteneur
.bg-raysne porte niaria-hiddenniroledans le code de base. S'il est purement décoratif (cas habituel), ajoutezaria-hidden="true"pour l'exclure de l'arbre d'accessibilité. - Aucune interaction clavier ni pointeur — l'effet est strictement visuel et ne capture aucun événement.
- Le dégradé est semi-transparent (opacité 0,10 au pic) : il ne masque pas le fond ni le texte overlay. Vérifiez malgré tout le ratio de contraste WCAG AA avec votre combinaison couleur de fond / couleur de texte.
Compatibilité navigateur
conic-gradient est requis — disponible depuis Chrome 69, Firefox 83, Safari 12.1, Edge 79. Zéro dépendance JavaScript.
Si <code>conic-gradient</code> n'est pas supporté, le pseudo-élément s'affiche avec un fond transparent — le conteneur montre simplement sa couleur de fond (<code>#0a0a0f</code>), sans erreur JS ni layout brisé.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-rays">
<!-- Le pseudo-élément ::before (CSS) anime le rayon lumineux -->
<!-- Contenu overlay : placé directement comme enfant, déjà au-dessus de ::before -->
<div class="your-overlay-content">
<h2>Votre titre</h2>
<p>Votre sous-titre ou CTA</p>
</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 |
|---|---|---|
| Couleur du rayon (conic-gradient) | rgba(99, 102, 241, .1) | Remplacez cette valeur dans .bg-rays::before pour adapter la teinte à votre charte : n'importe quelle couleur rgba fonctionne. Gardez l'opacité entre 0,05 et 0,20 pour rester lisible. |
| Opacité du rayon (4e param rgba) | .1 | Augmentez à .18 pour un rayon plus présent, réduisez à .05 pour un effet très subtil en fond de page. |
| Durée de rotation (animation-duration) | 20s | Remplacez 20s dans le raccourci animation: de .bg-rays::before. Entre 10 s (dynamique) et 40 s (quasi immobile), la valeur change entièrement le ressenti. |
| Largeur du rayon (30deg dans conic-gradient) | 30deg | Augmentez ce stop angulaire (ex. 60deg) pour un rayon plus large et plus diffus ; réduisez à 15deg pour un trait de lumière précis. |
| Couleur de fond (.bg-rays background) | #0a0a0f | Changez la propriété background de .bg-rays pour adapter l'effet à un fond moins sombre — testez #0d1117 ou #0f172a. |
| Sens de rotation (animation-direction) | normal (horaire) | Ajoutez animation-direction: reverse dans .bg-rays::before pour une rotation anti-horaire — utilisez alternate pour un aller-retour. |
FAQ
@keyframes sur un pseudo-élément ::before, aucun fichier JS à charger. Il fonctionne dans un contexte CSP strict, dans un email HTML ou dans un iframe sandboxé sans allow-scripts..bg-rays : chaque élément portant cette classe reçoit automatiquement l'animation. Pour des couleurs ou des vitesses différentes par section, surchargez .bg-rays::before au niveau d'un sélecteur parent ou d'un id — ex. #section-hero .bg-rays::before { background: conic-gradient(transparent, rgba(99,102,241,.14), transparent 30deg); animation-duration: 15s; }..bg-rays est déjà en position: relative. Placez vos éléments enfants directement à l'intérieur : sans positionnement spécial ils s'affichent au-dessus du pseudo-élément ::before. Pour un overlay avec scrim, ajoutez un ::after (ou un <div>) en position: absolute; inset: 0; background: linear-gradient(…); puis vos textes en position: relative; z-index: 1.
