What types of CSS gradients are available?

CSS supports three gradient types: linear-gradient (transitions colors along a straight line), radial-gradient (radiates from the center outward), and conic-gradient (rotates around the center point). These can be combined and layered for complex effects.

How do I set the angle for linear-gradient?

The angle defines the direction of color transition. 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom, 270deg = right to left. You can also use keywords like "to right", "to bottom right", etc. This tool provides both an angle slider and direction buttons.

How do I create multi-color gradients?

Add multiple color values in the gradient function. Each color can have a position percentage (e.g., #ff0000 0%, #00ff00 50%, #0000ff 100%). Use the "Add Color" button to add color stops and adjust position values to control the distribution of each color.

What are common use cases for gradients in development?

CSS gradients are widely used for: page backgrounds, button hover effects, card decorations, loading animations, text masks (-webkit-background-clip: text), dividers, shadow simulations, glassmorphism effects, and more. Gradients don't require image loading, perform better than background images, and can be dynamically adjusted.

CSS Gradient

Linear / Radial / Conic Gradient Generator

Gradient Type

Direction

Angle°

Color Stops

Presets

CSS Code

background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);

CSS Gradient Generator Guide

Features

Linear Gradient — transition colors along a straight line, supports custom angle
Radial Gradient — gradient radiating from the center, supports circle and ellipse
Conic Gradient — gradient rotating around the center point, ideal for color wheels
Color Stops — add and remove color nodes, precisely control gradient positions
Preset Gradients — 20+ curated gradient presets, one-click apply

Use Cases

Web page backgrounds, buttons, and card gradient designs
Quick CSS background code generation
Color scheme inspiration for UI design
Base color values for gradient animations
Visual effects in responsive design

CSS Gradient

CSS Code

CSS Gradient Generator Guide

Features

Use Cases

常见问题

相关工具