Smoke Gradient Generator

A smoke gradient is a background visual made of layered, semi-transparent volumes that drift across a colour gradient. Each layer represents a soft volume of "smoke" with its own depth, opacity, and motion. The visible image is the composite of all layers blended together, producing a sense of atmospheric depth that flat gradients cannot match.

The aesthetic became popular for cinematic title sequences in the early 2010s and has held steady use ever since. Mystery thrillers (Mindhunter, True Detective), sci-fi (Dune title sequences), luxury brand identity (perfume launches, premium spirits), and high-end product reveals all reach for smoke gradients because they suggest atmosphere and mystery without showing specific imagery yet.

The Gradients.design smoke generator renders 2 to 12 layers in real time. Each layer is a procedural noise field with its own seed, drift velocity, and opacity. The layers composite using standard alpha blending, which is what gives the visual its parallax depth. Export still PNG up to 8K or animated MP4 with seamless looping.

The visual depth in a smoke gradient comes from one specific technique: alpha compositing across multiple layers. When you stack semi-transparent images, the upper layers partially obscure the lower layers, and the partial obscuring is what your brain reads as depth.

Each smoke layer in the studio has three parameters that contribute to the layered effect:

• Opacity. How visible the layer is. Front layers are typically more opaque, back layers more transparent.
• Drift velocity. Speed and direction the layer moves. Front layers should drift faster than back layers to create parallax depth.
• Noise seed. Each layer has its own pseudo-random pattern, so the layers do not look like duplicates of each other.

With six well-tuned layers, the composite reads as genuinely volumetric even though each individual layer is 2D. This is the same technique used in older film visual effects (matte painting plus moving smoke layers) before full volumetric rendering became practical. The result is computationally cheap and visually convincing.

1. Open the smoke editor. Visit the free smoke gradient generator. The canvas opens with a default 6-layer composition drifting slowly.
2. Set layer count. Pick 2 to 12 smoke layers. More layers mean more atmospheric depth but more GPU cost. Six layers is the sweet spot for cinematic use.
3. Tune motion and palette. Slow speed for cinematic feel; faster for energetic motion. Add 2 to 6 colours that blend through the layers with subtle differences between layers.
4. Export. Still PNG up to 8K, or animated MP4 and WebM with seamless loop on Pro plans.

Title sequences in films, streaming series, and high-end advertising are one of the highest-value applications of smoke gradients. The aesthetic signals atmosphere, depth, and intentionality. Recommended workflow:

1. Open the studio in 16:9 landscape format (3840 by 2160 for 4K title work).
2. Pick 6 layers, moderate drift speed, deep palette (navy, near-black, with one accent tone).
3. Adjust opacity so front layers are visibly denser than back layers; the eye should read the gradient as having clear front-back separation.
4. Export MP4 at 30 to 60 seconds. Pro plan gives 1080p; Studio gives 4K.
5. In your video editor, overlay your title typography with slow scale-in animation and slight motion blur.
6. Add a soft vignette to focus the eye centrally if needed.

For thriller and horror, push the palette darker and reduce drift speed. For luxury and premium reveals, lighten the palette slightly and use warmer accent tones.

Premium consumer goods (especially perfume, spirits, jewelry, and high-end skincare) rely heavily on smoke or fog gradients as the backdrop for product photography mockups. The aesthetic signals luxury and intimacy without distracting from the product.

Recommended workflow:

1. Pick a palette matching the product packaging. For perfume: pale rose, gold, deep burgundy. For spirits: amber, gold, deep brown. For skincare: pale aqua, ivory, soft pink.
2. Use 4 to 6 layers with very slow drift (around 0.3x default). The smoke should feel almost still.
3. Export PNG at 4K minimum (8K for print campaigns). Alpha-channel PNG for compositing flexibility.
4. In Figma or Photoshop, place the product (with transparent background) centred or slightly off-centre on the smoke gradient.
5. Add a soft drop shadow under the product. The shadow should be subtle, matching the smokes ambient direction.
6. For final polish, add a near-transparent overlay (vignette) to focus the eye on the product.

This workflow produces marketing visuals indistinguishable from professional product photography for early-stage brand work. Production photography costs $5,000 to $50,000 per shoot; this workflow costs nothing and works for D2C launches, e-commerce hero images, and social media campaigns.

• Cinematic title cards. Films, streaming series, premium ad campaigns.
• Music video backplates. Especially for moody electronic, ambient, R and B, and atmospheric pop.
• Premium product marketing. Perfume, spirits, jewelry, luxury skincare, premium kitchenware.
• Sci-fi book covers. Especially atmospheric sci-fi and slow-burn thriller.
• Mystery and luxury brand identities. When the brand wants to be alluring without showing its hand.
• App splash screens for premium consumer apps. Dating apps, premium social, exclusive membership platforms.
• Editorial design for fashion and lifestyle magazines. Cover treatments and section dividers.
• Hotel and hospitality marketing. Boutique hotels and luxury resorts use smoke gradients in their visual identity systems.

1. Too many layers. 12 layers rarely look better than 6. Above 8 layers, you mostly add GPU cost without visual benefit.
2. Layer opacity too uniform. If every layer is at 50 percent opacity, the depth disappears. Vary opacity: front layers around 70 percent, back layers around 20 percent.
3. Drift speed too fast. Fast-drifting smoke reads as windy or chaotic. For cinematic use, stick to slow speeds (around 0.3 to 0.5x default).
4. Pure-black background. The smoke layers need a slightly tinted base colour to read as atmospheric rather than empty. Use deep navy or near-black with a subtle warm or cool tint.
5. All layers drifting in the same direction. Vary drift direction by 30 to 60 degrees between layers. Uniform drift reads as a single moving sheet rather than as volumetric smoke.
6. Ignoring contrast under text overlays. If body copy or titles sit on top of the smoke, test contrast at the densest and thinnest regions. The variance can break WCAG contrast even when the average reads fine.