Documentation

Master CSS Gradient Lab with our comprehensive guide. From basic gradient creation to advanced techniques.

Quick Start Guide

Get up and running with CSS Gradient Lab in minutes

1

Choose Gradient Type

Select Linear, Radial, or Conic gradient to match your design needs.

2

Customize Colors

Add color stops, adjust positions, and fine-tune your perfect gradient.

3

Export & Use

Copy Tailwind classes, CSS code, or variables ready for your project.

Contents

Gradient Types

Understanding the three main gradient types

Linear Gradients

Linear gradients create smooth transitions between colors along a straight line. Perfect for backgrounds, buttons, and overlays.

Key Features:

  • • Direction control (0° to 360°)
  • • Unlimited color stops
  • • Precise positioning
  • • Easy angle adjustment
linear-gradient(45deg, #3b82f6, #8b5cf6)

Radial Gradients

Radial gradients radiate outward from a central point, creating circular or elliptical color transitions. Great for spotlights and focal effects.

Key Features:

  • • Center point positioning
  • • Circular shape
  • • Multiple color stops
  • • Smooth radial transitions
radial-gradient(circle, #fbbf24, #ef4444)

Conic Gradients

Conic gradients rotate around a center point, creating pie-chart-like color transitions. Perfect for progress indicators and creative designs.

Key Features:

  • • Rotation angle control
  • • Center point positioning
  • • Angular color distribution
  • • Modern browser support
conic-gradient(from 45deg, #10b981, #3b82f6)

Controls & Features

Master every control for precise gradient creation

Direction Controls

For linear gradients, use the directional pad or input custom angles:

  • Directional Pad: Click arrows for common directions
  • Custom Angle: Enter precise degrees (0-360)
  • Visual Feedback: See changes in real-time

Color Stop Management

Add, remove, and position color stops with precision:

  • Add Stops: Click the + button to add colors
  • Position: Adjust percentage (0-100%)
  • Remove: Delete stops you don't need
  • Color Picker: Choose colors visually

Pro Tips

  • • Click on color stops to select and modify them
  • • Use at least 2 color stops for basic gradients
  • • Add more stops for complex multi-color effects
  • • Position stops strategically for smooth transitions

Export Options

Multiple export formats for every workflow

TW

Tailwind CSS

Ready-to-use Tailwind utility classes

bg-gradient-to-r from-blue-500 to-purple-500

Regular CSS

Standard CSS background property

.gradient { background: linear-gradient(...) }

CSS Variables

Reusable CSS custom properties

--gradient: linear-gradient(...)
One-Click Copy
Download as File
Live Preview

Best Practices

Design principles for beautiful, functional gradients

✓ Do

  • •Use subtle gradients for better readability
  • •Test gradients on different screen sizes
  • •Consider accessibility and contrast ratios
  • •Use similar hues for smooth transitions
  • •Test in different browsers

✗ Don't

  • •Use too many color stops (keep it simple)
  • •Create jarring color combinations
  • •Forget about mobile performance
  • •Use gradients that make text unreadable
  • •Overuse gradients in a single design

Performance Tips

Modern CSS gradients are hardware-accelerated and performant, but avoid extremely complex gradients with many stops on mobile devices.

Common Examples

Popular gradient patterns and use cases

Button Gradients

Primary Button
bg-gradient-to-r from-blue-500 to-blue-600

Hero Backgrounds

Hero Section
bg-gradient-to-br from-purple-600 to-red-600

Card Overlays

Image Overlay
bg-gradient-to-t from-black/60 to-transparent

Progress Indicators

bg-gradient-to-r from-green-400 to-green-600

Troubleshooting

Common issues and solutions

Gradient not showing?

Check if the element has defined dimensions (width/height) and ensure the gradient syntax is correct.

Browser compatibility issues?

Modern gradients are supported in all current browsers. For older browsers, consider fallback colors.

Tailwind classes not working?

Ensure you have the latest Tailwind version and that arbitrary values are enabled in your config.

Performance issues?

Avoid extremely complex gradients with many color stops, especially on mobile devices.

CSS Gradient Syntax

Reference for gradient CSS syntax

Linear Gradient Syntax

linear-gradient([angle], color1 [position], color2 [position], ...)

Example: linear-gradient(45deg, #ff0000 0%, #00ff00 100%)

Radial Gradient Syntax

radial-gradient([shape] [size] [at position], color1, color2, ...)

Example: radial-gradient(circle, #ff0000, #00ff00)

Conic Gradient Syntax

conic-gradient([from angle] [at position], color1, color2, ...)

Example: conic-gradient(from 90deg, #ff0000, #00ff00)

Start Creating Gradients