## Grain Overlay

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/advanced-features/grain-overlay
Updated: 2026-09-06

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 &gt; Customize &gt; Grain Overlay** to configure the feature.

<table style="min-width:100px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Enable Grain Overlay</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>Off</p></td><td colspan="1" rowspan="1"><p>Turn the grain effect on or off globally.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Animate Grain</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>When enabled, the grain pattern shifts continuously to simulate real film texture. Disable for a static, non-moving grain.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Pattern Tile Width</strong></p></td><td colspan="1" rowspan="1"><p>Slider (100-800 px)</p></td><td colspan="1" rowspan="1"><p>350 px</p></td><td colspan="1" rowspan="1"><p>Width of the repeating grain tile. Smaller values create a denser, more uniform texture. Larger values allow more natural variation.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Pattern Tile Height</strong></p></td><td colspan="1" rowspan="1"><p>Slider (100-800 px)</p></td><td colspan="1" rowspan="1"><p>350 px</p></td><td colspan="1" rowspan="1"><p>Height of the repeating grain tile. Works together with the width to define tile dimensions.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Grain Opacity</strong></p></td><td colspan="1" rowspan="1"><p>Slider (0.01-0.2)</p></td><td colspan="1" rowspan="1"><p>0.07</p></td><td colspan="1" rowspan="1"><p>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.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Grain Density</strong></p></td><td colspan="1" rowspan="1"><p>Slider (0.5-3.0)</p></td><td colspan="1" rowspan="1"><p>1.0</p></td><td colspan="1" rowspan="1"><p>How many grain particles are drawn per tile. Higher values produce heavier, denser grain. Lower values create a lighter, more sparse texture.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Grain Dot Width</strong></p></td><td colspan="1" rowspan="1"><p>Slider (1-3 px)</p></td><td colspan="1" rowspan="1"><p>1 px</p></td><td colspan="1" rowspan="1"><p>Horizontal size of each grain particle. A value of 1 creates the finest, most natural grain. Increase for a more stylized, coarse effect.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Grain Dot Height</strong></p></td><td colspan="1" rowspan="1"><p>Slider (1-3 px)</p></td><td colspan="1" rowspan="1"><p>1 px</p></td><td colspan="1" rowspan="1"><p>Vertical size of each grain particle. Keep this equal to the dot width for round particles, or increase for vertically stretched grain.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Animation Speed</strong></p></td><td colspan="1" rowspan="1"><p>Slider (0.05-1.0)</p></td><td colspan="1" rowspan="1"><p>0.25</p></td><td colspan="1" rowspan="1"><p>How fast the grain pattern cycles between frames. Lower values create a slow, subtle shimmer. Higher values make the grain visibly more active.</p></td></tr></tbody></table>

## 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

<div data-callout="tip">

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.

</div>