Inspired by analog film photography and indie magazine aesthetics. A subtle noise texture overlay using CSS SVG filters that adds organic warmth and tactile quality to any surface. Perfect for photography sites, editorial platforms, and retro-styled products.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Implement a film grain texture overlay using an inline SVG noise filter. Create a pseudo-element (::after) on the target container with position absolute, inset-0, pointer-events-none, and z-index 1. The background is an inline SVG containing an feTurbulence filter (type="fractalNoise", baseFrequency="0.65", numOctaves="4", stitchTiles="stitch") applied to a full-size rect at 5% opacity. Tile the SVG at 200x200 with repeat. Use a slightly smaller tile size than 256px to create finer, more film-like grain density. The grain is most effective on warm off-white (#F6F1EC) or cream surfaces, adding organic warmth that flat digital colors lack. For dark themes, increase opacity to 7-9% and add mix-blend-mode: soft-light. This background conveys analog authenticity, editorial refinement, and handcrafted quality.Inspired by analog film photography and indie magazine aesthetics. A subtle noise texture overlay using CSS SVG filters that adds organic warmth and tactile quality to any surface. Perfect for photography sites, editorial platforms, and retro-styled products.