Question 1

What is a CSS gradient?

Accepted Answer

A CSS gradient is a smooth transition between two or more colors generated entirely by the browser using mathematical functions, without any image files. CSS supports three types: linear-gradient (colors flow in a straight line), radial-gradient (colors radiate from a center point), and conic-gradient (colors rotate around a center point).

Question 2

How does a linear gradient work?

Accepted Answer

A linear gradient is defined by an angle (direction) and a list of color stops. The browser calculates the color at each pixel by interpolating between the stops along the gradient line. The angle 0deg points upward, 90deg points right. The shorthand keywords to bottom, to right, to top-right also work.

Question 3

What is the difference between linear, radial and conic gradients?

Accepted Answer

Linear gradients transition colors along a straight line. Radial gradients expand colors outward from a center ellipse or circle. Conic gradients rotate colors around a center point like a color wheel or pie chart. Each type creates distinct visual effects suitable for different design contexts.

Question 4

Can I use more than two colors in a gradient?

Accepted Answer

Yes, CSS gradients support unlimited color stops. Each stop can have an explicit position (e.g. red 25%, blue 50%, green 75%) or be auto-distributed. Stops at the same position create hard color transitions instead of smooth blends.

Question 5

Are CSS gradients supported in all browsers?

Accepted Answer

Linear and radial gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Conic gradients have full support since 2021 in all major browsers. No vendor prefixes are needed for modern CSS. Internet Explorer 10+ supports linear-gradient with partial syntax.

Question 6

How do I use a gradient as a background in CSS?

Accepted Answer

Use the background or background-image property: `background: linear-gradient(90deg, #ff6b6b, #4ecdc4);`. You can layer multiple gradients with comma separation: `background: linear-gradient(...), radial-gradient(...);`. Gradients can also be used in border-image, mask, and other CSS image contexts.

Question 7

What is the performance impact of CSS gradients?

Accepted Answer

CSS gradients are GPU-accelerated in all modern browsers, making them extremely efficient. They are recalculated on resize, but this is negligible. Gradients are always preferable to gradient images (PNG/JPG) because they scale perfectly at any resolution, reduce HTTP requests, and are resolution-independent.

CSS Gradient
Generator

How CSS gradients work — linear, radial and conic

Frequently asked questions

Explore Our Network