Gradient SVG
Purple Aura
A smooth purple-blue aura SVG gradient designed for modern dashboards, bento layouts, and futuristic interfaces. Unlike traditional gradient packs exported as PNG or JPEG, this SVG gradient stays perfectly sharp at any size with zero pixelation or blurry edges. Because it’s vector-based, you can scale it infinitely while keeping soft, clean glow transitions that look premium on both light and dark UIs. Perfect for: Dashboard glow effects Bento grid backgrounds Hero sections Cards and widgets Ambient UI lighting Modern SaaS interfaces Most downloadable gradients lose quality when resized or layered as glow effects. This SVG keeps the glow smooth, vibrant, and crisp — giving your interface a more polished and high-end feel.
Tech stack
ReactTailwind CSS
SVG
<svg width="1920" height="1120" viewBox="0 0 1920 1120" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_0_1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1120">
<rect width="1920" height="1120" fill="#190A05"/>
</mask>
<g mask="url(#mask0_0_1)">
<g filter="url(#filter0_f_0_1)">
<path d="M1016 862C1730.5 862 1890.57 279 1928.5 148.5C1996.07 148.5 2076.92 337.5 2076.92 337.5V1260.5H-209.075C-263.742 1125.67 -307.3 176 -2.50024 176C45.9998 354.5 301.5 862 1016 862Z" fill="#372C7D"/>
</g>
<g filter="url(#filter1_f_0_1)">
<path d="M1032.5 1027.5C1438 1027.5 1830.5 942.5 1953 676.5C2173 462.5 2067 1459.5 2067 1459.5L312.5 1519L-76 1295V1119C-17.5 1106.83 -89.4998 388 -13.9999 676.5C61.5 965 627 1027.5 1032.5 1027.5Z" fill="#F48DFF"/>
</g>
<g filter="url(#filter2_f_0_1)">
<path d="M958 1082C621.501 1082 96 1178 -55.5 814V1294.5H2025.5C2194.67 1262.33 2101 985.5 2025.5 855C1964 1136.5 1294.5 1082 958 1082Z" fill="#FFF5EF"/>
</g>
</g>
<defs>
<filter id="filter0_f_0_1" x="-568.111" y="-171.5" width="2965.04" height="1752" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="160" result="effect1_foregroundBlur_0_1"/>
</filter>
<filter id="filter1_f_0_1" x="-316" y="368.259" width="2648.53" height="1390.74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="120" result="effect1_foregroundBlur_0_1"/>
</filter>
<filter id="filter2_f_0_1" x="-183.5" y="686" width="2431.9" height="736.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="64" result="effect1_foregroundBlur_0_1"/>
</filter>
</defs>
</svg>
1 copies