Create Gradients for Hero Sections

Design full-page gradient backgrounds for website hero sections and landing pages.

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

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

Type

Angle: 135°

Color stops

#14b8a60%

#6366f1100%

Presets

Hero tips

🦸

Hero section gradients should be subtle — overly vivid gradients distract from your headline and CTA. Use lower-saturation colours for backgrounds.

🎨

135° diagonal gradients feel modern and dynamic. 180° top-to-bottom is more traditional and calm. Choose based on your brand personality.

💡

For dark-mode compatible gradients, test your colours at both 100% and 50% opacity. Subtle gradients often translate better across themes.

📋

Click "Copy CSS" and paste the background property directly into your hero section's CSS or Tailwind config.

ඇතුළු කරන්න

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 Gradient Buttons and CTAs

Design eye-catching gradient button backgrounds fo

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