Question 182947 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    I’m not sure if it meets your expectations, but it was the best I could achieve. Anyway, there are 3 CSS rules needed. One for the button itself, one for the button gradient and then one for the button border. For gradient and border the pseudo elements ::before and ::after can be used. In the html part the div container as well as the span are only for demonstation purposes and are not really needed.

    The button body

    There is actually not much to say about this. First, give the button the basic design. The background property is only for fine tuning and if you want to blur everything behind the button you can use backdrop-filter. The only important thing is to set position: absolute or position: relative, so that it works perfectly with the pseudo elements.

    div.button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 120px;
    height: 50px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

    The button gradient

    I think most of it is probably self-explanatory. As already mentioned, the pseudo element ::after is used for the gradient effect. Again, it’s important to set position:absolute to make things work. The opacity property is optional and only there for fine tuning. To avoid overlaying the button text, a negative z-index must also be used.

    div.button::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 50px;
    border-radius: 13px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(164, 164, 164, 0.9));
    opacity: 0.85;
    z-index: -1;
}

    The button border

    Obviously the hardest part. For the border, the pseudo element ::before is used at last. As before, it’s important to set position:absolute and again, the opacity property is optional and only there for fine tuning. So how is this border made? By using the background-image property to which a mix of linear-gradient and radial-gradient (for the corners) is applied. But, to simplify things, I used CSS variables for the finally snippet. I first became aware of this technique through an article by Chris Coyier.

    div.button::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 50px;
    background-image:
        radial-gradient(circle at 100% 100%, transparent 13px - 2px), rgba(255, 255, 255, 0.25) 11px, rgba(255, 255, 255, 0.25) 13px, transparent 13px), 
        linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05)), 
        radial-gradient(circle at 0% 100%, transparent 11px, rgba(255, 255, 255, 0.05) 11px, rgba(255, 255, 255, 0.05) 13px, transparent 13px), 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), 
        radial-gradient(circle at 0% 0%, transparent 11px, rgba(255, 255, 255, 0.05) 11px, rgba(255, 255, 255, 0.05) 13px, transparent 13px), 
        linear-gradient(to left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.25)), 
        radial-gradient(circle at 100% 0%, transparent 11px, rgba(255, 255, 255, 0.25) 11px, rgba(255, 255, 255, 0.25) 13px, transparent 13px), 
        linear-gradient(to top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25));
    background-size: 13px 13px, calc(100% - 26px) 2px, 13px 13px, 2px calc(100% - 26px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
    opacity: 0.5;
}

    A working snippet

    Enough written, so here is a working example. As already said, for the sake of simplicity I used mostly CSS variables for the button design. Finally, I hope this helps and you might be able to do something with it.

    body {
    margin: 20px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

span {
    color: #773f66;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, #eb7e9b, #e078af, #b971a5, #7c5173);
}

/* BUTTON RELATED CSS */

/* button vaiables */

.button {
    /* button width */
    --btn-width: 120px;
    /* button height */
    --btn-height: 50px;
    /* button blurring */
    --btn-blur: 1.5px;    
    /* button background (fine tuning - optional) */
    --btn-background: rgba(255, 255, 255, 0.04);
    /* button gradient start color */
    --btn-gd-start-col: rgba(255, 255, 255, 0.1);
    /* button gradient end color */
    --btn-gd-end-col: rgba(164, 164, 164, 0.9);
    /* button gradient additional opacity (optional) */
    --btn-gd-opacity: 0.85;
    /* button border color 1*/
    --btn-bd-col-1: rgba(255, 255, 255, 0.25);
    /* button border color 2*/
    --btn-bd-col-2: rgba(255, 255, 255, 0.05);
    /* button border additional opacity (optional) */
    --btn-bd-opacity: 0.5;
    /* button border radius */
    --btn-bd-radius: 13px;
}

/* button body */

div.button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: var(--btn-width);
    height: var(--btn-height);
    border-radius: var(--btn-bd-radius);
    background: var(--btn-background);
    backdrop-filter: blur(var(--btn-blur));
    -webkit-backdrop-filter: blur(var(--btn-blur));
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 10px;
    color: white;
}

/* button gradient */

div.button::after {
    content: '';
    position: absolute;
    width: var(--btn-width);
    height: var(--btn-height);
    border-radius: var(--btn-bd-radius);
    background: linear-gradient(to right, var(--btn-gd-start-col), var(--btn-gd-end-col));
    opacity: var(--btn-gd-opacity);
    z-index: -1;
}

/* button border */

div.button::before {
    content: '';
    position: absolute;
    width: var(--btn-width);
    height: var(--btn-height);
    background-image:
        radial-gradient(circle at 100% 100%, transparent calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-1) calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-1) var(--btn-bd-radius), transparent var(--btn-bd-radius)), 
        linear-gradient(to right, var(--btn-bd-col-1), var(--btn-bd-col-2)), 
        radial-gradient(circle at 0% 100%, transparent calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-2) calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-2) var(--btn-bd-radius), transparent var(--btn-bd-radius)), 
        linear-gradient(to bottom, var(--btn-bd-col-2), var(--btn-bd-col-2)), 
        radial-gradient(circle at 0% 0%, transparent calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-2) calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-2) var(--btn-bd-radius), transparent var(--btn-bd-radius)), 
        linear-gradient(to left, var(--btn-bd-col-2), var(--btn-bd-col-1)), 
        radial-gradient(circle at 100% 0%, transparent calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-1) calc(var(--btn-bd-radius) - 2px), var(--btn-bd-col-1) var(--btn-bd-radius), transparent var(--btn-bd-radius)), 
        linear-gradient(to top, var(--btn-bd-col-1), var(--btn-bd-col-1));
    background-size: var(--btn-bd-radius) var(--btn-bd-radius), calc(100% - (var(--btn-bd-radius) * 2)) 2px, var(--btn-bd-radius) var(--btn-bd-radius), 2px calc(100% - (var(--btn-bd-radius) * 2));
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
    opacity: var(--btn-bd-opacity);
}
    <div class="container">
    <div class="button">Sign Up</div>
    <span>xxxxxxxxxxxxxxxxxxxx</span>
</div>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search