Gradient Generator

Gradient Generator Tool

Create stunning CSS gradients and export social-ready assets from your browser.

Open the tool → · Full feature blog →

Gradient types

• Linear — angled blends with draggable color stops
• Radial — circular spotlights and vignettes
• Conic — color sweeps around a center point
• Mesh — multi-blob mesh gradients
• Grid, Sharp, Soft — structured and stylistic variants

Design library

• 35 built-in presets (Sunset, Ocean, Purple Dream, and more)
• 69 curated palette examples filterable by warm, cool, pastel, dark, ocean, and more
• 10 background patterns (grid, dots, hexagon, scan lines, checkerboard, etc.)
• Noise overlay with adjustable intensity

Animation

• Slide and Wave background animations
• Direction, speed, easing, and loop controls
• Copied CSS includes animation and background-size

Frames & studio

• Frame picker — desktop, mobile, aspect ratios, Instagram, YouTube, Pinterest, TikTok, LinkedIn, and custom W×H
• Studio frames — multiple artboards in one session, saved in cookies
• Undo / redo history

Export & share

• Copy CSS — gradient + pattern + animation in one snippet
• Share URL — full state encoded in the link
• Download — SVG, PNG, JPEG, GIF, MP4/WebM at current frame size

Quick start

Example output

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 200% 200%;
animation: slideRight 5s linear infinite;