satori-patterns

Background patterns for Satori and @vercel/og.

By Babatunde Fatai — hand-reviewed CSS background styles that work reliably in Satori's constrained rendering environment. Translated from PatternCraft (MIT).

Install

npm install satori-patterns

Quick start

import { lavenderCosmicGlow } from 'satori-patterns'
import { ImageResponse } from '@vercel/og'

export default function OGImage() {
  return new ImageResponse(
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        ...lavenderCosmicGlow.style,
      }}
    >
      <h1 style={{ color: 'white', fontSize: 64, margin: 'auto' }}>
        Your title here
      </h1>
    </div>,
    { width: 1200, height: 630 }
  )
}

Available exports

import {
  allPatterns,           // all approved patterns as array
  gradientPatterns,      // filtered by category
  geometricPatterns,
  decorativePatterns,
  effectsPatterns,
  lavenderCosmicGlow,    // named pattern (camelCase of id)
  mysticPurpleOrb,
  // ... all approved patterns
} from 'satori-patterns'

What patterns are included

161 approved patterns across four categories:

• gradients — radial and linear gradient backgrounds (glows, orbs, fades, mesh)
• geometric — grid lines, dot arrays, circuit boards, diagonal crosshatches
• decorative — soft glows, tinted fades, layered radials
• effects — noise overlays, neon lines, blurred focal points

Patterns are selected through a render pipeline: each pattern is translated from PatternCraft's Tailwind-based source into explicit inline CSS, rendered through Satori, and approved by human review. Only patterns that render correctly and look good as social media backgrounds make it into the package.

Compatible with

• @vercel/og — Next.js ImageResponse
• satori — directly via JSX
• Next.js app/opengraph-image.tsx routes

Why this exists

Satori does not support Tailwind classes, CSS variables, or many modern CSS features. PatternCraft patterns require these. This library provides the translated subset (radial-gradient, linear-gradient, repeating-linear-gradient) that passes Satori's render pipeline, tested against Satori 0.19.x.

Browse patterns

Live catalogue — side-by-side CSS and Satori render previews, with one-click copy of import statements and style objects.

License

MIT — includes patterns from Babatunde-Fatai/satori-patterns (MIT, copyright Babatunde Fatai)

MIT — includes original patterns from megh-bari/pattern-craft (MIT, copyright Megh Bari)