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

Deepak

I am looking to achieve design similar to shown below:

enter image description here

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.

Temani Afif

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to create button with gradient border and transparent background

CSS linear-gradient with semi-transparent borders

How to create a transparent border using CSS in a subclass?

Hexagon with semi transparent background and border

CSS button transition linear-gradient background into transparent background

How to create a polka dot texture with linear gradient as background in css?

Gradient colour with Linear Gradient Border in text using css not working

Background border radius with linear gradient

CSS Background Image Linear Gradient showing unwanted border in Chrome

How to create a button with border and transparent background android

Is it possible based on CSS to create a circle with gradient border and transparent inner?

How to create a CSS loader with gradient border and transparency?

Button with transparent background and rotating gradient border

CSS - How to change border height in linear-gradient?

How to make a button a linear gradient color border in tailwind css?

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

How to create linear gradient using SCSS variables?

Border shifting linear-gradient background

Transparent border to hidden background with CSS

How to reposition an image with a linear gradient using css?

Apply linear transparent gradient to a portion of image with transparent background in python

How to remove Greyish background on background-image with transparent in linear gradient on Safari

background screen splits when using linear gradient css html

How to create transparent background color in html & css

How to create Semi transparent Grid using c# code

How to create a right triangle which has linear-gradient background?

How to create a diagonal gradient background on CSS?

How to create a diagonal "gradient" background with CSS

How to add a fully transparent to semi-transparent gradient in Android