How to create a gradient border using CSS? 5 ways to share

How to create a gradient border using CSS? The following article will share with you 5 ways to implement gradient borders with CSS. I hope it will be helpful to you!

Setting a gradient color for the border is a very common effect. There are many ideas to achieve this effect. Today I list the methods I know for your reference. (Learning video sharing: css video tutorial, web front-end)

1. Use border-image

CSS provided The border-image attribute is used to draw complex patterns for the border. Similar to background-image, we can display image and linear- gradient.

Setting the gradient color border through border-image is the simplest method, which only requires two lines of code:

CSS:

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

Codepen demo

https://codepen.io/mudontire/pen/xxLxeZw

Although this method is simple, it has an obvious flaw and is not supported. Set border-radius. Next, we will introduce several methods to support border-radius.

2. Use background-image

It should be easiest to use background-image to draw a gradient background and cover the middle with a solid color One method that comes to mind is: use two boxes to overlap, set a gradient background and padding for the lower box, and set a solid color background for the upper box.

HTML:

<div class="border-box border-bg">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
    necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
    voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  width: 300px;
  height: 200px;
  margin: 25px 0;
}

.border-bg {
  padding: 4px;
  background: linear-gradient(to right, #8f41e9, #578aef);
  border-radius: 16px;
}

.content {
  height: 100%;
  background: #222;
  border-radius: 13px; /*trciky part*/
}

Codepen demo

https:/ /codepen.io/mudontire/pen/ZEJEZoY

The advantage of this method is that it is easy to understand and has good compatibility. The disadvantage is that setting the content border-radius will be tricky. and inaccurate.

3. Two-layer elements, background-image, background-clip

In order to solve border-radius## in method 2 # For inaccuracies, you can use a separate element as the gradient background on the bottom layer, and set a transparent border and solid color background on the upper layer (you need to set background-clip: padding-box to avoid covering the border of the lower element) , set the same border-radius on the upper and lower layers.

HTML:

<div class="border-box">
  <div class=&#39;border-bg&#39;></div>
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/ 
  background: linear-gradient(to right, #8f41e9, #578aef);
}

Codepen demo

https:/ /codepen.io/mudontire/pen/yLoLrxL

div.border-bg To simplify the HTML structure.

HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/
  background: linear-gradient(to right, #8F41E9, #578AEF);
}

Codepen demo

https:/ /codepen.io/mudontire/pen/JjyjVwN

background-clip, background-origin, background- image

background-clip and background-origin# respectively. ##, background-image Each of these three attributes sets two sets of values. The first set is used to set the monochrome background in the border, and the second set is used to set the gradient color on the border.

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}