component 13 / 28WORKING
SC CSS Pattern
- type
- Code Component
- platform
- Framer
- read time
- 7–9 min
- license
- SecretoCho Design
demo · runs with JavaScript
Pure-CSS pattern generator (grid, stripes, checks, dots, zigzag, triangles) with size/spacing/angle controls and optional text-clip mode; GPU-accelerated backgrounds.
SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills.
Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.
- Visual
- Pattern Generator
- CSS
Main
Overview
- Built With
- React, CSS, Framer Code Component API
- Layout Support
- Fully Responsive or fixed width/height
- Orientation
- Full Fill or Text Clip
- Ideal Use Case
- Decorative backgrounds, patterned text, section textures
Tags
Code comment
/** * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any * © SecretoCho Design 2025 (https://secretocho.design) */Dependencies
- Technologies
- None (pure CSS)
- Notes
- No runtime libraries required; works with Framer’s standard runtime.
Complexity
- Logic Level
- Low–Medium (computed CSS)
- Runtime Cost
- Very Low (GPU-accelerated background paints)
- Component Size
- ~2–3 KB (raw TSX)
- Notes
- Text clip mode benefits from large font sizes for crisp results.
Guide
Instructions
- Paste the SCCssPattern code component into your Framer project.
- Place it on the canvas. It defaults to fill its parent (width/height: 100%).
- Choose a Pattern via Pattern (grid, checks, stripes, dots, zigzag, triangles, etc.).
- Tune Look with Size, Stroke Width, Dot Size, Spacing, and angles (Angle, Triangle Angle).
- Color sets the pattern color (uses currentColor, so it also drives text color when not clipped).
- Text Clip (optional): Enable Text Clip, then edit Text, Font Size, Font Weight, and Align.
- Responsive Tips: Use the layer’s constraints or set explicit width/height props for fixed tiles.
Examples / Presets
Subtle Grid
- patternType
- grid
- size
- 28
- strokeWidth
- 1
- color
- #CCD3DC
Bold Diagonal
- patternType
- diagonal-stripes
- size
- 12
- strokeWidth
- 4
- angle
- 45
- color
- #111
Dot Matrix
- patternType
- dots
- dotSize
- 2
- spacing
- 14
- color
- #00A3FF
Text Fill
- isTextPattern
- true
- text
- "PATTERN"
- fontSize
- 96
- patternType
- checks
Mechanics
How it Works
- Computed Styles: A switch on patternType returns a patternStyle containing one or more gradient layers.
- Line & Grid Patterns: Use linear-gradient or repeating-linear-gradient with backgroundSize to space strokes.
- Dots / Cross Dots: Use radial-gradient “dot” plus optional offset layer for cross-hatch placement.
- Stripes: Horizontal/vertical/diagonal variants rely on gradient direction and repeat size; diagonal uses angle.
- Checks & Zigzag: Layered gradients with offsets create checkerboards and zig patterns.
- Triangles: A single linear-gradient at triangleAngle produces tiled right triangles.
- Text Clip Mode: Applies the pattern to the text by setting background-clip: text and -webkit-background-clip: text with transparent fill, leaving only the patterned glyphs visible.
Performance & Tuning
- Paint-cheap; avoid extreme Size on huge canvases.
- Dots: keep dotSize 1–3 with spacing 10–24.
- Text Clip: large fonts reduce moiré; keep lineHeight ≈ 1.2.
Compatibility & Limits
- Evergreen browsers (Chrome, Edge, Firefox, Safari).
- Text clipping uses background-clip: text + -webkit- prefix (included).
- No external dependencies.
Quality
Accessibility
- Decorative by default. If purely ornamental, wrap with aria-hidden="true".
- In Text Clip mode, ensure sufficient contrast and legible size.
Security & Privacy
- No network calls; no storage.
- Typed props; no dangerouslySetInnerHTML / eval.
- No device permissions. Pure style computation; no global listeners.
Reference
Props
| name | type | default | description |
|---|---|---|---|
width | string|number | 100% | Component width (supports %, px) |
height | string|number | 100% | Component height (supports %, px) |
patternType | string | grid | Type of pattern to render |
size | number | 25 | Base pattern size for lines/checks/etc. |
color | string | #0099FF | Pattern color (used as currentColor) |
strokeWidth | number | 1 | Line width for grid/lines/diagonal stripes |
angle | number | 45 | Angle (deg) for diagonal stripes |
triangleAngle | number(enum) | 45 | Triangle fill angle (45, 135, -45, -135) |
dotSize | number | 2 | Dot radius for dot-based patterns |
spacing | number | 15 | Dot spacing for dots/cross-dots |
isTextPattern | boolean | false | Clip pattern into text instead of background |
text | string | Pattern Text | Text content when Text Clip is enabled |
fontSize | number | 72 | Font size (px) for text pattern |
fontWeight | number | 700 | Font weight for text pattern (100–900) |
textAlign | string(enum) | center | Horizontal alignment of text (left/center/right) |
Notes & Tips
- Prefer integer Size and Stroke Width 1–2px for crisp lines.
- Neutral colors for backgrounds; high contrast for text fills.
Troubleshooting / FAQ
Pattern looks blurry
Use integer size; reduce strokeWidth; avoid scaling transforms.
Text invisible
Ensure Text Clip is on and global CSS doesn’t override WebkitTextFillColor.
Moiré
Increase size/spacing or lower contrast.
Source
Header comment
SC_CSS_Pattern.tsx has no doc comment: its header, lines 4–9, holds only Framer’s annotations (shown under [MAIN]).
Key excerpt
Every pattern is one CSS background recipe drawn in currentColor: the size guards and the first four of the eleven cases.
const getPatternStyle = (): React.CSSProperties => { const s = Math.max(size, 1) const sw = Math.max(strokeWidth, 0.1) const ds = Math.max(dotSize, 0.1) const sp = Math.max(spacing, 1) switch (patternType) { case "checks": return { backgroundImage: `repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor)`, backgroundPosition: `0 0, ${s}px ${s}px`, backgroundSize: `${s * 2}px ${s * 2}px`, } case "grid": return { backgroundImage: `linear-gradient(currentColor ${sw}px, transparent ${sw}px), linear-gradient(to right, currentColor ${sw}px, transparent ${sw}px)`, backgroundSize: `${s}px ${s}px`, } case "dots": return { backgroundImage: `radial-gradient(currentColor ${ds}px, transparent ${ds}px)`, backgroundSize: `${sp}px ${sp}px`, } case "cross-dots": { const sp2 = sp / 2 return { backgroundImage: `radial-gradient(currentColor ${ds}px, transparent ${ds}px), radial-gradient(currentColor ${ds}px, transparent ${ds}px)`, backgroundSize: `${sp}px ${sp}px`, backgroundPosition: `0 0, ${sp2}px ${sp2}px`, } }Credits
Credits
Inspired by classic CSS gradient pattern techniques.
Original implementation and Framer adaptation by SecretoCho Design.
- license
- SecretoCho Design
SecretoCho Design 2025
Disclaimer
Provided “as is” for visual/UX purposes. Validate performance, accessibility, and licensing within your project.
Proves
Hiring a design engineer?
I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.
sc@secretocho.design