How to create semi transparent linear gradient background and border using css?

Question

I am looking to achieve design similar to shown below:

It has a rounded border (ie., using border-radius), which is has gradient colour from left to right, which is as well semi transparent.

It also has background, which too has semi transparent background gradient.

I tried below ways:

Creating semi-transparent borders

CSS linear-gradient with semi-transparent borders

Button gradient borders with transparent background

JS Fiddle with code that I have tried so far:

https://jsfiddle.net/xobcr0h7/4/

body {
  background:black;
  --border: 5px;
}

div.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  
  /*try 1*/
  
  /*background-color: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));*/
    
    /*try 1*/
    
    /*try 2*/
   
   /*border: var(--border) solid transparent;
    background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 1)), linear-gradient(to bottom, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2)) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
    background-clip: content-box, border-box;
    margin: 10px auto;
    mix-blend-mode: multiply;*/
    
    /*try 2*/
    
    /*try 3*/
     background: linear-gradient(white, white) padding-box,
        linear-gradient(to right, red, blue) border-box;
    border: 4px solid transparent;
    /*try 3*/
    
}

<div class="button">Sign Up</div>

But they all have solid colors or without border radius. I am trying to achieve something that has both with semitransparent background and border.

You can use [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) or try one of the online creation tools for CSS glass effects like [CSS Glassmorphism Generator](https://css.glass/). — Ferris, Jun 05 '23 at 11:23
Yes, backdrop-filter can be used, but here, if you look at the button's background, it fades with white towards right. It's not a single colour. — Deepak, Jun 05 '23 at 11:29

score 2 · Accepted Answer · answered Jun 05 '23 at 20:03

I will use my previous answer to create the gradient border and the remaining should be easy

button {
  --b: 5px;  /* border thickness */
  --r: 20px; /* radius */
  font-size: 25px;
  border: none;
  padding: 10px 20px;
  position: relative;
  background: rgb(255 255 255/50%); /* background color with alpha */
  border-radius: var(--r);
}
button::before {
  content:"";
  position: absolute;
  inset: calc(-1*var(--b));
  padding: var(--b);
  border-radius: calc(var(--b) + var(--r));
  background: linear-gradient(90deg,red,green); /* gradient border */
  opacity: .5; /* alpha for border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  background: linear-gradient(90deg,#000,#ccc);
}

<button>A button</button>

So awesome. The CSS hacker has struck again. I just had to play around with it a bit to even figure out what's going on. This should go straight to the Wiki on how to make a gradient border in 2023. — Ferris, Jun 06 '23 at 12:31
@Ferris I already made a wiki for gradient border with all the possible ways ;) https://stackoverflow.com/a/51496341/8620333 — Temani Afif, Jun 06 '23 at 14:33

tacoshy · Answer 2 · 2023-06-05T11:34:42.790

0

The easiest way is to use a color with an alpha value such as rgba, hsla or hex with 4 or 8 digits. The alpha sets a transparency to a color:

div {
  background-color: rgba(255, 255, 255, 0.1);
  border: 5px solid rgba(255, 255, 255, 0.12);
}


/* for demonstration purpose only */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(315deg, black 40%, pink);
}

div {
  width: 50vw;
  height: 50vh;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2em;
  font-weight: 900;
}

<div>SING UP</div>

edited Jun 05 '23 at 11:34

answered Jun 05 '23 at 11:27

tacoshy

10,642
5
17
34

Thanks tacoshy. But the border doesn't have gradient and semi transparent effect here. – Deepak Jun 05 '23 at 11:32
reduce the alpha until it has the transparency you want – tacoshy Jun 05 '23 at 11:33
Borders can't have gradients... You will have to work hard around that like with SVG's 9-point borders or something – somethinghere Jun 05 '23 at 11:47
@somethinghere the border has no gradient. The gradient comes from the background in the images which will work fine using a border-color with an low alpha value. – tacoshy Jun 05 '23 at 11:48
I love your enthusiasm, but if the OP tells you there's a gradient... – somethinghere Jun 05 '23 at 11:55

score -1 · Answer 3 · answered Jun 05 '23 at 23:46

-1

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <button>SIGN UP</button>
</body>

</html>

CSS:

body {
  background: linear-gradient(to right, purple, darkgrey);
  text-align: center;
}

button {
  font-size: 50px;
  margin-top: 50%;
  padding: 30px 120px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

answered Jun 05 '23 at 23:46

Marko

1
2

Thanks, Marko. But I don't think this solves the problem. It just gives box shadow, which is not intended. – Deepak Jun 06 '23 at 10:48
Please add some explanation to your answer such that others can learn from it – Nico Haase Jun 06 '23 at 12:15

How to create semi transparent linear gradient background and border using css?

3 Answers3