Gradient Generator – ToolHorizon

🎨 Gradient Types Explained

Three CSS gradient types supported by this tool

Linear Gradient

linear-gradient(135deg, #7C3AED, #06B6D4)

Radial Gradient

radial-gradient(circle, #7C3AED, #06B6D4)

Conic Gradient

conic-gradient(#7C3AED, #06B6D4, #F59E0B)

Multi-Stop Linear

linear-gradient(90deg, #7C3AED, #EC4899, #F59E0B)

Transparent Fade

linear-gradient(rgba(124,58,237,0), rgba(124,58,237,1))

Repeating Linear

repeating-linear-gradient(45deg, ...)

📐 Gradient Settings Reference

All the controls you can configure

Setting	What It Controls	Options
Gradient Type	The shape of the gradient flow	Linear, Radial, Conic
Angle / Direction	Which direction the gradient flows (linear only)	0°–360° or To Top, Right, Bottom, Left
Color Stops	Colors and their positions along the gradient	Unlimited stops, 0%–100% positions
Opacity	Transparency of each color stop	0% (transparent) – 100% (solid)
Radial Shape	Shape of radial gradient center (radial only)	Circle or Ellipse
Radial Position	Where the radial gradient originates from	Center, Top-left, Custom % position

🚀 How to Use

Create and copy your gradient in minutes

Choose Gradient Type

Select Linear (flows in a direction), Radial (radiates from a center point), or Conic (rotates around a center) from the type selector.

Set Colors & Stops

Click color stop markers on the gradient bar to set colors. Drag them to change position. Add more stops with the + button for multi-color gradients.

Adjust Angle or Direction

Use the angle wheel or preset direction buttons (To Top, To Right, etc.) to control which way the gradient flows.

Copy CSS Code

The live CSS code updates as you edit. Click Copy CSS to grab the background or background-image property code, ready to paste into your stylesheet.

💡 Use Cases

Where gradients are used in real projects

🌐

Hero Backgrounds

Create vibrant gradient backgrounds for website hero sections and landing pages.

🔘

Buttons & CTAs

Apply gradient fills to call-to-action buttons for a modern, premium appearance.

📱

App UI

Use gradients for navigation bars, card backgrounds, and splash screens in mobile apps.

🖼️

Image Overlays

Apply transparent-to-color gradients over photos for text readability in banners.

🎨

Illustrations

Add depth and light effects to digital illustrations using custom gradient fills.

📊

Charts & Data Viz

Use gradients in bar charts, donut charts, and progress indicators for visual polish.

✨ Pro Tips

📐

135° for Modern Look

A 135° diagonal linear gradient feels dynamic and modern. 180° (top to bottom) feels calm and structured. Try different angles for different moods.

👻

Transparent Stops

Add rgba() stops with 0 opacity to create fade-in/fade-out effects over images. Use a transparent stop at 0% and a solid color at 100% for a classic photo overlay.

🎨

Analogous Colors Work Best

Gradients between analogous colors (neighbors on the color wheel) look most natural. Complementary color gradients can produce muddy middle tones — add a white stop in the middle to fix this.

📋

Use as Background-Image

Always use background-image (not background-color) for gradients. Or use the shorthand background property. Gradients cannot be set with background-color.

❓ Frequently Asked Questions

What is a CSS gradient? +

A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file needed. Gradients are defined using CSS functions like linear-gradient(), radial-gradient(), and conic-gradient() and are fully scalable without losing quality.

Do all browsers support CSS gradients? +

Yes. Linear and radial gradients are supported by all modern browsers including Chrome, Firefox, Safari, and Edge. Conic gradients are supported in all modern browsers as of 2021+. No need for vendor prefixes (-webkit- etc.) in modern projects.

How many color stops can I add? +

CSS itself has no hard limit on color stops — you can add as many as you like. Practically, most designs use 2–5 stops. More than 5–6 stops can become hard to control and may produce visually noisy results.

Can I use gradients as a background for text? +

Yes! You can apply a gradient as a background-image on a text element, then use background-clip: text and -webkit-background-clip: text with color: transparent to create gradient-filled text. It's a popular modern design technique.

Can I animate a CSS gradient? +

CSS gradients cannot be directly animated with CSS transitions. A common workaround is to use a very large background-size and animate the background-position — creating a moving gradient effect. Alternatively, JavaScript canvas or SVG animations offer more control.

What's the difference between linear and radial gradients? +

A linear gradient flows in a straight line from one side/angle to another (e.g. left to right). A radial gradient radiates outward from a center point like a spotlight — great for glows, buttons, and backgrounds with a focal point.

🔗 Related Tools

ToolHorizon

🎨 Gradient Generator