div left bottom corner gradient with styled-component

Question

Im trying to achieve this left bottom gradient gradient_

I tried to clip the element that have the linear-gradient, but I loose the blur effect.

const Container = styled.div`
  width: 680px;
  height: 266px;
  background: #13132b;
  border-radius: 8px;
  padding: 11px 24px 40px 20px;
  margin: 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  outline: solid 2px orange;
  position: relative;
  box-sizing: border-box;

  &::before {
    outline: solid 2px red;
    box-sizing: inherit;
    border-radius: inherit;
    width: inherit;
    height: inherit;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    position: absolute;
    background: linear-gradient(119.57deg, #21db99 36.22%, #daf33e 80.95%);
    opacity: 0.6;
    filter: blur(200px);
    clip-path: inset(0 round 8px);

    content: "";
  }
`;

Answer 1

div {
      height: 200px;
      width: 200px;
      background-color: red;
      background-image:
        radial-gradient(
          circle at bottom left,
          yellow,
          #f06d06 50%
        );
    }

you can test it here

AND This code can also help you

div {
  height: 200px;
  width: 200px;
  background-color: #fff;
 
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px, rgba(50, 50, 50, 0.8) 0%, rgba(80, 80, 80, 0.2) );
    
}

OR get help from this Tool: https://angrytools.com/gradient/