Create Gradient Backgrounds for Cards

Design gradient fills for cards, modals, sidebars, and UI component backgrounds.

Nem szükséges bejelentkezés

background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Type

Angle: 135°

Color stops

#14b8a60%

#6366f1100%

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.

Bevitel

Enter your data into the tool above. Everything stays local to your browser.

Feldolgozás

The tool processes your data instantly in your browser using JavaScript. No server, no waiting.

Letöltés

Get your result instantly. Nothing is stored after you leave the page — complete privacy.

✓Teljesen ingyenes — soha nincsenek rejtett költségek

✓Nincs szükség fiókra, e-mailre vagy bejelentkezésre

✓A fájlok soha nem hagyják el az eszközét

✓Egyáltalán nincsenek fájlméret-korlátok

✓Semmilyen kimeneten nincsenek vízjelek

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