Star Field
Fond étoilé 100 % CSS — cinq gradients radiaux en tuile 200 × 200 px dérivent en diagonale continue via @keyframes background-position, sans 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
.bg-stars empile cinq couches radial-gradient() dans une seule propriété background. Chaque couche crée un point-étoile net en plaçant un blanc de 2 × 2 px (ou 1 × 1 px pour les étoiles plus discrètes) à une coordonnée fixe — at 20px 30px, at 40px 70px, at 90px 40px, at 130px 80px, at 160px 120px — avec le reste du gradient entièrement transparent. Pas de flou, pas d'antialiasing intentionnel : chaque étoile est un point chirurgical.
La première couche porte background-size: 200px 200px : le navigateur répète ce carré en tuile sur toute la surface de l'élément, multipliant le motif d'étoiles à l'infini. @keyframes starsMove déplace background-position de 0 0 à -200px -200px — exactement la taille d'une tuile — en 100 secondes linéaires infinies. Quand une étoile sort par un bord, son double dans la tuile adjacente entre par le bord opposé : le défilement est parfaitement cyclique, sans saut visible.
Zéro JavaScript, zéro Canvas, zéro dépendance : un seul <div class="bg-stars"> et un bloc CSS suffisent. La composition est déléguée au moteur de rendu du navigateur (couche GPU sur Chrome, Safari et Firefox) — la charge CPU à l'exécution est quasi nulle. Le contenu overlay (.bg-label ou tout autre élément) reste dans le flux DOM normal, positionné par-dessus le fond animé.
Accessibilité
- prefers-reduced-motion : absent dans le code. Aucun bloc
@media (prefers-reduced-motion: reduce)n'est présent : l'animation de 100 s tourne indéfiniment même si l'OS signale une préférence réduite. Recommandation : ajoutez@media (prefers-reduced-motion: reduce) { .bg-stars { animation: none; } }dans votre feuille de style. .bg-starsne porte niroleniaria-labelpar défaut. Pour un fond purement décoratif c'est acceptable ; si le fond véhicule une signification narrative, ajoutezrole="img"et unaria-labeldescriptif.- Contraste étoiles / fond : points blancs
#fffsur fond noir#000— ratio supérieur à 21:1, très au-dessus du seuil WCAG AA (4,5:1). - Aucun élément interactif dans le fond lui-même : pas de piège clavier, pas de
tabindex, pas d'événement souris. La navigation au clavier n'est pas affectée. - Le contenu overlay (
.bg-label) est dans le DOM standard et reste lisible par les lecteurs d'écran indépendamment du fond CSS animé.
Compatibilité navigateur
Repose sur les backgrounds CSS multiples et les animations CSS — supportés dans tous les navigateurs modernes depuis ~2013. Zéro dépendance externe.
Si <code>radial-gradient()</code> ou <code>@keyframes</code> ne sont pas supportés, l'élément affiche sa couleur de fond par défaut (<code>#000</code>) — aucune erreur JS, aucune dépendance cassée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-stars" role="img" aria-label="Fond étoilé animé en continu" style="position:relative;min-height:400px;">
<!-- Facultatif : contenu texte overlay (position:absolute requis) -->
<span class="bg-label">Votre message</span>
</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 |
|---|---|---|
| Durée animation (100s) | 100s | Vitesse du cycle. Modifier directement 100s dans la règle animation. 60 s = plus vif, 200 s = glissement quasi imperceptible. |
| background-size (200px 200px) | 200px 200px | Taille de la tuile d'étoiles (1re couche). 100px 100px double la densité visible ; 400px 400px espace les étoiles pour un ciel plus vide. |
| Couleur des étoiles (#fff) | #fff | Couleur du point dans chaque radial-gradient. #aac8ff = étoiles bleutées froides, #ffeecc = ton chaud, #c8ffc8 = vert science-fiction. |
| Couleur de fond (#000) | #000 | Dernière valeur de la propriété background. #000218 = nuit bleue profonde, #0a0014 = violet cosmique. |
| Direction @keyframes to {} | -200px -200px | Endpoint du déplacement background-position. 0 -200px = glissement vertical pur (étoiles montent), -200px 0 = horizontal pur, 200px -200px = diagonale inverse. |
| background-attachment | scroll | Ajouter background-attachment: fixed à .bg-stars pour un défilement parallaxe au scroll de la page — les étoiles dérivent moins vite que le contenu. |
| Nombre de couches (5) | 5 gradients | Ajouter des lignes radial-gradient(1px 1px at Xpx Ypx, #fff, transparent), supplémentaires avant la couleur de fond pour placer davantage d'étoiles par tuile. |
FAQ
<div class="bg-stars"> et un bloc CSS suffisent. Aucune dépendance npm, aucun canvas, aucun fichier JS à charger. Copiez la classe et les règles CSS dans votre feuille de style — compatible avec tout framework.@media (prefers-reduced-motion: reduce) n'est inclus. Pour les sites accessibles, ajoutez cette règle : @media (prefers-reduced-motion: reduce) { .bg-stars { animation: none; } }. L'élément affiche alors un fond étoilé statique sans aucun mouvement.@keyframes starsMove { to { background-position: X Y } }. Valeurs utiles : 0 -200px = vertical pur (étoiles montent), -200px 0 = horizontal pur (glissement vers la gauche), 200px 200px = diagonale inverse (bas-droite). Pour un effet circulaire, combinez deux animations sur des axes distincts avec des durées différentes.
