Back to library

Preview of Hero Patterns

Site

Backgrounds, Effects & CSS Oddities · Background patterns

Hero Patterns

Library of tileable SVG background patterns with live foreground colour and opacity controls, copied out as data-URI CSS.

Why it’s a gem
Steve Schoger's taste applied to backgrounds; free CC-BY and never bloated

Visit heropatterns.com

Author: Steve Schoger (@steveschoger)
Type: Website
License: free
Added: Aug 17, 2026
Domain: heropatterns.com

svg patterns background css

More from Background patterns

Preview of SVG Backgrounds

SVG Backgrounds

Collection of customisable SVG backgrounds, shape dividers, doodles and preloaders with export presets for Webflow, Elementor and plain CSS.

Unknownfreemium

Preview of topolines

topolines

One React component that draws animated topographic contour backgrounds on the GPU, with six presets and a live playground.

Preview of CSS Pattern

CSS Pattern

157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour.