Create Gradient Backgrounds for Cards
Design gradient fills for cards, modals, sidebars, and UI component backgrounds.
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);Presets
UI Backgrounds tips
Use radial gradients for card backgrounds to create a subtle "light from above" effect — more realistic than flat colour.
Very subtle gradients (e.g. white to light grey, 10% difference in lightness) add depth without overwhelming the card content.
Conic gradients work beautifully for avatar backgrounds and icon containers — they give a distinctive, modern look to profile pictures.
Copy the CSS and add it as a Tailwind CSS arbitrary value: className="[background:linear-gradient(...)]" for utility-first frameworks.
نحوه کار
چرا ابزار ما؟
Also check out…
Create Gradients for Hero Sections
Design full-page gradient backgrounds for website
Create Gradient Buttons and CTAs
Design eye-catching gradient button backgrounds fo
Create Gradients for Social Media Graphics
Design vibrant gradient backgrounds for Instagram
Create Colour Scales for Charts
Generate gradient colour scales for heatmaps, prog