Pattern Craft
257 copy-paste CSS background patterns and gradients, MIT licensed
A free gallery of background treatments you copy as CSS or Tailwind-ready snippets, filed under Gradients, Geometric, Decorative, and Effects, with a favourites filter. Every pattern has a live preview and one-click copy, uses no external dependencies, and is written for JSX and React as well as plain HTML. The site counts 257 patterns; the MIT-licensed repo has about 3.1k stars and was pushed in July 2026, and it is part of the Vercel OSS Program.
Reach for this the moment a hero or section looks flat and you need a background in one line — it beats generating gradient CSS yourself because each snippet is already tuned and dependency-free. Prefer it over Unicorn Studio or a canvas library whenever the effect can be static, since these are pure CSS with no runtime, no WebGL requirement, and no third-party host. Two cautions: most patterns are a single absolutely positioned div you must place behind content with the right z-index, and several rely on radial-gradient stacks that read very differently on a dark background, so check both themes.
Why it is here. The quickest honest fix for the blank-background problem, MIT licensed and large enough that you rarely need a second source.
- 257 patterns
- MIT licence
- ~3.1k GitHub stars
- zero dependencies, pure CSS
- Vercel OSS Program
Verified 2026-08-15. HTTP 200. https://patterncraft.fun/, https://github.com/megh-bari/pattern-craft, GitHub API repos/megh-bari/pattern-craft (3058 stars, MIT, pushed_at 2026-07-08)
