web-cloud-designer

Web Cloud Designer

Expert in creating realistic, performant cloud effects for web applications using SVG filters, CSS animations, and layering techniques. Specializes in atmospheric visuals that enhance user experience without sacrificing performance.

When to Use This Skill

Use for:

Realistic cloud backgrounds and skyboxes
Weather-themed UI elements and transitions
Parallax cloud scenes with depth
Animated atmospheric effects
Stylized/cartoon cloud designs
Hero section backgrounds with sky themes
Loading states with cloud animations
Game-style cloud layers

Do NOT use for:

3D volumetric cloud rendering -> use WebGL/Three.js
Photo manipulation of real clouds -> use image editing
Weather data integration -> use weather API skills
Simple gradient skies without cloud shapes
Video backgrounds with clouds

Core Techniques Reference

SVG Filter Pipeline

The fundamental cloud effect uses this filter chain:

Source -> feTurbulence -> feDisplacementMap -> feGaussianBlur -> feDiffuseLighting -> Composite

feTurbulence - The Foundation

Generates Perlin noise that forms cloud shapes.

<feTurbulence type="fractalNoise"  baseFrequency="0.01"  numOctaves="4"  seed="42"  result="noise" />

Parameter Range Effect

baseFrequency

0.005-0.02 Scale of cloud shapes. 0.005 = giant cumulus, 0.02 = small wisps

numOctaves

3-5 Detail layers. 3 = smooth, 5 = detailed. Above 5 = CPU waste

seed

0-999999 Shape variation. Change this, NOT baseFrequency for variety

type

fractalNoise ALWAYS use fractalNoise for clouds (turbulence = fire/water)

feDisplacementMap - Shape Distortion

Creates organic, billowing cloud shapes from the noise.

<feDisplacementMap in="SourceGraphic" in2="noise" scale="80"  xChannelSelector="R" yChannelSelector="G" />

Scale Value Effect

20-50 Subtle, wispy cirrus

50-100 Balanced cumulus

100-170 Dramatic, billowing storm clouds

feGaussianBlur - Edge Softening

CRITICAL: Apply BEFORE displacement for performance (per CSS-Tricks).

<feGaussianBlur stdDeviation="3"  result="blurred" />

feDiffuseLighting - Volumetric Depth

Adds 3D-like shading to flat noise.

<feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light"

<feDistantLight azimuth="45"  elevation="55"  /> </feDiffuseLighting>

Cloud Type Recipes

Cumulus (Puffy, Happy Clouds)

Cirrus (Wispy, High Altitude)

Key: Use anisotropic baseFrequency (two values) for stretched, directional wisps.

Stratus (Flat Layers)

Cumulonimbus (Storm Clouds)

Stylized/Cartoon Clouds

Layering Strategy

Create depth with multiple cloud layers:

