CSS Border Gradient Generator

This tool will let you generate a gradient border that can be applied to block elements without creating any extra elements or pseudo-elements.

Border Settings

Background Color

Border Width

Border Radius

Padding

Inset

Random Border Gradient Generator

Color Pallet

Gradients

Layer Blend Mode

Gradient Settings For Shadow 1

Color

Stops

Gradient Type

Linear Radial Conic

Shape

Circle Ellipse

Center

Repeating Gradient Pattern

This will only have an effect if there aren't stops at both 0% and 100%.

Angle

Background Settings For Layer 1

Repeat Background Horizontally Repeat Background Vertically

This will only have an effect if the gradient size is less than 100%.

Position

Size

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet magna volutpat, rhoncus lectus quis, dictum quam. Mauris tempor odio enim, lacinia viverra odio scelerisque a. Vivamus posuere enim quam, vitae faucibus purus vehicula ac. Nulla finibus laoreet magna, eget venenatis lorem convallis eu. Donec consequat dapibus mauris, quis lacinia dolor hendrerit id. Maecenas euismod interdum lobortis. Praesent placerat libero sed leo tempor, sit amet elementum lorem tempor. Proin feugiat leo vitae eros lacinia, id aliquam urna pretium.

Background

Code

Sharable Link

Examples

FAQ

Can I use gradients in all browsers?

Since this just uses multiple backgrounds to create the border, support is very good. The only exception is using the conic-gradient background, which isn't supported by IE. It also uses calc to get some of the sizing right, which is almost universally supported.

What is this tool actually generating?

It just sets the background of the element to the gradient, then covers the middle bit up. If the border-radius is greater than the border-width then we also need to make the inner corners curved. This is achieved using a radial-gradient in each corner.

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

Because if we use a solid color, we can't set the background size or position. It would cover the whole gradient, instead of just the middle part.

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

Because we need to pre-calculate the inner background size and corners, we need to stick to pixels which will appear the same on all websites. You might be able to calculate values for other units on your website, but that is beyond the scope of this tool.

Why can't I have a transparent middle

This tool covers the middle bit of the gradient to leave just the border. If you need a transparent background, you could probably achieve something by applying the base gradient to a pseudo-element, and using -webkit-mask to only show the borders. This tool was designed to not create any extra elements though.

What is the performance of these borders like?

The browser will have to generate the gradient for the whole element, and then cover the middle bit up. This might be a little slow for large elements on slower devices, but it probably won't be noticeable for most situations. If you're worried about it, you can easily generate a lighthouse report in Chrome to analyze your site.