Design Atlas
한국어
◧ Film & photo

Golden hour

골든 아워

The short window around sunrise and sunset when the sun sits low on the horizon, casting soft, warm orange-gold light.

Also known as: 매직 아워Magic hourLow sun light
···
html
<div class="sky" id="sky">
  <div class="sun" id="sun"></div>
  <svg class="hills" viewBox="0 0 300 90" preserveAspectRatio="none">
    <polygon points="0,90 0,55 60,30 130,58 190,26 260,50 300,38 300,90" fill="#3a4a3f"/>
  </svg>
  <div class="obj o1"></div>
  <div class="obj o2"></div>
  <div class="shadow s1" id="sh1"></div>
  <div class="shadow s2" id="sh2"></div>
</div>
css
.sky{position:absolute;inset:0;overflow:hidden;background:#8fc7e8}
.sun{position:absolute;width:11%;aspect-ratio:1;border-radius:50%;left:50%;top:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 40px 12px rgba(255,200,110,.55)}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:34%}
.obj{position:absolute;bottom:34%;width:5%;background:#26241f;border-radius:2px 2px 0 0}
.o1{left:24%;height:16%}
.o2{left:64%;height:22%}
.shadow{position:absolute;bottom:calc(34% - 1px);height:3px;background:rgba(20,15,10,.35);
  border-radius:2px;transform-origin:left center}
.s1{left:26%}
.s2{left:66%}
js
const sun=document.getElementById('sun');
const sky=document.getElementById('sky');
const sh1=document.getElementById('sh1');
const sh2=document.getElementById('sh2');
function mix(a,b,t){
  return Math.round(a[0]+(b[0]-a[0])*t)+','+Math.round(a[1]+(b[1]-a[1])*t)+','+Math.round(a[2]+(b[2]-a[2])*t);
}
function frame(t){
  const p=(Math.sin(t*0.00035-Math.PI/2)+1)/2;
  const sunX=18+p*64, sunY=66-p*54;
  sun.style.left=sunX+'%';
  sun.style.top=sunY+'%';
  const warm=1-p;
  const skyTop=mix([120,199,232],[255,140,70],warm*0.85);
  const skyBottom=mix([223,240,224],[255,205,140],warm*0.85);
  sky.style.background='linear-gradient(180deg, rgb('+skyTop+'), rgb('+skyBottom+') 75%)';
  sun.style.background='radial-gradient(circle at 35% 35%, #fff6d6, '+(warm>0.5?'#ff9a3f':'#ffe27a')+')';
  const len=10+warm*34, angle=-(10+warm*8);
  sh1.style.width=len+'%';
  sh1.style.transform='rotate('+angle+'deg)';
  sh2.style.width=(len*1.3)+'%';
  sh2.style.transform='rotate('+angle+'deg)';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

When the sun sits low, its light passes through more atmosphere and the blue wavelengths scatter out, leaving mostly red and orange (Rayleigh scattering). That gives this window a low color temperature — roughly 2000–3500K — and long, soft-edged shadows.

Midday light falls almost straight down, so shadows are short and contrast is harsh; golden-hour light comes in low from the side, which brings out texture and softens contrast. That's why it's the most sought-after window for portraits and landscapes alike.

The demo compresses that transition — as the sun's height drops toward the horizon, the sky color and the shadow length/angle shift together. In practice this window runs from roughly an hour before sunset through just after it (and the mirror image around sunrise).

When to use

Plan outdoor portrait or product shoots around this window — or, for a hero background, drop the color temperature and stretch the shadows to borrow the same warm mood.