CSS Gradient Generator: Frequently Asked Questions

Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge) without any prefix. Conic gradients are supported in Chrome 69+, Firefox 83+, and Safari 12.1+ — covering over 95% of users as of 2024. The -webkit- prefix is no longer needed.

Not directly with border-color, but you can simulate gradient borders using border-image: linear-gradient(...) 1; or by using a pseudo-element with the gradient as background, padding on the parent, and background-clip: content-box on the child.

Use rgba() or hsla() colour values with an alpha of 0 for the transparent end: linear-gradient(to bottom, rgba(99,102,241,1) 0%, rgba(99,102,241,0) 100%). This fades from solid colour to transparent. The gradient generator supports the native colour picker which includes alpha control.

There is no difference — CSS gradients are image values. linear-gradient() is used as a value for background-image or the background shorthand property. You cannot use it directly for color or border-color.

CSS transitions cannot interpolate between gradient values directly. A common workaround is to animate background-position on a larger gradient (creating a moving gradient effect), or to use CSS custom properties that control colour stops and transition those.

Use repeating-linear-gradient() or repeating-radial-gradient(). These tile the gradient pattern. Example: repeating-linear-gradient(45deg, #6366F1 0px, #6366F1 10px, transparent 10px, transparent 20px) creates diagonal blue stripes.