.clouds-back { filter: url(#cloud-soft); opacity: 0.3; animation: drift 120s linear infinite; transform: scale(1.5); }

.clouds-mid { filter: url(#cloud-medium); opacity: 0.6; animation: drift 80s linear infinite; transform: scale(1); }

.clouds-front { filter: url(#cloud-sharp); opacity: 0.9; animation: drift 50s linear infinite; transform: scale(0.8); }

Layer Parameter Guide

Layer Opacity Speed Scale blur stdDeviation

Back (distant) 0.2-0.4 90-120s 1.3-1.5x 5-8

Mid 0.5-0.7 50-80s 1.0x 3-5

Front (close) 0.8-1.0 30-50s 0.7-0.9x 1-3

Animation Techniques

CSS Keyframes (Recommended - Best Performance)

@keyframes drift { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@keyframes morph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }

.cloud { animation: drift 60s linear infinite, morph 15s ease-in-out infinite; }

SVG Animate (Use Sparingly - CPU Intensive)

WARNING: Animating filter properties recalculates the entire filter. Use only for hero effects, not background loops.

GSAP (Best Control)

gsap.to("#cloud-filter feTurbulence", { attr: { baseFrequency: 0.015 }, duration: 10, ease: "sine.inOut", yoyo: true, repeat: -1 });

3D Parallax (Billboard Technique)

.cloud-layer { transform-style: preserve-3d; perspective: 1000px; }

.cloud { transform: translateZ(-100px) scale(1.1); /* Further clouds appear smaller, move slower on scroll */ }

Complete Implementation Templates

Template 1: Simple Sky Background

<!DOCTYPE html> <html> <head> <style> .sky { position: relative; width: 100%; height: 100vh; background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%); overflow: hidden; }

.cloud {
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: url(#cloudFilter);
  animation: float linear infinite;
}

.cloud-1 { width: 300px; height: 150px; top: 10%; animation-duration: 80s; }
.cloud-2 { width: 400px; height: 180px; top: 30%; animation-duration: 100s; animation-delay: -30s; }
.cloud-3 { width: 250px; height: 120px; top: 50%; animation-duration: 70s; animation-delay: -50s; }

@keyframes float {
  from { transform: translateX(-120%); }
  to { transform: translateX(120vw); }
}

</style> </head> <body> <svg style="position:absolute;width:0;height:0"> <defs> <filter id="cloudFilter" x="-50%" y="-50%" width="200%" height="200%"> <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="4" seed="5"/> <feGaussianBlur stdDeviation="4"/> <feDisplacementMap in="SourceGraphic" scale="50"/> </filter> </defs> </svg>

Template 2: Layered Parallax Clouds

.cloud-layer { position: absolute; width: 200%; height: 100%; background-repeat: repeat-x; }

.layer-back { opacity: 0.3; filter: url(#cloudBack) blur(2px); animation: scroll 120s linear infinite; }

.layer-mid { opacity: 0.5; filter: url(#cloudMid); animation: scroll 80s linear infinite; }

.layer-front { opacity: 0.8; filter: url(#cloudFront); animation: scroll 45s linear infinite; }

@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } </style>

Template 3: React Component

import React, { useMemo } from 'react';

interface CloudProps { type?: 'cumulus' | 'cirrus' | 'stratus' | 'storm'; seed?: number; className?: string; }

const CLOUD_CONFIGS = { cumulus: { baseFrequency: '0.008', numOctaves: 4, scale: 60, blur: 4 }, cirrus: { baseFrequency: '0.02 0.005', numOctaves: 3, scale: 25, blur: 2 }, stratus: { baseFrequency: '0.015 0.003', numOctaves: 3, scale: 30, blur: 6 }, storm: { baseFrequency: '0.006', numOctaves: 5, scale: 150, blur: 3 }, };

export const Cloud: React.FC<CloudProps> = ({ type = 'cumulus', seed = Math.floor(Math.random() * 1000), className }) => { const filterId = useMemo(() => cloud-${type}-${seed}, [type, seed]); const config = CLOUD_CONFIGS[type];

return ( <> <svg style={{ position: 'absolute', width: 0, height: 0 }}> <defs> <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%"> <feTurbulence type="fractalNoise" baseFrequency={config.baseFrequency} numOctaves={config.numOctaves} seed={seed} result="noise" /> <feGaussianBlur in="noise" stdDeviation={config.blur} result="blur"/> <feDisplacementMap in="SourceGraphic" in2="blur" scale={config.scale}/> </filter> </defs> </svg> <div className={className} style={{ filter: url(#${filterId}) }} /> </> ); };

// Usage: // <Cloud type="cumulus" seed={42} className="cloud-shape" />

Template 4: CSS-Only Box-Shadow Clouds

For simpler, more performant clouds without SVG filters:

.cloud-simple { width: 200px; height: 60px; background: white; border-radius: 100px; position: relative; box-shadow: /* Main body shadows for volume / inset -10px -10px 30px rgba(0,0,0,0.05), inset 10px 10px 30px rgba(255,255,255,0.8), / Outer glow */ 0 10px 40px rgba(0,0,0,0.1); }

.cloud-simple::before, .cloud-simple::after { content: ''; position: absolute; background: white; border-radius: 50%; }

.cloud-simple::before { width: 100px; height: 100px; top: -50px; left: 30px; }

.cloud-simple::after { width: 70px; height: 70px; top: -30px; left: 100px; }

Performance Optimization

Critical Rules

numOctaves 5 or fewer - Above 5 provides diminishing visual returns with exponential CPU cost
Blur BEFORE displacement - 40% more efficient than blur after
Avoid animating filter properties - Use CSS transforms instead
Use seed for variation - Free performance vs. changing baseFrequency
will-change: transform
Only on animated elements, remove when static
Batch filter definitions - One <defs> block, reference by ID

Performance Tiers

Tier Technique FPS Target Use Case

Ultra CSS box-shadow only 60fps Mobile, low-end

High SVG filter, no animation 60fps Static backgrounds

Medium SVG filter + CSS transform animation 45-60fps Subtle movement

Low SVG filter + <animate>

30fps Hero sections only

Mobile Considerations

@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }

@media (max-width: 768px) { .cloud-layer { /* Reduce to 2 layers on mobile */ }

.cloud { filter: url(#cloudSimple); /* Fewer octaves */ } }

Performance Detection

// Detect if device can handle filter animations const canHandleFilters = () => { const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl'); if (!gl) return false;

const debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : '';

// Reduce effects on integrated graphics return !renderer.includes('Intel'); };

Framework Integration

Next.js / React

// components/CloudBackground.tsx 'use client';

import { useEffect, useState } from 'react';

export function CloudBackground() { const [reducedMotion, setReducedMotion] = useState(false);

useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setReducedMotion(mq.matches); mq.addEventListener('change', (e) => setReducedMotion(e.matches)); }, []);

return ( <div className="cloud-container"> {/* SVG defs in portal to document head /} {/ Cloud layers */} </div> ); }

const clouds = computed(() => Array.from({ length: 5 }, (_, i) => ({ id: i, style: { animationDuration: ${60 + i * 20}s, animationDelay: ${-i * 15}s, top: ${10 + i * 15}%, } })) ); </script>

Tailwind CSS

// tailwind.config.js module.exports = { theme: { extend: { animation: { 'cloud-drift': 'drift 80s linear infinite', 'cloud-morph': 'morph 15s ease-in-out infinite', }, keyframes: { drift: { from: { transform: 'translateX(-100%)' }, to: { transform: 'translateX(100vw)' }, }, morph: { '0%, 100%': { borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' }, '50%': { borderRadius: '30% 60% 70% 40% / 50% 60% 30% 60%' }, }, }, }, }, };

Debugging Tips

Visualize Filter Steps

<filter id="debug"> <feTurbulence result="step1"/> <feGaussianBlur in="step1" result="step2"/> <feDisplacementMap in="SourceGraphic" in2="step2" result="step3"/>

<feTile in="step1" result="tile1"/> <feOffset in="tile1" dx="0" dy="0"/> </filter>

Common Issues

Problem Cause Solution

Clouds cut off Filter region too small Add x="-50%" y="-50%" width="200%" height="200%"

Jagged edges Missing blur Add feGaussianBlur before displacement

No variation Same seed Use different seed values

Performance issues Too many octaves Reduce numOctaves to 3-4

Animation stuttering Animating filter attrs Use CSS transform animations instead

Reference Sources

CSS-Tricks: "Drawing Realistic Clouds with SVG and CSS"
LogRocket: "Animated Cloud Generator with SVG CSS"
Codrops: "SVG Filter Effects with feTurbulence"
Click to Release: "CSS 3D Clouds" (billboard technique)
Nephele Cloud Generator tool
MDN: SVG Filter Primitives documentation

Clouds are nature's way of reminding us that even the sky has texture.

web-cloud-designer

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

video-processing-editing

cv-creator

mobile-ux-optimizer

personal-finance-coach