Adding a outer gradient to a modal is showing a small gap in left bottom

Question

I want to add a gradient like the Image Attached to a Modal.

The Issue i am facing is There is a small gap in bottom left marked that should not be there and should have a curve like

i am adding this css for outer gradient effect-

.dialog {
    --s: 1px;
    --x: -10px;
    --y: 10px;
    border-radius: 12px;
}

.dialog::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--s));
    transform: translate3d(var(--x), var(--y), -1px);
    clip-path: polygon(-100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)));
    border-radius: 12px;
    background: linear-gradient(90deg, #74469b 0%, #05aaaa 100%);

}

Answer 1

The gradient you added is on a polygon that is L shaped. Instead, I opted for a same size div, slightly offset to the left and bottom.

.dialog {
  width: 200px;
  position: relative;
  background: red;
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  text-align: center;
}

.dialog::before {
  content: "";
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(90deg, #74469b 0%, #05aaaa 100%);
  width: 100%;
  height: 100%;
  left: -20px;
  top: 20px;
  z-index: -1;
}

<div class="dialog">
  <h1>i am a dialog</h1>
</div>