# Texture Pattern Design

> Background textures, patterns, noise overlays, and surface treatment in digital design.

- Skill: `dragoon0x/texture-pattern-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/texture-pattern-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/texture-pattern-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/texture-pattern-design

---


# Texture Pattern Design

## Texture Types

| Type | Effect | Use |
|------|--------|----|
| Noise/grain | Organic warmth, depth | Hero backgrounds, dark surfaces |
| Dot pattern | Structure, rhythm | Subtle backgrounds, decorative |
| Line pattern | Direction, movement | Accents, section dividers |
| Geometric | Order, precision | Technical/developer products |
| Organic | Warmth, approachability | Lifestyle/creative brands |

## Implementation
```css
/* Noise overlay */
.textured {
  position: relative;
}
.textured::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.03;
  pointer-events: none;
}
```

## Rules
1. Textures should be barely perceptible. If it's distracting, it's too strong.
2. Reduce opacity to 2-5% for most textures.
3. Ensure text remains readable over textured backgrounds.
4. Performance: use CSS patterns or tiny tileable images, not large files.
5. Don't combine multiple texture types on the same surface.