Dot Grid Pattern
Grille de points par dégradé radial CSS — couleur, opacité, rayon et espacement en une seule propriété, 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
Le pattern repose sur une unique propriété : background-image: radial-gradient(circle, rgba(99,102,241,.4) 1px, transparent 1px). Le navigateur dessine un dégradé circulaire de 0 à 1 px (couleur pleine), puis transparent au-delà — répété selon le pas défini par background-size: 30px 30px. Chaque répétition produit un point isolé, parfaitement positionné, sans artefact de rendu.
L'opacité des points est encodée dans le canal alpha du rgba (0,4 par défaut) : les points laissent apparaître le fond ou le contenu derrière eux. Le background-color: #0a0a0f remplit l'espace entre les points ; il peut être transparent pour hériter du parent et superposer la grille sur n'importe quel fond.
Aucun JavaScript, aucun canvas, aucun SVG : le rendu est entièrement délégué au moteur CSS. La grille bénéficie ainsi de l'accélération matérielle de la couche de composition, sans coût CPU à l'affichage ni recalcul de paint lors du scroll.
Accessibilité
- Pas d'animation : prefers-reduced-motion n'est pas applicable — le pattern est purement statique, aucune boucle RAF.
- Le
.bg-dot-gridest décoratif mais ne porte pasaria-hidden="true"dans le code fourni — à ajouter si la grille est ornementale et ne contient pas de contenu signifiant. - Aucun élément interactif dans le pattern de base — la navigation au clavier n'est pas concernée.
- Contraste décoratif : le réglage par défaut (rgba(99,102,241,.4) sur fond #0a0a0f) donne un ratio ≈ 1,6:1, insuffisant pour du texte WCAG — mais ce pattern est un fond, pas du contenu textuel.
- Tout texte ou lien superposé à la grille doit respecter les ratios WCAG AA (≥ 4,5:1) par rapport à la couleur de fond composite.
Compatibilité navigateur
Nécessite radial-gradient CSS — supporté depuis Chrome 26, Firefox 16, Safari 6.1, Edge 12. Zéro JavaScript.
Sans support <code>radial-gradient</code> (navigateurs très anciens), seul <code>background-color</code> s'affiche — fond uni sans points, aucune erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-dot-grid">
<!-- Contenu overlay (texte, composants)
en position: relative ou absolute -->
</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 des points | rgba(99, 102, 241, .4) | Premier arrêt du radial-gradient dans .bg-dot-grid — remplacez la valeur rgba pour changer la teinte. Exemple : rgba(16,185,129,.5) pour un vert émeraude. |
| Opacité des points | .4 | 4e composante du rgba (0 = invisible, 1 = opaque). Abaissez à .15–.20 pour une grille très discrète, montez à .7–.9 pour un pattern marqué. |
| Rayon des points | 1px | 1er arrêt de taille dans le gradient : radial-gradient(circle, couleur 1px, transparent 1px). Changez ce 1px — 0.5px = micro-dots, 2px = points moyens, 3px = gros points. |
| Espacement de la grille | 30px 30px | background-size dans .bg-dot-grid. Réduisez (16px) pour densifier, augmentez (60px) pour aérer. Valeurs inégales (40px 20px) créent une grille rectangulaire. |
| Couleur de fond | #0a0a0f | background-color dans .bg-dot-grid — remplissage entre les points. Utilisez transparent pour hériter du parent, ou #ffffff pour un thème clair. |
| Thème clair | — | background-color: #fafafa + rgba(79,70,229,.22) pour les points : grille indigo subtile sur fond blanc, idéale pour un dashboard en mode light. |
FAQ
background-image: radial-gradient(…). Il fonctionne dans un <style> inline, un fichier CSS ou un attribut style — aucune dépendance, aucun chargement asynchrone.background-color: #0a0a0f par #fafafa ou #ffffff, et réduisez l'opacité des points à .2–.3 — la grille reste perceptible sans saturer le fond clair. Combinez avec @media (prefers-color-scheme: light) pour un basculement automatique.@keyframes drift { from { background-position: 0 0; } to { background-position: 30px 30px; } } donne un glissement diagonal infini. Pour un parallax au scroll, pilotez background-position ou transform: translateY() par JS — le pattern suit sans déclencher de recalcul de paint.
