Gradient Generator

CSS Gradient Generator - Create Beautiful Gradients

A powerful CSS gradient generator that creates linear and radial gradients with multiple colors. Features live preview, customizable directions and positions, preset gradients, and exports ready-to-use CSS code. Perfect for web designers and developers creating modern web designs.

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors. It's created using CSS and doesn't require any images, making it perfect for modern web design.

Types of gradients:

Linear Gradient:
- Colors transition in a straight line
- Can go in any direction (horizontal, vertical, diagonal)
- Syntax: linear-gradient(direction, color1, color2, ...)
- Example: linear-gradient(to right, #FF6B6B, #4ECDC4)
- Most common type

Radial Gradient:
- Colors radiate from a center point
- Creates a circular or elliptical pattern
- Syntax: radial-gradient(shape at position, color1, color2, ...)
- Example: radial-gradient(circle at center, #FF6B6B, #4ECDC4)
- Great for spotlight effects

Benefits:
- No image files needed (faster loading)
- Scalable to any size
- Easy to customize
- Better performance
- Smaller file sizes

How do I use gradient directions?

Gradient directions control where colors flow:

Linear Gradient Directions:

Keyword Directions:
- to right: Left to right →
- to left: Right to left ←
- to bottom: Top to bottom ↓
- to top: Bottom to top ↑
- to bottom right: Diagonal ↘
- to top left: Diagonal ↖

Angle Directions:
- 0deg = to top ↑
- 90deg = to right →
- 180deg = to bottom ↓
- 270deg = to left ←
- Any angle between 0-360deg

Radial Gradient Positions:
- center: Middle of element
- top/bottom/left/right: Edge positions
- top left, top right, etc.: Corner positions
- Custom: at 30% 70% (x% y%)

Examples:
linear-gradient(to right, red, blue)
linear-gradient(45deg, red, blue)
radial-gradient(circle at top left, red, blue)

Tip: Use angles for precise control, keywords for common directions.

What are color stops and how do they work?

Color stops define where each color appears in the gradient:

Basic Concept:
- Position is percentage (0-100%)
- 0% = start of gradient
- 100% = end of gradient
- Browser smoothly transitions between stops

Examples:

Two Colors:
red 0%, blue 100%
- Smooth transition from red to blue

Three Colors:
red 0%, yellow 50%, blue 100%
- Red → yellow (first half)
- Yellow → blue (second half)

Hard Stops:
red 0%, red 50%, blue 50%, blue 100%
- No transition, sharp color change at 50%

Uneven Distribution:
red 0%, yellow 20%, blue 100%
- Quick red to yellow transition
- Long yellow to blue transition

Tips:
- More stops = more colors
- Equal spacing = smooth gradient
- Close stops = sharp transition
- Experiment with positions for unique effects

This tool lets you add unlimited color stops and adjust positions with sliders.

How do I create a multi-color gradient?

Creating multi-color gradients:

Steps:
1. Start with 2 colors (default)
2. Click "Add Color" button
3. Choose color for new stop
4. Adjust position (0-100%)
5. Repeat for more colors
6. Rearrange by changing positions

Color Distribution:

Even Distribution:
3 colors: 0%, 50%, 100%
4 colors: 0%, 33%, 67%, 100%
5 colors: 0%, 25%, 50%, 75%, 100%

Custom Distribution:
Create emphasis on certain colors:
- red 0%
- orange 10%
- yellow 90%
- green 100%
This keeps orange-yellow section longer

Rainbow Effect:
Red 0% → Orange 16% → Yellow 33% → Green 50% → Blue 66% → Indigo 83% → Violet 100%

Sunset Effect:
#FF512F 0% → #DD2476 50% → #4ECDC4 100%

Tips:
- Start simple (2-3 colors)
- Add colors gradually
- Use similar colors for smooth blends
- Use contrasting colors for bold effects
- Position matters more than you think

This tool makes it easy to add, remove, and adjust colors visually.

What are the preset gradients?

Preset gradients are pre-designed color combinations:

Available Presets:

Sunset:
- Colors: #FF512F → #DD2476
- Warm, vibrant orange to pink
- Great for headers, CTAs

Ocean:
- Colors: #2E3192 → #1BFFFF
- Deep blue to cyan
- Perfect for water themes

Forest:
- Colors: #134E5E → #71B280
- Dark teal to green
- Natural, calming effect

Peachy:
- Colors: #ED4264 → #FFEDBC
- Pink to peach cream
- Soft, elegant look

Purple Dream:
- Colors: #A770EF → #CF8BF3 → #FDB99B
- Purple to pink gradient
- Modern, trendy

Cool Sky:
- Colors: #2980B9 → #6DD5FA → #FFFFFF
- Blue to white
- Clean, professional

Warm Flame:
- Colors: #FF9A56 → #FF6A88 → #FF99AC
- Warm orange-pink tones
- Energetic, passionate

Night Fade:
- Colors: #A18CD1 → #FBC2EB
- Purple to pink fade
- Dreamy, mystical

Using Presets:
- Click any preset to apply
- Customize colors after applying
- Use as starting point
- Learn color combinations

Presets are great for inspiration and quick results!

Key Features

• Create linear and radial gradients
• Live preview with instant updates
• Add unlimited color stops
• Adjust color positions with precision
• Multiple direction options
• Custom angle support (0-360°)
• 8 beautiful preset gradients
• Copy CSS code to clipboard
• Random gradient generator
• Reverse gradient direction
• Remove color stops (minimum 2)
• Export ready-to-use CSS
• 100% client-side processing
• No server communication
• Works offline
• Dark mode support
• Mobile-friendly interface