Design Atlas
한국어
◧ Film & photo

High-key lighting

하이키 조명

Multiple soft lights filling the scene evenly, leaving almost no visible shadow — bright and low in contrast.

Also known as: 로우 콘트라스트 조명Flat lighting
···
html
<div class="stage">
  <div class="glow g1"></div><div class="glow g2"></div><div class="glow g3"></div>
  <div class="sphere"></div>
  <div class="gauge"><i></i></div>
</div>
css
.stage{position:absolute;inset:0;background:#f3f1ea;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55;animation:pulse 5s ease-in-out infinite}
.g1{width:46%;aspect-ratio:1;left:-6%;top:-10%;background:#fff}
.g2{width:40%;aspect-ratio:1;right:-6%;top:-6%;background:#ffffee;animation-delay:-1.6s}
.g3{width:44%;aspect-ratio:1;left:28%;bottom:-16%;background:#fff;animation-delay:-3.2s}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}
.sphere{position:absolute;left:50%;top:48%;width:44vmin;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 36%,#ffffff 0,#f0ecdf 48%,#d9d2c0 82%)}
.gauge{position:absolute;right:6%;top:8%;width:26%;height:6px;border-radius:4px;
  background:linear-gradient(90deg,#050506,#cfcfd8)}
.gauge i{position:absolute;top:-3px;width:2px;height:12px;background:#3ab27a;left:12%}

Where low-key pulls the fill to widen contrast, high-key does the opposite — fill lights nearly as strong as the key, often three or four soft sources at once, so no direction casts a noticeable shadow.

The lighting ratio approaches 1:1, and the frame reads bright and even throughout. Sitcoms, beauty and cosmetics ads, and news studios favor this style because shadows are exactly what would highlight a blemish or a wrinkle.

In CSS, keep the background bright and layer several faint radial-gradient highlights from different directions onto the subject. Go completely shadowless, though, and form disappears too — leave one very faint shading pass so the shape still reads.

When to use

Use it for a bright, approachable ad or tutorial, or beauty product shots. Reach for low-key instead when the goal is tension or mystery.