CSS gradient boxshadow with transparent background-CodePudding

I want to make div with gradient boxshadow. And I have found how to do with :before and blur effect... But I want to make div with transparent background. For example

div{
Height:200px;
Width:200px;
Background-color: rgba(255,255,255,0.3)

}
div::before{
Contact:'';
Z-index: -1;
Position: absolute;
Width: 100%;
Height: 100%;
background: linear-gradient(#e66465, #9198e5);
Filter: blur(10px)
}

Is it some way to make the before element invisible in place where is the main element? Thank you for answers :)

CodePudding user response：

You can try clip-path:

.box {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 20px;
}

.box::before {
  --d: -20px; /* bigger than the value of the blur with negative sign*/
  content: '';
  z-index: -1;
  position: absolute;
  inset:0;
  background: linear-gradient(#e66465, #9198e5);
  filter: blur(10px);
  clip-path: polygon(var(--d) var(--d),calc(100% - var(--d)) var(--d),calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),var(--d) var(--d),0 0,0 100%,100% 100%,100% 0,0 0);
}

<div ></div>

CodePudding user response：

try this

Position: abosolute; and Contact:""; to position: absolute; content: ''

and add this to your div

    div{
    position:relative; 
}

CodePudding user response：

Check this...

  div {
        height: 200px;
        width: 200px;
        background-color: rgba(255, 255, 255, 0.3);
        position: relative;
      }
      div::before {
        content: "";
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(#e66465, #9198e5);
        filter: blur(10px);
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <div></div>
  </body>
</html>