Gradient Generator - CSS Linear Radial Conic Free Online Tool | MIFTU

CSS Gradient

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Gradient Type

Linear

Radial

Conic

Angle: 90°

Color Stops

🎨 Gradient Presets

🎨 Complete CSS Gradient Generator Guide

What is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors created entirely with CSS code, without requiring any images. Gradients are powerful design elements that add depth, dimension, and visual interest to websites and applications. CSS gradients are vector-based, meaning they scale perfectly at any resolution, load instantly (no HTTP requests), and can be animated or modified dynamically with JavaScript. Modern CSS supports three types of gradients: linear (straight-line transitions), radial (circular transitions from a center point), and conic (rotational transitions around a point).

Types of CSS Gradients

1. Linear Gradients

Linear gradients transition colors along a straight line in any direction. They're the most common type of gradient and perfect for backgrounds, buttons, headers, and UI elements.

Linear Gradient Example:

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Result: Horizontal gradient from purple-blue to purple, left to right

Linear Gradient Syntax:

Direction: Can be specified as angle (0deg to 360deg) or keywords (to top, to right, to bottom, to left)
Color Stops: Define colors and their positions (0% to 100%)
Example: linear-gradient(45deg, red 0%, blue 50%, green 100%)

Linear Gradient Directions:

/* Top to bottom (default) */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* Left to right */
background: linear-gradient(to right, #667eea, #764ba2);

/* Diagonal (45 degrees) */
background: linear-gradient(45deg, #667eea, #764ba2);

/* Custom angle (135 degrees) */
background: linear-gradient(135deg, #667eea, #764ba2);

2. Radial Gradients

Radial gradients transition colors in a circular or elliptical pattern radiating from a center point. They're perfect for creating spotlights, buttons, orbs, and focal effects.

Radial Gradient Example:

background: radial-gradient(circle at center, #667eea 0%, #764ba2 100%);

Result: Circular gradient from purple-blue center to purple edges

Radial Gradient Syntax:

Shape: circle or ellipse (default)
Size: closest-side, closest-corner, farthest-side, farthest-corner
Position: at center, at top left, at 50% 50%, etc.
Example: radial-gradient(circle at top right, red, blue)

Radial Gradient Variations:

/* Circle at center */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse at top left */
background: radial-gradient(ellipse at top left, #667eea, #764ba2);

/* Circle at specific position */
background: radial-gradient(circle at 75% 25%, #667eea, #764ba2);

3. Conic Gradients

Conic gradients (also called angular gradients) transition colors by rotating around a center point, like a color wheel or pie chart. They're great for creating progress indicators, color pickers, and unique design effects.

Conic Gradient Example:

background: conic-gradient(from 0deg at center, #667eea 0%, #764ba2 100%);

Result: Rotational gradient around center point

Conic Gradient Syntax:

Starting Angle: from 0deg (default is 0deg at top)
Position: at center, at 50% 50%, etc.
Color Stops: Can use degrees or percentages
Example: conic-gradient(from 90deg, red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg)

Conic Gradient - Color Wheel:

background: conic-gradient(
from 0deg,
red 0deg,
orange 60deg,
yellow 120deg,
green 180deg,
blue 240deg,
purple 300deg,
red 360deg
);

Multiple Color Stops

Gradients can have unlimited color stops, allowing for complex multi-color transitions:

Multi-Color Gradient:

background: linear-gradient(
90deg,
#667eea 0%,
#764ba2 25%,
#f093fb 50%,
#4facfe 75%,
#00f2fe 100%
);

Result: 5-color horizontal gradient with even spacing

Color Stop Positioning:

Percentage: 0% (start) to 100% (end)
Hard Stops: Two colors at same position create sharp transition
Example: background: linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%) creates half-red, half-blue

Browser Compatibility & Prefixes

Browser	Linear	Radial	Conic	Prefix Needed?
Chrome 26+	✅ Full	✅ Full	✅ v69+	No
Firefox 16+	✅ Full	✅ Full	✅ v83+	No
Safari 6.1+	✅ Full	✅ Full	✅ v12.1+	-webkit- for old
Edge All	✅ Full	✅ Full	✅ v79+	No
IE 10+	✅ Limited	❌ No	❌ No	-ms-
Mobile (all)	✅ Full	✅ Full	✅ Recent	No (modern)

Cross-Browser CSS Code:

Full Browser Support Code:

/* Fallback for old browsers */
background: #667eea;

/* Safari 5.1-6.0 */
background: -webkit-linear-gradient(left, #667eea, #764ba2);

/* Opera 11.1-12.0 */
background: -o-linear-gradient(left, #667eea, #764ba2);

/* Firefox 3.6-15 */
background: -moz-linear-gradient(left, #667eea, #764ba2);

/* Modern browsers */
background: linear-gradient(to right, #667eea, #764ba2);

Common Gradient Use Cases

1. Hero Section Backgrounds

Large, eye-catching gradients for website headers
Often diagonal or radial for depth
Typically 2-3 colors for clean, modern look
Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

2. Button Hover Effects

Gradient backgrounds on buttons for depth
Animated gradient shift on hover
Can use background-size and background-position for animation

Animated Button Gradient:

.button {
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
background-size: 200% 100%;
transition: background-position 0.3s;
}
.button:hover {
background-position: 100% 0;
}

3. Text Gradients

Apply gradients to text using background-clip
Creates colorful, eye-catching headlines
Works on any text element (h1, p, span, etc.)

Gradient Text Effect:

h1 {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

4. Card Backgrounds

Subtle gradients add depth to cards
Radial gradients create spotlight effects
Often combined with shadows for 3D effect

5. Loading Indicators & Progress Bars

Animated gradients show progress
Conic gradients for circular progress
Linear gradients for bar progress

6. Overlays on Images

Gradient overlays improve text readability over photos
Often black-to-transparent or color-to-transparent
Applied using ::before or ::after pseudo-elements

Image Overlay Gradient:

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

Gradient Design Best Practices

Use 2-3 colors max: Too many colors look messy and unprofessional
Choose harmonious colors: Use color theory (analogous, complementary, triadic)
Subtle is better: Gradients should enhance, not overpower content
Test contrast: Ensure text remains readable over gradients
Consider color blindness: Avoid red-green combinations
Use transparency: RGBA colors allow layering and depth
Match brand colors: Gradients should align with brand identity
Optimize for mobile: Complex gradients can impact performance on low-end devices
Provide fallbacks: Solid color background for very old browsers

Gradient Angle Guide

Angle	Direction	Keyword	Use Case
0deg	Bottom to Top	to top	Vertical lift, sky effect
90deg	Left to Right	to right	Horizontal sweep, progress
180deg	Top to Bottom	to bottom	Default, natural lighting
270deg	Right to Left	to left	Reverse sweep
45deg	Diagonal ↗	to top right	Dynamic, modern look
135deg	Diagonal ↘	to bottom right	Popular for hero sections
225deg	Diagonal ↙	to bottom left	Alternate diagonal
315deg	Diagonal ↖	to top left	Reverse diagonal

Advanced Gradient Techniques

1. Repeating Gradients

Create striped patterns with repeating-linear-gradient()
Useful for backgrounds, dividers, decorative elements
Can create diagonal stripes, checks, complex patterns

Repeating Gradient Stripes:

background: repeating-linear-gradient(
45deg,
#667eea,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);

Result: Diagonal purple stripes repeating every 20px

2. Multiple Gradients (Layering)

Stack multiple gradients for complex effects
Use RGBA colors with transparency for layering
Separate gradients with commas in CSS

Layered Gradients:

background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1), transparent),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1), transparent),
linear-gradient(135deg, #667eea, #764ba2);

Result: Base gradient with two radial light spots

3. Gradient Borders

Create colorful borders using border-image
Requires border-image-source and border-image-slice
Alternative: Use pseudo-elements with gradients

4. Animated Gradients

Animate background-position or background-size
Create moving, shifting gradient effects
Can't directly animate gradient colors (use workaround)

Animated Gradient Background:

@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.animated {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

Popular Gradient Color Combinations

Name	Colors	Code	Use Case
Purple Bliss	Purple → Pink	#667eea → #764ba2	Modern, tech, creative
Ocean Blue	Blue → Cyan	#2E3192 → #1BFFFF	Trust, calm, professional
Sunset	Orange → Pink	#FF6B6B → #FFE66D	Warm, energetic, creative
Fresh Lime	Green → Lime	#56AB2F → #A8E063	Nature, health, eco
Fire	Red → Orange	#f12711 → #f5af19	Energy, passion, bold
Cotton Candy	Pink → Blue	#fbc2eb → #a6c1ee	Soft, playful, feminine

Frequently Asked Questions

Q: Do CSS gradients affect website performance?
A: CSS gradients are generally very performant since they're rendered by the browser's GPU. They're much faster than loading image files. However, very complex gradients (10+ color stops, multiple layers, animations) on many elements can impact performance on low-end devices. For most use cases, gradients are highly optimized and recommended over images.

Q: Can I use gradients on text?
A: Yes! Use background-clip: text with -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the text shape. Example: background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Q: Why isn't my gradient working in Internet Explorer?
A: IE 10-11 support linear gradients with -ms- prefix but don't support radial or conic gradients. IE 9 and below don't support gradients at all. Always provide a solid color fallback: background: #667eea; background: linear-gradient(...);

Q: How do I create a gradient border?
A: Use border-image: linear-gradient(135deg, #667eea, #764ba2) 1; or create a pseudo-element with gradient background and position it behind your element. The pseudo-element method offers more control and better browser support.

Q: What's the difference between to right and 90deg?
A: They're the same! to right = 90deg (left to right). Keywords are more readable; degrees offer precise control. to top = 0deg, to bottom = 180deg, to left = 270deg. Diagonal: to top right = 45deg, to bottom right = 135deg.

Q: Can I animate gradient colors?
A: Not directly with CSS transitions/animations (gradient colors aren't animatable). Workarounds: 1) Animate background-position on oversized gradient, 2) Crossfade between two elements with different gradients using opacity, 3) Use JavaScript/libraries like GSAP for true gradient color animation.

Q: How many color stops can a gradient have?
A: No official limit! Browsers can handle 100+ color stops, but diminishing returns after ~10. Too many stops can make gradients look muddy or reduce performance. For most designs, 2-5 color stops are optimal for clean, smooth transitions.

Q: What are the best tools to create gradients?
A: Popular tools: cssgradient.io, ColorZilla Gradient Editor, this MIFTU Gradient Generator, uiGradients, WebGradients. Most offer live preview, preset libraries, and instant CSS code export. Adobe tools (Photoshop, XD) and Figma also have gradient tools that can export to CSS.

Q: How do I make gradients look smooth and professional?
A: Tips: Use colors from the same family (analogous colors), limit to 2-3 colors, avoid overly saturated colors together, ensure sufficient contrast for readability, use diagonal angles (45deg, 135deg) for modern look, and test on multiple devices/screens.

Q: Can I use gradients in SVG?
A: Yes! SVG has its own gradient system using <linearGradient> and <radialGradient> elements. SVG gradients offer more control and can be applied to strokes and fills. They're useful for complex graphics, icons, and illustrations where CSS gradients aren't sufficient.

Gradient Fun Facts

The first CSS gradients were introduced in Safari 4 (2008) with -webkit- prefix
Instagram's original logo featured a iconic radial gradient (camera lens effect)
Spotify's brand guidelines include specific gradient angles and color stops
CSS gradients save bandwidth—a 1KB CSS gradient replaces a 50KB+ gradient image
The human eye can distinguish approximately 10 million colors in gradients
Conic gradients weren't widely supported until browsers shipped them
Linear gradients account for over 80% of all CSS gradient usage
The color wheel (rainbow circle) is created with a conic gradient
Some designers use 100+ color stops to create ultra-smooth gradients
Gradient backgrounds are one of the top UI/UX design trends in modern web design

CSS Gradient Generator – Create Linear Radial Gradients Free

🎨 Gradient Generator