🎨 Gradients

Curated gradient collection — copy CSS, Tailwind classes, or export as PNG.

About Gradients

Browse a curated gallery of 87 hand-picked gradients. Copy them as raw CSS, Tailwind utility classes, or download a PNG to drop into a slide deck or banner.

How to use

  1. Scroll the gallery — each tile previews a gradient.
  2. Click a tile to expand the copy and download options.
  3. Copy your preferred format or save the PNG.

Common use cases

  • Picking a hero background for a landing page.
  • Finding a gradient that complements a brand color.
  • Generating a quick PNG for social media or thumbnails.
  • Exploring color combinations without opening a design tool.

Tips

  • The Tailwind output uses bg-gradient-to-* with the matching from-, via-, and to- classes — paste straight into markup.
  • PNG exports are 1200×630, sized for OG and Twitter cards.
  • Hover any tile to preview the gradient at full size before committing.

FAQ

Where do these gradients come from?
Hand-curated for typical UI use cases — heroes, banners, accent surfaces — with an eye on contrast and readability over text.
Are the Tailwind classes v3 or v4?
The output uses bg-gradient-to-* with from-/via-/to- color stops, which both Tailwind v3 and v4 support.
What size are the PNG exports?
1200×630, sized for OG and Twitter cards. Drop them straight into a meta tag or social preview without resizing.
Can I customize the colors?
The gallery itself is fixed, but the CSS output is a regular linear-gradient — copy it and tweak the stops, angle, or color space.

More tools

JSON

🗂️ JSON Formatter 🔷 JSON to TypeScript 🔍 JSON Diff 🔤 JSON Sort 📊 JSON ↔ CSV 📝 JSON ↔ YAML 🛡️ JSON to Validator Schema

Code

🧪 Regex Tester ⚛️ SVG to JSX 📷 SVG to Raster ⏱️ Cron Decoder 📸 Code Snippet to Image 📄 Text Diff 📝 Markdown Preview 🏷️ SemVer Checker 🔑 JWT Decoder

Ornaments

🫧 Blob Generator 〰️ Wave Generator

Image

🗜️ Image Compressor 📐 Image Resizer ✂️ Image Cropper 🖼️ Image Format Converter 🔏 Image Watermark

Audio

🎵 MP3 Tag Editor

Web / SEO

🔍 Meta Tag Preview 🕵️ User Agent Parser 🖼️ OG Image Builder

Generators

📱 QR Code Generator 📜 Lorem Ipsum Generator 👤 Avatar Generator ⭐ Favicon Generator 🪪 UUID Generator 🎡 Wheel of Names

PDF

📄 PDF Merger 📑 Image to PDF 🤏 PDF Compressor ✂️ PDF Splitter 🗂️ PDF Page Manager 💧 PDF Watermark ✍️ PDF Signature 🖼️ PDF to Image

Time

🍅 Pomodoro Timer