Question 1

What CSS gradient types does this tool support?

Accepted Answer

This tool supports all three standard CSS gradient types: linear-gradient (color transitions along a straight line), radial-gradient (color transitions radiating from a center point in an ellipse or circle shape), and conic-gradient (color transitions around a center point, like a pie chart). Repeating variants (repeating-linear-gradient, etc.) are parsed by extracting the core gradient.

Question 2

What are CSS color stops and how do they work?

Accepted Answer

Color stops define the colors and their positions in a gradient. Each stop has a color value and an optional position (percentage or length). If positions are omitted, browsers distribute colors evenly. You can use multiple stops: linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%) creates a sharp transition (no blending) at 30%.

Question 3

How do I specify gradient directions in CSS?

Accepted Answer

For linear gradients: use keyword directions (to right, to bottom, to top left), degree angles (45deg, 135deg), or turn values (0.25turn). For radial gradients: specify shape (circle or ellipse), size (closest-side, farthest-corner), and position (at center, at top right). For conic gradients: use 'from Ndeg' to set the starting angle.

Question 4

How can I make a gradient with hard color stops (no blending)?

Accepted Answer

To create hard stops, place two color stops at the same position: linear-gradient(to right, #ff0000 50%, #0000ff 50%). This creates a sharp edge with no gradient blending. Alternatively use adjacent stops: linear-gradient(red 0 50%, blue 0 100%) — the second stop's position 0 means 'same as previous stop'.

Question 5

How do I use CSS gradients for backgrounds, borders, and text?

Accepted Answer

Gradients are values in CSS, not values. Use them for background: background: linear-gradient(...); or background-image. For gradient borders, use background-clip with two backgrounds: background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box; border: 2px solid transparent. For gradient text: background: linear-gradient(...); -webkit-background-clip: text; color: transparent.

CSS Gradient Analyzer

Frequently Asked Questions

Comments & Feedback