Visual
Pattern Generator
CSS
0 views
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.
//
Tags
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.
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.
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.
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.
Evergreen browsers (Chrome, Edge, Firefox, Safari).
Text clipping uses background-clip: text + -webkit- prefix (included).
No external dependencies.
Decorative by default. If purely ornamental, wrap with aria-hidden="true".
In Text Clip mode, ensure sufficient contrast and legible size.
No network calls; no storage.
Typed props; no dangerouslySetInnerHTML / eval.
No device permissions. Pure style computation; no global listeners.
Decorative by default. If purely ornamental, wrap with aria-hidden="true".
In Text Clip mode, ensure sufficient contrast and legible size.
No network calls; no storage.
Typed props; no dangerouslySetInnerHTML / eval.
No device permissions. Pure style computation; no global listeners.
Inspired by classic CSS gradient pattern techniques.
Original implementation and Framer adaptation by SecretoCho Design.
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. Validate performance, accessibility, and licensing within your project.
Stay ahead of the curve with insights into emerging visualization trends and technologies.