Gradients
Beautiful gradient presets for backgrounds, text, and UI elements.
Linear Gradients
Subtle Light
A soft, minimal gradient for light backgrounds.
Ocean
Cool blue tones inspired by the sea.
Sunset
Warm orange and pink tones.
Aurora
Northern lights inspired with teals and purples.
Midnight
Deep dark gradient for dark mode UIs.
Peach
Soft peachy tones for friendly UIs.
Forest
Natural green tones.
Royal
Rich purple gradient for premium feel.
Framer
Elegant radial gradient used by Framer for highlighted cards.
Mesh Gradients
Mesh Aurora
Complex multi-color mesh gradient.
Mesh Sunset
Warm mesh gradient with orange and pink.
Text Gradients
Rainbow Text
Colorful gradient text effect.
Gradient Text
Gold Text
Luxurious gold text gradient.
Premium Gold
Tailwind Gradients
Native Tailwind gradient utilities.
from-blue-500 to-violet-500
from-pink-500 to-orange-500
from-emerald-500 to-blue-500
from-amber-500 to-red-500
from-indigo-500 via-pink-500 to-orange-500
from-gray-800 via-gray-700 to-gray-500
Best Practices
- Keep it subtle - Gradients should enhance, not distract. Use subtle transitions for backgrounds.
- Mind contrast - Ensure text remains readable over gradient backgrounds.
- Limit colors - 2-3 colors work best. More can look chaotic.
- Consider direction - 135deg (diagonal) feels dynamic, 90deg (horizontal) feels calm.
- Test in both modes - Ensure gradients work in both light and dark mode.
- Use for emphasis - Reserve vibrant gradients for CTAs and key elements.