0

I would like to create border with linear gradient border, rounded corners and transparent background.

I have:

.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red
}
<div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>

Problem is that linear-gradient not accept transparent color value. Is there any hack? The button must have transparent background.

https://jsfiddle.net/c3ogjrzh/

Sunny
  • 708
  • 1
  • 4
  • 21
jonlal
  • 53
  • 4

1 Answers1

-1

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

Your transparency will start from darkblue (0 0 153) to darkorchid (153 50 204)

linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) 


.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}
 
.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}
 
.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red
}
<div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>
SelVazi
  • 10,028
  • 2
  • 13
  • 29