Fondo con gradiente sensible

Tengo el siguiente código: (Violín)

body {
  background-color: red;
}
#grad1 {
  height: 100px;
  width: 100%;
  background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%);
}

<div id="grad1"></div>

Básicamente quiero que el ancho responda y que la forma del gradiente se mantenga a pesar de que el ancho cambia.

Lo que he intentado:

Establezca el ancho al 100%, esto no funciona porque es un div vacío

Eso es todo, no tengo otras ideas para ser honesto. Agradecería si alguien pudiera ayudar.

Para esto lo estoy usando: (las imágenes son solo un ejemplo para mostrar lo que sucede / lo que quiero decir)

Pero si tengo un dispositivo más grande, esto sucede: