Create Gradient Buttons and CTAs

Design eye-catching gradient button backgrounds for calls-to-action that stand out.

ලොගිනය අවශ්‍ය නැත

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

Type

Angle: 135°

Color stops

#14b8a60%

#6366f1100%

Presets

Buttons tips

🔘

Gradient buttons look best with a tight angle (90° or 135°) and two closely related colours — same hue family, different lightness.

💡

The teal→indigo gradient is especially popular for SaaS CTAs. Use the preset as a starting point and adjust to match your brand.

🎨

Add a hover state by slightly shifting the gradient: use CSS `background-size: 200%` and `background-position` transition for a smooth animation.

♿

Ensure text on gradient buttons passes WCAG contrast. White text on mid-tone gradients often fails — test both ends of the gradient.

ඇතුළු කරන්න

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

සකස් කරන්න

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

බාගත කරන්න

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

✓සම්පූර්ණයෙන්ම නොමිලේ — කිසිදා සැඟවුණු පිරිවැයක් නැත

✓ගිණුමක්, විද්‍යුත් තැපෑලක්, හෝ ලොගිනයක් අවශ්‍ය නැත

✓ගොනු කිසිදා ඔබේ උපාංගය හරහා නොයන්නේය

✓කිසිදු ගොනු ප්‍රමාණ සීමාවක් නැත

✓ඕනෑම ප්‍රතිදානයක ජල සලකුණු නැත

Create Gradients for Hero Sections

Design full-page gradient backgrounds for website

Create Gradient Backgrounds for Cards

Design gradient fills for cards, modals, sidebars,

Create Gradients for Social Media Graphics

Design vibrant gradient backgrounds for Instagram

Create Colour Scales for Charts

Generate gradient colour scales for heatmaps, prog