Grain Overlay
Monogram can add a subtle film grain texture over your entire site. This effect creates an organic, cinematic look reminiscent of analog photography or vintage film. It is powered by the Grained.js library and rendered on a dedicated overlay element.
The grain overlay is desktop-only and disabled by default. It also respects the visitor operating system accessibility setting - if prefers-reduced-motion is enabled, the grain will not appear.
#Settings
Navigate to Appearance > Customize > Grain Overlay to configure the feature.
Setting | Type | Default | Description |
|---|---|---|---|
Enable Grain Overlay | Toggle | Off | Turn the grain effect on or off globally. |
Animate Grain | Toggle | On | When enabled, the grain pattern shifts continuously to simulate real film texture. Disable for a static, non-moving grain. |
Pattern Tile Width | Slider (100-800 px) | 350 px | Width of the repeating grain tile. Smaller values create a denser, more uniform texture. Larger values allow more natural variation. |
Pattern Tile Height | Slider (100-800 px) | 350 px | Height of the repeating grain tile. Works together with the width to define tile dimensions. |
Grain Opacity | Slider (0.01-0.2) | 0.07 | How visible the grain layer is. A range of 0.05-0.10 works well for most designs. Higher values create a more prominent, retro-style effect. |
Grain Density | Slider (0.5-3.0) | 1.0 | How many grain particles are drawn per tile. Higher values produce heavier, denser grain. Lower values create a lighter, more sparse texture. |
Grain Dot Width | Slider (1-3 px) | 1 px | Horizontal size of each grain particle. A value of 1 creates the finest, most natural grain. Increase for a more stylized, coarse effect. |
Grain Dot Height | Slider (1-3 px) | 1 px | Vertical size of each grain particle. Keep this equal to the dot width for round particles, or increase for vertically stretched grain. |
Animation Speed | Slider (0.05-1.0) | 0.25 | How fast the grain pattern cycles between frames. Lower values create a slow, subtle shimmer. Higher values make the grain visibly more active. |
#Recommended Starting Values
For a subtle, barely-noticeable texture that adds depth without distracting:
- Opacity: 0.05-0.07
- Density: 1.0
- Dot Width / Height: 1 px each
- Animation Speed: 0.15-0.25
- Tile Size: 300-400 px
For a heavier, vintage film look:
- Opacity: 0.12-0.18
- Density: 1.5-2.0
- Dot Width / Height: 2 px each
- Animation Speed: 0.4-0.6
The grain overlay is purely visual and does not affect page interactivity. It sits on top of the page with pointer events disabled, so visitors can still click, scroll, and interact with everything beneath it.
Last updated
Was this article helpful?
Resources
On this page
