Certified SVG-based program
Some browsers my experience issues when rendering SVG noise. Firefox will create weird diagonal lines on linear gradients that will become more apparent as noise frequency is increased. Chrome may have trouble rendering freqencies above 10, which you shouldnt be really using in the first place so this shouldnt be a problem. Keep this in mind if you add this effect to your own site, these issues are relatively unnoticeable, however. If you are having trouble rendering your gradient, trying zooming in.
Put your desired value into each box and the gradient should generate, code for your generated gradient will be avalable at the bottom of the page. The produced image uses SVG noise and so can be scaled to any size without loosing resolution.
Colour 1 should be the darkest for the best result, Colour 2 should be slightly lighter and Colour 3 the lightest. The first colour option is required, the next two are optional and can be turned off. If left on they will allow you to further customise your gradient but may restrict you in its usage.
This tool is intended to create code for rendering a gradient element or background in HTML, if you want to use your gradient as an image you will have to take a screenshot of it.
Certified SVG-based program
<section>
<div class="isolate">
<div id="gradient" class="noise"></div>
<div id="overlay" class="overlay"></div>
</div>
</section>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
section {
position: relative;
width: 400px;
height: 400px;
box-shadow: -30px 30px 60px -12px
}
.noise {
height: 100%;
filter: contrast(270%) brightness(1000%);
background: linear-gradient(303deg, rgb(72,72,98),
rgba(92,42,158,.4)), url("data:image/svg+xml,%3Csvg
viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter
id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75'
numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect
width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
background-size: contain;
}
@media {
.noise {
filter: contrast(270%) brightness(1000%);
}
}
.isolate {
position: relative;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background: rgb(233,206,255);
}