Library Backgrounds

Atmospheric Fog

Layered soft orbs creating fog depth.

Layered soft orbs creating fog depth.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Atmosphere
Style: Cinematic
Tech stack: CSS
Animation: Parallax
Difficulty: Beginner
License: Personal
Access: Free
Views: 585

Parallax
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Parallax fog orbs background, pointer-reactive, blurred layers.

Code

<!-- HTML -->
<div class="g" id="g"></div>

/* CSS */
.g{width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at var(--x,50%) var(--y,40%),#000 20%,transparent 70%);transition:mask-position .1s}

// JS
var g=document.getElementById("g");window.addEventListener("pointermove",function(e){var r=g.getBoundingClientRect();g.style.setProperty("--x",((e.clientX-r.left)/r.width*100)+"%");g.style.setProperty("--y",((e.clientY-r.top)/r.height*100)+"%")});