Mask repeating svg background pattern with linear gradient in css-CodePudding

I want to mask a repeating svg background with a linear gradient like this:

These are linear gradient and repeating svg in css:

.hexgrad {
    background-image: url("data:image/svg xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(1.5) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z'  stroke-width='1' stroke='hsla(27, 100%, 50%, 0.15)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(#a)'/></svg>"),
    linear-gradient(0deg, #F8F3F0 0%, rgba(251,146,60,0.5) 50%, #F8F3F0 100%);
}

I wish to know what's the best approach for solving this problem. I just want to have the gradient on the paths of svg background. I have searched a lot but it just made me more confused.

Thanks in advance

CodePudding user response：

Use mask for this task. Added to a pseudo element to avoid masking the main content:

.hexgrad {
  height: 500px;
  position: relative;
  background: #404040;
}
.hexgrad:before {
  content:"";
  position: absolute;
  inset:0;
  background-image: url("data:image/svg xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(1.5) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z'  stroke-width='1' stroke='hsla(27, 100%, 50%, 0.15)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(#a)'/></svg>");
  -webkit-mask: linear-gradient(#0000,#000,#0000);
}

<div ></div>

CodePudding user response：

You just need to set the opacity of colors in linear-gradient property. Like this: background-image: linear-gradient(0deg, #f8f3f073 0%, rgb(251 146 60 / 4%) 50%, #f8f3f085 100%), url("data:image/svg xml,");