Pattern + Gradient Backgrounds
Tailwind Pattern Backgrounds
Use GradientBackground to control from / via / to Tailwind color stops, and combine them with tailwindcss-bg-patterns for reusable hero and card backgrounds.
Live preview
Isometric (pattern-isometric) with Solid pattern color.
Pattern + Gradient
Isometric
Solid overlay
Pattern classes: pattern-isometric pattern-slate-200 pattern-bg-transparent pattern-opacity-60 pattern-size-8 bg-repeat
Gradient classes: bg-gradient-to-tr from-emerald-500 via-emerald-400 to-amber-300
Pattern style
Pattern color
Use TailwindColorPlayground to pick a solid pattern foreground color.
Pattern opacity
Pattern size