Network Lines
Fond CSS pur : deux séries de diagonales croisées tuilées à 60 px et un nœud radial de 3 px composent un maillage réseau géométrique indigo sur fond sombre — zéro JS, coût CPU nul.
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 entièrement sur la propriété background d'un seul <div> : aucun JavaScript, aucun canvas, aucune boucle d'animation. Le motif est rendu directement par le moteur CSS du navigateur via trois couches de dégradés empilées dans le raccourci background.
La première couche est un dégradé linéaire à 135° découpé en bandes quasi-transparentes : de 0 % à 73 % la teinte est invisible, de 73 % à 75 % elle monte à rgba(99, 102, 241, 0.6), de 75 % à 77 % elle retombe à zéro. Ce créneau de 2 % produit un filet d'environ 1,2 px sur la tuile. La position 0 0 et la taille 60px 60px activent le carrellement (background-repeat: repeat par défaut) : le navigateur répète la tuile sur toute la surface, créant une grille de parallèles espacées de 60 px allant en diagonale descendante gauche-droite.
La deuxième couche applique le même schéma à 45° (sens inverse) sans background-size explicite : le dégradé s'étend sur toute la boîte et trace une diagonale d'accentuation qui coupe la grille, évoquant un maillage de connexions bidirectionnel. La troisième couche est un radial-gradient(3px, …) : un cercle de rayon 3 px en indigo à 80 % d'opacité, centré par défaut, qui matérialise un nœud d'intersection du réseau. Le background-color final #0a0a0f constitue le fond sombre de base sur lequel les lignes semi-transparentes se composent.
Toute la valeur visuelle étant portée par le CSS, le rendu est instantané (pas de premier tick JS, pas de repaint différé), le coût CPU en idle est nul, et l'effet s'applique à n'importe quel élément avec une seule classe CSS sans modifier son flux ou son positionnement.
Accessibilité
- Pas de prefers-reduced-motion à gérer : l'effet est entièrement statique — aucune animation, aucun
requestAnimationFrame. Les utilisateurs qui activent la réduction de mouvement ne sont pas impactés. - Le
<div class="bg-network">est décoratif : ajoutezaria-hidden="true"si l'élément ne porte aucun contenu textuel pertinent pour les lecteurs d'écran. - Le texte overlay (titre, labels) doit être inclus en HTML visible et non dans le CSS — le contraste blanc sur fond
#0a0a0fdépasse WCAG AA (ratio > 7:1). - Les lignes indigo sur fond très sombre sont purement décoratives (WCAG 1.4.11 exclut les éléments non textuels décoratifs des obligations de contraste non textuel).
- Aucune interaction clavier ou souris n'est définie sur l'effet : pas de focus à gérer, pas de tab stop ajouté.
Compatibilité navigateur
Trois propriétés CSS standard — `linear-gradient`, `radial-gradient`, `background-size` — disponibles dans tous les navigateurs depuis plus de dix ans.
Si le navigateur ignore <code>linear-gradient</code> (IE 9 sans préfixe), la propriété <code>background</code> entière est ignorée et le <code><div></code> s'affiche en <code>#0a0a0f</code> uni — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-network" style="position:relative;width:100%;min-height:300px;" aria-hidden="true">
<!-- Overlay facultatif (texte, boutons) -->
<span class="bg-label">Votre titre</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 |
|---|---|---|
| rgba(99, 102, 241, .6) — dans les deux linear-gradient | indigo, 60 % opacité | Couleur et opacité des lignes. Remplacez par votre teinte brand dans les deux occurrences ; réduisez l'opacité (0,3) pour un motif très discret ou augmentez (0,9) pour un tracé soutenu. |
| 73% et 77% — stops linear-gradient | 2 % d'écart (≈ 1,2 px sur 60 px) | Épaisseur des lignes : réduisez l'écart à 1 % pour affiner (~0,6 px), augmentez à 4 % pour épaissir (~2,4 px). Modifiez les deux couches de concert. |
| 60px 60px — background-size de la première couche | 60 × 60 px | Espacement de la grille tuilée : 90 px pour un réseau plus aéré, 30 px pour une trame dense. Seule la première couche (135°) est tuilée explicitement. |
| rgba(99, 102, 241, .8) — dans le radial-gradient | indigo, 80 % opacité | Couleur et opacité du nœud central. Utilisez la même teinte que les lignes ou une couleur d'accentuation pour marquer un point d'intersection. |
| 3px — dans radial-gradient(3px, …) | 3 px de rayon | Rayon du nœud : 5–8 px pour un point clairement visible, 0 ou supprimez la couche radiale entièrement pour retirer le nœud. |
| #0a0a0f — background-color final | #0a0a0f (noir quasi-absolu) | Fond de base : seul endroit où changer la teinte du fond sans toucher aux gradients. `#030712` (bleu nuit très sombre) ou `#0f1117` (ardoise sombre) donnent des ambiances tech proches. |
FAQ
@keyframes nw-scroll { to { background-position: 60px 60px, 100% 100%, center; } } et appliquez animation: nw-scroll 6s linear infinite sur .bg-network. Le premier calque (tuilé) scrolle de façon visible ; les deux autres suivent leurs positions finales. Ajoutez impérativement @media (prefers-reduced-motion: reduce) { .bg-network { animation: none; } } dès lors que l'animation est activée.background-size: 60px 60px, 60px 60px, auto;. Les deux séries de parallèles se croiseront alors à intervalles réguliers, produisant un véritable quadrillage diagonal plutôt qu'une grille + une diagonale d'accentuation.
