Question 1

How do I create a CSS gradient?

Accepted Answer

Use background: linear-gradient(angle, color1, color2). Angle in degrees or keywords: to top, to right, to bottom, to left. Radial: radial-gradient(circle, color1, color2). Conic: conic-gradient(from angle, color1, color2). Multiple colors: add more values separated by commas. Use HEX, RGB, or named colors.

Question 2

What is the difference between linear and radial gradients?

Accepted Answer

Linear gradient: colors flow along straight line at specified angle. Radial gradient: colors spread outward from center point in circular pattern. Linear for directional backgrounds. Radial for spotlight effects, buttons, circular elements. Both support multiple colors and color stops.

Question 3

How do I add multiple colors to a gradient?

Accepted Answer

Add more color values: linear-gradient(90deg, red, yellow, green, blue). Specify color stops: linear-gradient(90deg, red 0%, yellow 50%, green 100%). Stop percentages control color transition positions. Without stops, colors evenly distribute. Stops create controlled color bands.

Question 4

How do I create a transparent gradient?

Accepted Answer

Use rgba() or hex with opacity: rgba(255,0,0,0.5) or #ff000080. Linear gradient with transparency: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1)). Create fade effects, overlays. Transparency useful for text overlays, image overlays, glassmorphism. Combine with background-blend-mode.

Question 5

What is a conic gradient?

Accepted Answer

Conic gradient: colors rotate around center point like pie chart. Syntax: conic-gradient(from angle, color1, color2). Create color wheels, pie charts, progress indicators. Starts from top by default. Use from keyword to set starting angle. Colors sweep clockwise around center.

CSS Gradient Generator

Preview

Gradient Type

Colors

Generated CSS

Presets

Gradient Types