---
title: Textured Section Backgrounds (Pure CSS)
slug: textured-section-backgrounds
category: Media
summary: 18 modern texture and pattern recipes for section backgrounds — dots, grids, noise grain, mesh gradients, spotlight beams, animated auroras — all pure CSS or inline SVG, zero image files.
tags: [tailwind, css, backgrounds, ui-polish, design]
status: stable
visibility: public
source_project: llamapress.ai/texture-demo
layers: [view]
---
# Textured Section Backgrounds (Pure CSS)
> ⚠️ **Cookbook example — not live code.** (KEEP THIS CALLOUT.) Every code block below
> is an **example snippet**, **not part of the llamapress.ai codebase**, and **not
> running on this server**. This is a reference recipe for a **Leo instance (an AI coding
> agent) to implement in its own app** — read it to understand the pattern, then recreate
> it there.
Flat `bg-white` / `bg-slate-50` sections read as unfinished. A faint pattern, a glow, and
2–5% noise make the same layout feel designed. Every recipe here is **pure CSS or an
inline SVG data URI — no image files, no build step, no new dependencies**. They work in
any Rails view with Tailwind (Play CDN or compiled).
> **When to use:** landing/marketing pages, hero sections, CTA breaks, empty states,
> dashboards that need a branded feel.
> **When not to:** dense data screens (tables, forms) — texture behind small text hurts
> readability. And never as a substitute for good spacing/hierarchy; texture is the last
> 10%, not the first 90%.
---
## The 80/20 in one breath
1. Every textured section is the same skeleton: a `relative overflow-hidden` section, one
or more `absolute inset-0` **pattern layer divs**, then a `relative` content wrapper
on top.
2. Use **CSS gradients** for anything mathematical (dots, grids, stripes, rings) and a
**tiny inline SVG `feTurbulence` data URI** for noise/grain. Real image files only for
organic textures (paper fiber, watercolor).
3. Put the pattern CSS in **inline `style=""` attributes**, not Tailwind arbitrary-value
classes — see Gotchas.
4. Add a **`mask-image` fade** (radial or linear) so the pattern dissolves instead of
ending abruptly — the mask does most of the aesthetic work.
5. Keep opacity LOW. If a viewer consciously notices the texture, it's too strong.
6. The strongest default modern look: **base color + radial glow + fading dots/grid +
3–5% noise** (recipe 5 below).
---
## Layer 1 — The skeleton (used by every recipe)
```erb
<%# app/views/pages/home.html.erb (or any view/partial) — the shared wrapper shape %>
```
The noise texture used by several recipes is this inline SVG data URI (define it once —
an ERB local, a helper, or just paste the string):
```erb
<%# Tiny feTurbulence noise tile as a data URI — no asset file needed. %>
<% noise_svg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E" %>
```
## Layer 2 — Light-background patterns
Each block below is the **pattern layer div only** — drop it into the skeleton above.
**1. Sparse dots** — friendly, neutral sections:
```html
```
**2. Subtle grid** — technical/product sections (two crossed 1px gradients, ~6% black):
```html
```
**3. Fading grid (radial mask)** — the modern upgrade of #2; the fade IS the design:
```html
```
**4. Fine diagonal stripes** — callouts/comparison blocks; tint to the surface color:
```html
```
**11. Plus / cross grid** — the Vercel/Linear look; tiny "+" marks from an inline SVG:
```html
```
**12. Graph paper** — major + minor gridlines in ONE element (4 layers, 2 sizes):
```html
```
**13. Halftone fade** — dots that shrink as they descend (3 sizes, staggered masks):
```html
```
**7. Contour rings** — faux-topographic, premium editorial; anchor off-center:
```html
```
**10. Checkerboard fading upward** — CTA/footer transitions:
```html
```
## Layer 3 — Dark heroes
**5. Glow + fading dots + noise — the strongest default modern look.** Three stacked
layers on `bg-slate-950`:
```html
```
**14. Spotlight beams** — conic-gradient light shafts anchored above the viewport:
```html
```
**18. Perspective horizon grid** — a grid tilted into a 3D floor. Strong flavor; one per
site, if at all:
```html
```
## Layer 4 — Color washes & grain
**6. Grain over a gradient** — noise is the highest-leverage texture; ~8–12% on gradients:
```html
```
**15. Mesh / aurora gradient** — the Stripe-style wash; four radial-gradients at
different corners, finished with grain:
```html
```
**8. Soft blobs** — consumer/friendly surfaces; blurred circles at ~30% opacity:
```html
```
**16. Animated aurora + glass panel** — blobs drifting on slow transform loops, with a
frosted card giving text a clean landing zone on top:
```html
```
## Layer 5 — Editorial / print textures
**9. Paper grain on light** — same noise SVG at 5% on `multiply` over warm stone
(`bg-stone-100`); almost invisible on purpose:
```html
```
**17. Ruled editorial lines** — notebook rules + a red margin line; pair with a serif
headline. Good for about pages and founder letters:
```html
```
---
## Gotchas (the hard-won stuff)
- **Use inline `style=""` for the pattern CSS, not Tailwind arbitrary-value classes.**
Arbitrary values like `[background-image:radial-gradient(...)]` only work with the
Play CDN or a JIT build that saw the class. Inline styles work everywhere — including
boxes with compiled Tailwind — and survive copy-paste between apps. Use Tailwind
classes only for layout/positioning (`absolute inset-0 opacity-40`).
- **Always ship `mask-image` with the `-webkit-mask-image` twin.** Chrome/Edge/older
Safari need the prefix; without it the fade silently disappears and the pattern ends
in a hard edge.
- **`pointer-events-none` on every pattern layer.** An `absolute inset-0` div without it
sits on top of your content in hit-testing and eats every click. This is the #1 way a
texture "breaks the page."
- **The skeleton ordering matters:** section is `relative overflow-hidden`, pattern
layers are `absolute`, content wrapper is `relative`. Forget `relative` on the content
and it z-fights with (or hides under) the pattern. Forget `overflow-hidden` and
off-canvas blobs create horizontal scrollbars.
- **Quoting the data URI inside an inline style in ERB/HTML:** the style attribute is
delimited with double quotes, so wrap the `url(...)` value in `"..."` (or
single-quote the attribute). The SVG itself must be URL-encoded (`%3C` for `<`, `%23`
for `#`, `%25` for `%`).
- **Opacity is the whole game.** Noise: 2–5% on dark, 3–8% on gradients, 1–3% on white.
Line/dot patterns: keep line color under ~10% opacity black. If you notice the
texture, halve the opacity.
- **Don't texture every section.** A typical page: hero gets the full 3-layer treatment,
one mid-page break gets dots or a grid, the CTA gets grain + gradient. Everything else
stays plain — that contrast is what makes the textured sections land.
- **Dense patterns cause moiré** (shimmer while scrolling). Keep tiles ≥ 16px, dots
≥ 1px, and test on a low-DPI screen if you go finer.
- **Animate `transform` only** (like the aurora keyframes). Animating `background-position`
or `filter` repaints every frame and melts low-end machines. 18–30s loops read as
"alive," anything faster reads as "loading spinner."
- **Text needs a landing zone.** Never put small text straight on a busy pattern — use a
mask to clear the center, or a `backdrop-blur` glass panel (recipe 16).
- **`mix-blend-soft-light` needs a stacking context that includes the background.** If
the noise looks like a flat gray sheet, the blend is compositing against the wrong
layer — make sure the noise div is a sibling *inside* the section that owns the
background color.
---
## Files this pattern touches
```
app/views/.html.erb # recipes drop into existing views
app/views/shared/_textured_section.html.erb # optional: extract the skeleton as a partial
```
No migrations, no routes, no JavaScript dependencies, no image assets.
## How to adapt to your schema
1. Pick 3–4 recipes max for a site (e.g. dark hero #5, plus grid #11, mesh #15, grain
#6) — a restrained set reads as a design system; using all 18 reads as a demo page.
2. Swap the colors: replace the indigo/sky RGBA values with your brand palette. Keep the
alpha values — they're tuned; change only the RGB.
3. For a reusable system, extract the skeleton into a shared partial that takes the
pattern layer as a block or a `pattern:` key, so every page speaks the same visual
language.
4. Light vs dark: each recipe states its intended surface. To flip one, invert the
pattern color (dark lines on light ↔ `rgba(255,255,255,…)` on dark) and re-tune
opacity down.
5. Safe to drop: the noise layer (pure garnish), the animation (static blobs still look
good), and the `-webkit-` prefixes only if you know your users are on current Safari.