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

Html – how to add gradient-border with radius and transparent background

I just need a div who has some height and width and contain some text inside it and it should be transparent background and also border with gradient and border-radius

i have tried many ways but nothing is wroking there is some ways,with the help of them we can add border-gradient and border radius but we can’t add transparent background

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
     body {
    background-color: rgb(24, 22, 22);
  }
  .my_box {
    width: 400px;
    height: 400px;
    color: white;
    margin: 24px auto;
  }

  .my_box {
    /* broder-radius should be same on both my_box and my_box::after */
    border-radius: 20px;
    /* box background */
    background: linear-gradient(
      140.61deg,
      rgba(255, 255, 255, 0.08) -1.87%,
      rgba(255, 255, 255, 0) 105.41%
    );
    backdrop-filter: blur(11px);
    /* background: transparent; */
    position: relative;
    /* below padding is equivalent to line no.46 which is padding-5px */
    padding: 5px;
  }

  .my_box::after {
    content: "";
    position: absolute;
    /* broder-radius should be same on both my_box and my_box::after */
    border-radius: 20px;
    /* this paadding is the width of border */
    padding: 5px;
    /* broder-color */
    background: linear-gradient(
      119.1deg,
      rgba(233, 8, 8, 0.5) -2.34%,
      rgba(10, 78, 141, 0) 34.91%,
      rgba(59, 32, 102, 0) 64.9%,
      rgba(55, 119, 216, 0.5) 102.19%
    );
    /*  we are using below property instead of left-0 top-0 bottom-0 right-0 */
    inset: 0;
    /* height: 100%;
       width: 100%;
       top: 0;
       left: 0; */
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    /* the mask-composite property specifies that the XOR blending mode should be used to combine the mask image and the element's background. */
    -webkit-mask-composite: xor;
    pointer-events: none;
  }
<div>
  <div style="text-align: center" class="my_box">
    <h2 style="margin-top: 24px; color: aqua">
      You can change the background of this box to transparent
    </h2>
  </div>
</div>

  2. 0

    try this …

    <style>
 .container {
     width: 100px;
     height: 100px;
     border-radius: 10px;
     padding: 5px;
     background: linear-gradient(#fff 0 0) padding-box, linear-gradient(45deg, red, blue) border-box;
     border: 5px solid transparent;
 }

    <div class="container">
 HELLO
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search