Loading
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Designbackground: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Choose gradient type: linear or radial.
Add color stops by clicking the gradient bar and picking colors.
Drag stops to adjust positions, or set the angle for linear gradients.
Preview the gradient live on the canvas.
Copy the generated CSS with the copy button and paste into your stylesheet.
Create a smooth two-tone gradient for a landing page hero without needing an image.
Add a subtle gradient to a CTA button to make it feel tactile and clickable.
Use a dark-to-transparent gradient over an image so text is always readable.
Quickly explore color combinations for a design system's gradient token library.
Build CSS linear and radial gradients visually, then copy production-ready code. Useful for frontend developers crafting hero sections, designers prototyping backgrounds, and anyone tired of guessing color stops by hand.
Find and convert HEX, RGB, HSL color codes for your designs.
Design CSS box shadows with live preview, multi-layer support, and copy.
Visually craft any rounded-corner shape with per-corner control.
Generate harmonious color palettes from a single base color.
Browse the full Tailwind color palette and click any swatch to copy.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.