How to implement:
With tailwind installed in your project (tutorial), implement these tailwind classes in your parent div where it will reflect the background.
Code:
export default function Home() {
return (
<>
<section className="relative flex flex-col items-center h-screen bg-[#fff] overflow-hidden clash-grotesk">
<svg className="absolute opacity-30" width="2321" height="1350" viewBox="0 0 1681 978" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1503_1700" style={{maskType: `alpha`}} maskUnits="userSpaceOnUse" x="0" y="0" width="1681" height="978">
<path d="M0.5 0L1680.5 0V768L0.5 978V0Z" fill="#1C1740"></path>
</mask>
<g mask="url(#mask0_1503_1700)">
{/*
<path d="M0.5 0L1680.5 0V768L0.5 978V0Z" fill="#0E0D17"></path>
*/}
<g filter="url(#filter0_f_1503_1700)">
<path d="M2156.05 -606.341C2156.05 -606.341 2075.29 25.8064 1731.15 201.252C1394.62 372.826 1152.78 -75.6031 819.09 101.068C485.521 277.673 743.525 703.193 419.536 895.252C70.69 1102.05 -575.501 838.969 -575.501 838.969" stroke="url(#paint0_angular_1503_1700)" stroke-width="325.413" stroke-linecap="round"></path>
</g>
<g filter="url(#filter1_f_1503_1700)">
<path d="M2290.69 543.196C2290.69 543.196 1863.83 968.178 1555.06 879.367C1253.1 792.517 1378.97 298.802 1075.64 217.624C772.419 136.477 669.857 623.3 363.039 559.967C32.6814 491.774 -191.789 -121.981 -191.789 -121.981" stroke="url(#paint1_angular_1503_1700)" stroke-width="325.413" stroke-linecap="round"></path>
</g>
<g style={{mixBlendMode: `overlay`}} filter="url(#filter2_f_1503_1700)">
<path d="M1743.11 788.778C1743.11 788.778 1440.79 1023.51 1207.37 957.41C979.098 892.767 1054.54 604.218 825.457 542.894C596.459 481.592 538.127 767.036 307.109 716.187C58.3658 661.436 -131.751 286.41 -131.751 286.41" stroke="url(#paint2_angular_1503_1700)" stroke-width="325.413" stroke-linecap="round"></path>
</g>
<g filter="url(#filter3_f_1503_1700)">
<path d="M398.746 1256.29C398.746 1256.29 374.987 904.578 532.709 802.487C686.949 702.649 856.582 947.979 1008.85 845.354C1161.05 742.766 985.518 510.366 1131.24 399.342C1288.15 279.799 1645.24 416.706 1645.24 416.706" stroke="url(#paint3_angular_1503_1700)" stroke-width="325.413" stroke-linecap="round"></path>
</g>
<g style={{mixBlendMode: `soft-light`}} opacity="0.5">
<path d="M0.5 422L1919.5 182.5V-57L0.5 182.5V422Z" fill="url(#paint4_linear_1503_1700)"></path>
</g>
<g style={{mixBlendMode: `soft-light`}} opacity="0.5">
<path d="M1630.5 218L-364.5 467.5L-364.5 717L1630.5 467.5L1630.5 218Z" fill="url(#paint5_linear_1503_1700)"></path>
</g>
</g>
<defs>
<filter id="filter0_f_1503_1700" x="-870.685" y="-896.931" width="3321.89" height="2162.05" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="15.0825" result="effect1_foregroundBlur_1503_1700"></feGaussianBlur>
</filter>
<filter id="filter1_f_1503_1700" x="-483.427" y="-416.166" width="3065.71" height="1601.89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="15.0825" result="effect1_foregroundBlur_1503_1700"></feGaussianBlur>
</filter>
<filter id="filter2_f_1503_1700" x="-423.376" y="-7.76707" width="2458.08" height="1271.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="15.0825" result="effect1_foregroundBlur_1503_1700"></feGaussianBlur>
</filter>
<filter id="filter3_f_1503_1700" x="102.081" y="60.0571" width="1838.6" height="1486.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="15.0825" result="effect1_foregroundBlur_1503_1700"></feGaussianBlur>
</filter>
<radialGradient id="paint0_angular_1503_1700" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(918.431 340.19) rotate(-119.789) scale(257.962 1544.32)">
<stop stop-color="#FF7BDA"></stop>
<stop offset="0.354167" stop-color="#BFDEF8"></stop>
<stop offset="0.604167" stop-color="#5840FA"></stop>
<stop offset="0.806766" stop-color="#BFDEF8"></stop>
<stop offset="1" stop-color="#5840FA"></stop>
</radialGradient>
<radialGradient id="paint1_angular_1503_1700" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(991.002 461.861) rotate(-76.9047) scale(257.962 1284.31)">
<stop stop-color="#FF7BDA"></stop>
<stop offset="0.354167" stop-color="#BFDEF8"></stop>
<stop offset="0.604167" stop-color="#5840FA"></stop>
<stop offset="0.806766" stop-color="#BFDEF8"></stop>
<stop offset="1" stop-color="#5840FA"></stop>
</radialGradient>
<radialGradient id="paint2_angular_1503_1700" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(771.464 684.678) rotate(-76.9047) scale(151.011 969.963)">
<stop stop-color="#FF7BDA"></stop>
<stop offset="0.354167" stop-color="#BFDEF8"></stop>
<stop offset="0.604167" stop-color="#5840FA"></stop>
<stop offset="0.806766" stop-color="#BFDEF8"></stop>
<stop offset="1" stop-color="#5840FA"></stop>
</radialGradient>
<radialGradient id="paint3_angular_1503_1700" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(933.516 714.121) rotate(54.1329) scale(151.011 751.026)">
<stop stop-color="#FF7BDA"></stop>
<stop offset="0.354167" stop-color="#BFDEF8"></stop>
<stop offset="0.604167" stop-color="#5840FA"></stop>
<stop offset="0.806766" stop-color="#BFDEF8"></stop>
<stop offset="1" stop-color="#5840FA"></stop>
</radialGradient>
<linearGradient id="paint4_linear_1503_1700" x1="1933.78" y1="34.2379" x2="37.7558" y2="320.803" gradientUnits="userSpaceOnUse">
<stop stop-color="white"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="paint5_linear_1503_1700" x1="-379.344" y1="621.953" x2="1591.95" y2="324.626" gradientUnits="userSpaceOnUse">
<stop stop-color="white"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</linearGradient>
</defs>
</svg>
{your page / component}
</section>
</>
);
}
View background:
Responsive: Mobile and desktop:
Note
If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.