L’essentiel en bref
- Une texture de bruit CSS se fait en général avec un filtre SVG feTurbulence, intégré comme petite image en URI de données et répétée en mosaïque sur un dégradé.
- Le baseFrequency de feTurbulence règle la taille du grain : des valeurs élevées donnent un grain fin, des valeurs basses un bruit grossier et nuageux.
- Le bruit marche mieux posé sur le dégradé, sur un pseudo-élément, avec un mode de fusion comme soft-light ou overlay et une faible opacité.
- Le grain masque le banding des dégradés parce qu’il transforme les bords visibles entre nuances voisines en fine variation aléatoire.
- Une image de bruit en mosaïque est peu coûteuse à rendre, alors qu’appliquer un filtre SVG en direct à un grand élément, ou l’animer, coûte bien plus.
Sur cette page
Une texture de bruit CSS est un fin pointillé aléatoire posé sur une couleur ou un dégradé pour lui donner du grain. Le CSS n’a pas de fonction de bruit : la source habituelle est donc SVG. Le filtre feTurbulence génère le bruit, vous l’enveloppez dans un minuscule SVG, l’intégrez comme URI de données et le répétez sur votre dégradé à faible intensité. Le résultat ressemble à du grain de pellicule ou à du papier imprimé, et il corrige discrètement le banding, ces paliers visibles qui apparaissent dans les grands dégradés lisses.
Pourquoi le grain donne à la couleur un air plus cher est expliqué dans les dégradés granuleux. Ce guide est l’implémentation.
Le filtre de bruit SVG
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
<filter id="n">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
<feColorMatrix type="saturate" values="0" />
</filter>
<rect width="100%" height="100%" filter="url(#n)" />
</svg>| Attribut | Valeur ici | Ce qu’il contrôle |
|---|---|---|
type | fractalNoise | Un grain doux et régulier. turbulence donne un bruit plus strié et ondulé. |
baseFrequency | 0.8 | La taille du grain. Autour de 0,6 à 0,9, c’est un grain fin ; de 0,1 à 0,3, c’est nuageux. |
numOctaves | 3 | Les couches de détail. Au-delà d’environ 4, la différence se voit à peine. |
stitchTiles | stitch | Fait concorder les bords de la mosaïque, pour que les répétitions n’aient aucune couture. |
feColorMatrix saturate 0 | 0 | Retire la couleur aléatoire, ne laissant qu’un grain gris. |
Intégrer le bruit comme URI de données
Un fichier séparé fonctionne, mais l’intégrer économise une requête et garde l’effet en un seul endroit. Dans une URI de données, les caractères qui ont un sens dans les URL doivent être encodés : < devient %3C, > devient %3E, # devient %23 et % devient %25. Utilisez des apostrophes droites dans le SVG pour qu’elles n’entrent pas en conflit avec les guillemets qui entourent l’URL.
:root {
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}# en %23 est la raison habituelle pour laquelle rien ne s’affiche dans Firefox.Superposer le bruit à un dégradé
Placez le bruit sur un pseudo-élément au-dessus du dégradé, puis réglez-le avec deux molettes : un mode de fusion, qui décide comment le grain gris se mêle à la couleur dessous, et l’opacité, qui décide de sa force. soft-light garde les couleurs propres et reste le plus doux ; overlay ajoute plus de contraste. pointer-events: none empêche la couche de bloquer les clics.
.grain {
position: relative;
isolation: isolate;
background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);
}
.grain::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--noise);
mix-blend-mode: soft-light;
opacity: 0.45;
pointer-events: none;
}.grain reste net.Si vous préférez un seul élément sans pseudo-élément, listez le bruit en premier dans background-image et réglez background-blend-mode: soft-light, normal. Vous perdez la molette d’opacité séparée : intégrez alors la force dans le SVG, par exemple avec opacity='0.5' sur le rect.
Quelle quantité de grain suffit
- 1
Commencez discret
Partez de
opacity: 0.3avecsoft-light. Vous devriez à peine le remarquer à bout de bras. - 2
Vérifiez la zone la plus sombre
Le banding vit dans les estompages sombres et lents. Montez l’opacité jusqu’à ce que les paliers s’y dissolvent, puis arrêtez.
- 3
Accordez le grain à la taille
Les heros plein écran supportent un grain un peu plus grossier, autour de 0,6. Les cartes et les boutons veulent un grain fin, autour de 0,9.
- 4
Vérifiez sur un téléphone et sur un grand écran
Un grain qui convient sur un écran peut ressembler à de la poussière sur un autre. Visez une texture que l’on sent plutôt que l’on voit.
- 5
Vérifiez le texte dessus
Le grain ne doit pas nuire à la lisibilité. Si du petit texte se pose sur la texture, baissez la force ou gardez le texte sur une zone plus calme.
Trop
- Un grain visible de l’autre bout de la pièce
- Des couleurs qui virent au gris et au sale
- Un bruit grossier et nuageux sur de petits composants
- Des bords de texte flous contre le pointillé
À peu près juste
- Un grain remarqué seulement de près
- Des couleurs propres avec soft-light
- Un grain fin adapté à l’élément
- Le banding disparu, un texte net
Performance du bruit CSS
Une URI de données en mosaïque est peu coûteuse : le navigateur rend une fois la petite mosaïque et la répète, et un calque statique est dessiné une fois. La version coûteuse applique le filtre en direct à un grand élément avec filter: url(#noise), ce qui exécute le filtre sur chaque pixel à chaque redessin de la zone. Si vous animez le grain, pour un scintillement de pellicule, décalez la mosaïque avec transform par quelques sauts saccadés plutôt que de régénérer du bruit, et coupez-le pour le mouvement réduit.
.grain {
overflow: hidden;
}
.grain::after {
inset: -50%;
animation: flicker 0.6s steps(3) infinite;
}
@keyframes flicker {
0% { transform: translate(0, 0); }
33% { transform: translate(-3%, 2%); }
66% { transform: translate(2%, -3%); }
}
@media (prefers-reduced-motion: reduce) {
.grain::after { animation: none; }
}Une mosaïque de bruit PNG ou WebP pré-rendue d’environ 128 à 256 pixels est une source tout aussi bonne si vous en avez déjà une. Le grain est aussi un ingrédient d’une famille plus large de surfaces, du papier au verre, traitée dans la texture d’arrière-plan. C’est aussi la couche de finition d’un dégradé maillé CSS.
Le grain est intégré à chaque Mark de Gradiently comme réglage de matière, à côté de la lumière et du mouvement : les designs créés avec l’un d’eux portent donc de la texture sans aucun code.
GR·W4AX·4M
Muslin Anvil
Voir ce MarkLes questions qu’on nous pose
Comment ajouter une texture de bruit en CSS ?
Intégrez un SVG avec un filtre feTurbulence comme URI de données, répétez-le sur un pseudo-élément au-dessus de votre dégradé et réglez un mode de fusion comme soft-light avec une faible opacité.
Pourquoi mon URI de données de bruit SVG ne s’affiche-t-elle pas ?
En général à cause d’un caractère non encodé. Dans l’URI de données, encodez # en %23, % en %25 et les chevrons en %3C et %3E, et utilisez des apostrophes droites dans le SVG.
Le grain corrige-t-il le banding des dégradés ?
Oui, dans la plupart des cas. Une fine variation aléatoire casse les bords durs entre nuances voisines : l’œil ne voit plus de paliers.
Quel baseFrequency utiliser pour le grain ?
Autour de 0,6 à 0,9 donne un grain fin façon pellicule. Des valeurs plus basses comme 0,2 donnent un bruit grand et nuageux.
Le bruit CSS nuit-il à la performance ?
Une petite image de bruit en mosaïque est peu coûteuse. Ce sont les filtres SVG en direct sur de grands éléments et le bruit régénéré en continu qui coûtent le plus.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
