Menu

Beta
Sign in
Twilight Aurora SVG background, gradient

Twilight Aurora SVG background, gradient

An orange horizon meets flowing blue and violet light, leaving the centre open for a heading. Use it on a travel blog header or a presentation opening slide.

Free · from Aurora Gradient Backgrounds

Similar SVGs

More from Aurora Gradient Backgrounds

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jPD2UU5vNsbz/amnt.svg" alt="Twilight Aurora" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 576" width="1024" height="576"><g id="layer-1" data-name="Group 1"><g><defs><clipPath id="k0_0"><path d="M0 0h1024v576H0z"/></clipPath><linearGradient id="k0_1" x1="0" y1="0" x2="0" y2="576" gradientUnits="userSpaceOnUse"><stop stop-color="#080e2b"/><stop offset=".45" stop-color="#171936"/><stop offset=".72" stop-color="#39304a"/><stop offset=".9" stop-color="#925053"/><stop offset="1" stop-color="#df854f"/></linearGradient><filter id="k0_2" x="-35%" y="-35%" width="170%" height="170%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="26"/></filter><linearGradient id="k0_3" x1="10" y1="80" x2="377" y2="292" gradientUnits="userSpaceOnUse"><stop stop-color="#313880" stop-opacity=".1"/><stop offset=".42" stop-color="#6856c4" stop-opacity=".48"/><stop offset=".76" stop-color="#a88be9" stop-opacity=".7"/><stop offset="1" stop-color="#49417f" stop-opacity="0"/></linearGradient><filter id="k0_4" x="-15%" y="-15%" width="130%" height="130%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4"/></filter><linearGradient id="k0_5" x1="213" y1="-35" x2="265" y2="405" gradientUnits="userSpaceOnUse"><stop stop-color="#b9a4f8" stop-opacity=".08"/><stop offset=".43" stop-color="#bc9bff" stop-opacity=".66"/><stop offset=".78" stop-color="#8c74cb" stop-opacity=".14"/><stop offset="1" stop-color="#786297" stop-opacity="0"/></linearGradient><linearGradient id="k0_6" x1="1040" y1="95" x2="696" y2="383" gradientUnits="userSpaceOnUse"><stop stop-color="#183867" stop-opacity=".12"/><stop offset=".4" stop-color="#347bc1" stop-opacity=".48"/><stop offset=".7" stop-color="#82c1e8" stop-opacity=".66"/><stop offset="1" stop-color="#304576" stop-opacity="0"/></linearGradient><linearGradient id="k0_7" x1="853" y1="-40" x2="883" y2="421" gradientUnits="userSpaceOnUse"><stop stop-color="#7fb9ff" stop-opacity=".08"/><stop offset=".48" stop-color="#8ecaff" stop-opacity=".62"/><stop offset="1" stop-color="#5272a9" stop-opacity="0"/></linearGradient><radialGradient id="k0_8"><stop stop-color="#10172f" stop-opacity=".66"/><stop offset=".6" stop-color="#141a33" stop-opacity=".35"/><stop offset="1" stop-color="#141a33" stop-opacity="0"/></radialGradient><radialGradient id="k0_9" cx=".52" cy="1.12" r=".72" gradientTransform="translate(0 .55) scale(1 .5)"><stop stop-color="#ffbd75" stop-opacity=".75"/><stop offset=".45" stop-color="#f08b60" stop-opacity=".22"/><stop offset="1" stop-color="#cd685c" stop-opacity="0"/></radialGradient></defs><g clip-path="url(#k0_0)"><path fill="url(#k0_1)" d="M0 0h1024v576H0z"/><path d="M125-92C407 75 159 208 151 303S264 419 336 434" fill="none" stroke="#825ecf" stroke-width="106" opacity=".2" filter="url(#k0_2)"/><path d="M987-67C698 127 885 217 871 301S784 401 730 428" fill="none" stroke="#397fcb" stroke-width="106" opacity=".2" filter="url(#k0_2)"/><path d="M-92-50H165C359 43 329 123 240 213C152 302 180 381 348 443C129 408 77 334 125 240C178 137 274 91-92-50Z" fill="url(#k0_3)" filter="url(#k0_4)"/><path d="M135-37C329 37 320 111 228 203C149 282 162 356 275 414C136 365 133 283 209 199C293 107 315 49 135-37Z" fill="url(#k0_5)" filter="url(#k0_4)"/><path d="M-71 126C63 155 47 235 19 313C-5 381 66 435 215 465C57 457-51 412-71 352Z" fill="url(#k0_3)" opacity=".48"/><path d="M1094-55H951C782 33 727 125 818 220C902 308 863 372 705 441C912 409 982 334 921 240C861 147 835 102 1094-55Z" fill="url(#k0_6)" filter="url(#k0_4)"/><path d="M961-36C809 43 776 122 851 212C924 299 891 367 782 412C910 380 948 304 874 211C802 122 830 45 961-36Z" fill="url(#k0_7)" filter="url(#k0_4)"/><path d="M1095 155C986 194 975 248 1002 309C1030 374 967 418 864 453C1009 434 1086 391 1095 330Z" fill="url(#k0_6)" opacity=".5"/><ellipse cx="512" cy="258" rx="310" ry="238" fill="url(#k0_8)"/><path fill="url(#k0_9)" d="M0 0h1024v576H0z"/></g></g></g></svg>
CSS background-image
.twilight-aurora {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jPD2UU5vNsbz/amnt.svg");
  background-size: contain;
}
React
import TwilightAuroraSvg from "./twilight-aurora.jsx"; // from the React tab above

<TwilightAuroraSvg width={48} height={48} />

Tags

auroratwilightorangebluebackground

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Twilight aurora background — orange horizon with blue and violet light; quiet centre. Premium abstract aurora website background. Broad luminous flowing ribbons and layered smooth colour gradients with elegant depth. Restrained composition, generous quiet space for a headline, full bleed opaque colour to all edges. No objects, stars, text, frames, logos or mockups. Crisp scalable vector shapes, smooth transitions, refined visual balance. Each design must follow its named palette and composition. as part of the pack Aurora Gradient Backgrounds. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings