Question 1

How do I create a CSS gradient?

Accepted Answer

Use the CSS background-image property with a gradient function. For a simple two-color linear gradient write: background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);. You can add more color stops, adjust the angle, or switch to radial-gradient() or conic-gradient() for different shapes.

Question 2

What is the difference between linear-gradient and radial-gradient?

Accepted Answer

linear-gradient() transitions colors along a straight line at a specified angle (default top to bottom). radial-gradient() radiates colors outward from a central point in an ellipse or circle shape. Use linear gradients for directional backgrounds and radial gradients for spotlight or glow effects.

Question 3

How do I add multiple color stops to a CSS gradient?

Accepted Answer

List additional colors inside the gradient function separated by commas, optionally with percentage positions: linear-gradient(to right, red 0%, yellow 50%, green 100%);. Without explicit positions, stops are distributed evenly. You can use any valid CSS color value including hex, RGB, HSL, or named colors.

Question 4

How do I set the angle of a linear gradient in CSS?

Accepted Answer

Pass a degree value as the first argument: linear-gradient(45deg, #color1, #color2). 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom, and 270deg goes right to left. You can also use keywords like 'to right', 'to bottom left', etc.

Question 5

What is a conic gradient in CSS?

Accepted Answer

A conic gradient (conic-gradient()) transitions colors around a center point rather than from it, creating a pie-chart or color-wheel effect. The syntax is conic-gradient(from 0deg, red, yellow, green, blue, red). It is supported in all modern browsers and is useful for charts, loading spinners, and color wheels.

CSS Gradient Generator

Related Tools