🎨 CSS Gradient Generator

Create beautiful linear and radial gradients for your website. Customize colors, angles, and positions. Copy CSS code instantly.

Presets:
135°
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);

✨ Features

Linear

Gradients

Radial

Gradients

Real-time

Preview

Copy

CSS Code

  • Create linear and radial CSS gradients with live preview
  • Multiple color stops with custom percentage positions
  • Adjust angle for linear gradients (0° to 360°)
  • Custom position and shape for radial gradients
  • Real-time preview updates as you change colors
  • Copy generated CSS code to clipboard instantly
  • Load preset gradient examples (Sunset, Ocean, Forest, Aurora, Fire, Purple Dream)
  • Add unlimited color stops
  • Perfect for website backgrounds, buttons, and UI elements

📖 CSS Gradient Guide

linear-gradient()
radial-gradient()
conic-gradient()
repeating-gradient()

Linear Gradient transitions colors along a straight line. Use angles (e.g., 135deg) or directions (to right, to bottom left).

Radial Gradient transitions colors outward from a central point. Use shapes (circle, ellipse) and positions (center, top left, etc.).

Pro Tip: Gradients are widely supported in all modern browsers and can be used on backgrounds, buttons, text, and borders.

❓ Frequently Asked Questions

How do I use the CSS gradient generator?

Select gradient type (Linear or Radial), choose your colors and positions, and watch the real-time preview. Copy the generated CSS code and paste it into your stylesheet.

What is the difference between linear and radial gradients?

Linear gradients transition colors along a straight line (you can set the angle). Radial gradients transition colors outward from a central point (you can set the shape and position).

How many color stops can I add?

You can add as many color stops as you want! Click the "Add Color Stop" button to create more color points in your gradient.

Can I use these gradients on buttons and text?

Absolutely! Gradients work on backgrounds, buttons, text (with background-clip: text), borders, and any other element that accepts CSS backgrounds.

Is this tool free?

Yes! Our CSS gradient generator is completely free to use. No registration, no hidden fees.

💬