CSS border gradient generator for linear, radial and conic borders. Use multiple layers. Plenty of examples and a random border gradient generator.

Rem Alw

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This tool generates a gradient border for block elements without the need for extra or pseudo-elements. It utilizes multiple background properties, including radial and linear gradients, along with the `calc` function for accurate sizing. The generated gradient borders are well-supported across most browsers, with the exception of `conic-gradient` in IE. For a transparent background, a pseudo-element and `-webkit-mask` can be used but fall outside the tool's scope.

Free CSS Border Gradient Generator

Why do you use a linear-gradient for the solid background color?

Why can't I set the radius or width to units other than px?

What is the performance of these borders like?