Menu

Beta
Sign in
Ocean Aurora SVG background, gradient

Ocean Aurora SVG background, gradient

Turquoise and cobalt waves create a luminous ocean-like field, leaving the right side clear for text. Use it on a travel website header or a presentation title page.

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/ykWKSESmufBy/amnt.svg" alt="Ocean 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="1024" y2="480" gradientUnits="userSpaceOnUse"><stop stop-color="#06364c"/><stop offset=".43" stop-color="#071e3c"/><stop offset="1" stop-color="#040e25"/></linearGradient><radialGradient id="k0_2" cx="0" cy="0" r="1" gradientTransform="translate(210 254) rotate(24) scale(510 396)" gradientUnits="userSpaceOnUse"><stop stop-color="#086b91" stop-opacity=".5"/><stop offset=".55" stop-color="#10448a" stop-opacity=".2"/><stop offset="1" stop-color="#07213d" stop-opacity="0"/></radialGradient><filter id="k0_3" x="-45%" y="-50%" width="190%" height="200%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="30"/></filter><linearGradient id="k0_4" x1="80" y1="82" x2="354" y2="386" gradientUnits="userSpaceOnUse"><stop stop-color="#066080" stop-opacity=".1"/><stop offset=".36" stop-color="#078bab" stop-opacity=".46"/><stop offset=".68" stop-color="#28d9dd" stop-opacity=".85"/><stop offset=".84" stop-color="#81f1eb" stop-opacity=".9"/><stop offset="1" stop-color="#138cad" stop-opacity="0"/></linearGradient><filter id="k0_5" x="-15%" y="-20%" width="130%" height="140%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4"/></filter><linearGradient id="k0_6" x1="234" y1="76" x2="317" y2="416" gradientUnits="userSpaceOnUse"><stop stop-color="#40e2dc" stop-opacity="0"/><stop offset=".36" stop-color="#78f5ef" stop-opacity=".7"/><stop offset=".65" stop-color="#2fe0eb" stop-opacity=".9"/><stop offset="1" stop-color="#136ba7" stop-opacity="0"/></linearGradient><linearGradient id="k0_7" x1="46" y1="489" x2="404" y2="230" gradientUnits="userSpaceOnUse"><stop stop-color="#123594" stop-opacity="0"/><stop offset=".38" stop-color="#194dc8" stop-opacity=".5"/><stop offset=".67" stop-color="#347ee9" stop-opacity=".82"/><stop offset=".84" stop-color="#4dc5ed" stop-opacity=".6"/><stop offset="1" stop-color="#107597" stop-opacity="0"/></linearGradient><linearGradient id="k0_8" x1="105" y1="486" x2="303" y2="309" gradientUnits="userSpaceOnUse"><stop stop-color="#0b245b" stop-opacity="0"/><stop offset=".53" stop-color="#1751c3" stop-opacity=".42"/><stop offset=".85" stop-color="#268acb" stop-opacity=".52"/><stop offset="1" stop-color="#42d0dd" stop-opacity=".08"/></linearGradient><linearGradient id="k0_9" x1="366" y1="288" x2="820" y2="288" gradientUnits="userSpaceOnUse"><stop stop-color="#040e25" stop-opacity="0"/><stop offset=".65" stop-color="#040e25" stop-opacity=".75"/><stop offset="1" stop-color="#040e25"/></linearGradient></defs><g clip-path="url(#k0_0)"><path fill="url(#k0_1)" d="M0 0H1024V576H0Z"/><path fill="url(#k0_2)" d="M0 0H1024V576H0Z"/><path d="M122-89C358 47 174 160 203 248S398 350 600 239" fill="none" stroke="#16cbd9" stroke-opacity=".23" stroke-width="95" filter="url(#k0_3)"/><path d="M-99 491C105 536 492 354 423 250S120 162-54 244" fill="none" stroke="#2464ef" stroke-opacity=".22" stroke-width="110" filter="url(#k0_3)"/><path d="M-78-48H160C335 60 201 133 200 227C199 327 375 355 624 225L649 297C403 449 186 360 144 289C80 181 256 81-78-48Z" fill="url(#k0_4)" filter="url(#k0_5)"/><path d="M153-38C345 74 193 150 212 239C235 338 422 328 579 250C416 348 225 364 189 255C156 155 314 75 153-38Z" fill="url(#k0_6)" filter="url(#k0_5)"/><path d="M-50 231C112 135 334 153 408 220C504 307 331 414 166 468C83 495 3 507-81 487L-91 570C131 589 433 431 459 309C493 152 174 103-50 185Z" fill="url(#k0_7)" filter="url(#k0_5)"/><path d="M-53 517C107 527 345 433 415 332C451 281 428 238 375 216C447 237 471 286 438 341C368 459 93 573-53 556Z" fill="url(#k0_8)"/><path d="M-37 378C94 441 306 417 412 319C327 440 105 481-37 418Z" fill="url(#k0_8)" opacity=".6" filter="url(#k0_5)"/><path fill="url(#k0_9)" d="M0 0H1024V576H0Z"/></g></g></g></svg>
CSS background-image
.ocean-aurora {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ykWKSESmufBy/amnt.svg");
  background-size: contain;
}
React
import OceanAuroraSvg from "./ocean-aurora.jsx"; // from the React tab above

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

Tags

auroraoceanturquoisecobaltbackground

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Ocean aurora background — turquoise and cobalt luminous waves; quiet right half. 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