Dappled Sunlight & Leaf Shadows

Colours in this gradient

• #fafaf9
• #e7e5e4
• #78716c
• #1c1917

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="dapple-stage">
  <div class="dapple-shadow s-1"></div>
  <div class="dapple-shadow s-2"></div>
  <div class="dapple-caustic"></div>
  <div class="dapple-content">
    <div class="dapple-badge">Organic Ambience</div>
    <h1>Dappled Sunlight</h1>
    <p>Gentle kinetic foliage shadows and natural illumination caustics for mindful editorial spaces.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a dappled sunlight and leaf shadow light theme background in pure HTML and CSS.

Requirements:
- Warm light cream backdrop (#fafaf9).
- Organic moving shadows simulating canopy tree branches with gentle sway animations.
- Subtle golden caustic light wash overlay.
- Editorial typography with dark stone contrast.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer soft blurred dark shapes with filter: blur(40px) and low opacity.

2. 2

   Animate position, rotation and scale with slow alternating keyframes to simulate wind swaying.

3. 3

   Add a warm radial sunlight wash in the background.

Customisation tips

• Keep opacity low (0.08 to 0.15) to maintain subtle natural realism without overpowering content.

More backgrounds