Grid Pattern
Deux linear-gradient croisés tracent une grille indigo sur fond sombre ; un pseudo-élément ::before radial estompe les bords pour concentrer naturellement le regard au centre.
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
La grille est construite avec deux linear-gradient empilés dans background-image : le premier dessine des lignes horizontales de 1 px (rgba(99, 102, 241, .1), transparent ensuite), le second pivote à 90° pour les colonnes verticales. Les deux partagent background-size: 50px 50px — les intersections forment une grille carrée uniforme répétée à l'infini.
La vignette centrale est un pseudo-élément ::before positionné en inset: 0 sur le conteneur. Son background est un radial-gradient(circle, transparent 0, #0a0a0f 70%) : transparent au centre, couleur de fond opaque à partir de 70 % du rayon. Il masque progressivement les lignes vers les bords sans altérer la grille sous-jacente — le résultat est un faisceau lumineux centré.
Le code inclut aussi un mode points via la règle body.bg-grid : le background-image devient radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) répété sur des cellules de 30 × 30 px. Un seul changement de règle CSS suffit pour passer d'une grille de lignes à une trame de points diffus.
L'effet est 100 % CSS, zéro JavaScript — pas de canvas, pas de requestAnimationFrame, pas de dépendance externe. Il s'applique sur n'importe quel conteneur en position: relative ; la charge GPU est équivalente à un fond dégradé ordinaire.
Accessibilité
- Aucune animation : l'effet est statique — prefers-reduced-motion ne s'applique pas, aucun comportement à adapter.
- La grille est purement décorative. Marquez le conteneur
aria-hidden="true"ou appliquez-la via un pseudo-élément du parent pour qu'elle reste invisible aux lecteurs d'écran. - Les lignes de grille sont à 10 % d'opacité (
rgba(99,102,241,.1)) — elles ne portent aucune information et n'ont pas de contrainte de contraste WCAG. - Le
.bg-labelde la démo est un<span>positionné ; si le texte overlay est informatif, utilisez un élément sémantique (<h1>–<h6>,<p>) et vérifiez le ratio de contraste ≥ 4,5:1 sur le fond#0a0a0f. - Aucune interaction clavier ou souris n'est définie par l'effet : la navigation au clavier reste entièrement dans les éléments overlay que vous ajoutez.
Compatibilité navigateur
Nécessite background-image multi-valeur et linear-gradient / radial-gradient CSS — syntaxe sans préfixe universelle depuis 2013.
Sans support des gradients CSS, le conteneur affiche sa couleur de fond unie (<code>#0a0a0f</code>) — aucune erreur JS, la mise en page n'est pas impactée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-grid">
<!-- pseudo-élément ::before : vignette radiale (CSS pur, z-index auto) -->
<!-- Contenu overlay : utilisez z-index ≥ 1 pour passer au-dessus de la vignette -->
<span class="bg-label">Votre contenu</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 |
|---|---|---|
| background-size: 50px 50px | 50px 50px | Taille des cellules de la grille. Réduisez à 30–40 px pour un maillage dense, augmentez à 80–120 px pour un réseau ouvert et léger. |
| rgba(99, 102, 241, .1) | rgba(99,102,241,.1) | Couleur et opacité des lignes — présent deux fois dans les deux linear-gradient. Changez la couleur pour votre palette brand ; réduisez l'alpha à 0,05 pour des lignes quasi invisibles. |
| radial-gradient stop 70% (::before) | 70% | Rayon de la vignette. Réduisez à 50 % pour un faisceau central très serré, augmentez à 90 % pour que les bords de la grille restent quasi visibles. |
| #0a0a0f (background-color + vignette) | #0a0a0f | Couleur de fond — présente deux fois : dans background-color du .bg-grid et dans le stop terminal du radial-gradient du ::before. Changez les deux pour adapter au thème. |
| rgba(255,255,255,.08) — mode points | rgba(255,255,255,.08) | Couleur et opacité des points dans le mode dots (règle body.bg-grid). Augmentez l'alpha jusqu'à 0,2 pour un rendu visible sur fond clair. |
| background-size mode dots : 30px 30px | 30px 30px | Taille des cellules en mode points. Réduisez à 20 px pour une trame serrée, augmentez à 50 px pour des points espacés. |
FAQ
.bg-grid et .bg-grid::before sur n'importe quel conteneur en position: relative. Si le conteneur a des coins arrondis, ajoutez overflow: hidden pour que le pseudo-élément ::before ne déborde pas.#0a0a0f par votre couleur de fond clair dans les deux occurrences : background-color du .bg-grid et stop terminal du radial-gradient du ::before. Passez la couleur des lignes à rgba(99,102,241,.15) ou une teinte plus sombre pour qu'elles restent visibles sur fond blanc.requestAnimationFrame. La vignette ::before est composée une seule fois lors du premier repaint et ne génère aucune animation.
