How does film lighting work?
A film set is dark until someone decides where every shadow falls. Drag a key light round a face, turn a hard lamp soft, dial tungsten into daylight, flip a scene from sitcom to noir, and light a dinner table where every face must still read.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- Key, fill and back. The key light makes the shadows, a softer fill lifts them, and a back light outlines the hair and shoulders. The lighting ratio compares the lit side of a face with the shadow side: 2:1 (one stop) feels open and bright, 8:1 (three stops) moody. Rembrandt, loop, butterfly and split are key positions.
- Hard and soft. Softness depends on how big the source looks from the actor. A bare Fresnel gives crisp shadows; a softbox, a diffusion frame or a bounce card makes the source big and the edges soft. For a small lamp, double the distance and you get a quarter of the light: the inverse square law.
- The colour of light. Studio tungsten is 3,200 K and film daylight 5,600 K. The camera's white balance decides which one looks white. Orange CTO and blue CTB gels shift a lamp by a fixed number of mireds; full CTB passes only about a third of the light.
- Mood and genre. High key (low ratio, bright background) says comedy. Low key (one hard light, deep shadow) says noir. Light from below feels wrong, a low golden-hour sun feels warm, and film moonlight is often daylight shot two stops dark and balanced blue. Good lighting is motivated by a window, a lamp in shot or the moon.
- Shaping and control. Barn doors, flags, nets and negative fill take light away where it is not wanted. The gaffer runs the lamps and power, the key grip the stands and flags. A 1 kW tungsten Fresnel gives 1,436 lux at 5 m on a 30° beam; an LED Fresnel sold as its match draws 150 to 220 W.
- Light a scene. Three diners, four lamps, one mood. Each face must read, bright enough to see the eyes but not glowing, and the ratio and the camera's histogram must suit the mood the director wants.
| Term | Meaning |
|---|---|
| Key light | The main light on a subject, which sets the direction of the shadows. |
| Fill light | A softer, dimmer light that lifts the shadows made by the key. |
| Back light | A light behind the subject that draws a bright rim on hair and shoulders. |
| Lighting ratio | The lit side of a face compared with the shadow side, such as 2:1 or 8:1. |
| Hard and soft light | Small sources make sharp-edged shadows; large sources make gentle ones. |
| Inverse square law | Double the distance from a small lamp and the light falls to a quarter. |
| Colour temperature | The colour of a light in kelvin: tungsten 3,200 K, daylight 5,600 K. |
| White balance | The camera setting that decides which colour of light records as white. |
| Motivated light | Light that seems to come from a real source in the scene, like a window or lamp. |
Nearly two centuries from a glowing lump of lime on a London stage to LED walls that light actors with whole worlds.
- 1893 · A studio that chases the sun (Thomas Edison's laboratory; W. K. L. Dickson, West Orange, New Jersey)
- 1915 · Rembrandt lighting gets its name (Cecil B. DeMille, Los Angeles, California)
- 1927 · Sound brings quiet tungsten lamps (Peter Mole and Elmer Richardson, Hollywood, California)
- 1935 · Technicolor needs a flood of light (Technicolor; Ray Rennahan, Hollywood, California)
- 1941 · Citizen Kane's deep focus (Gregg Toland; Orson Welles, Hollywood, California)
- 1956 · Bounce light from a cloth sky (Subrata Mitra; Satyajit Ray, Calcutta (Kolkata))
- 1969 · HMI: daylight in a bulb (Osram, Germany)
- 1975 · Lit by candles alone (John Alcott; Stanley Kubrick, England and Ireland)
The full story, with 27 moments, charts, people and 49 sources: glassbox.how/e/lightingclear/history. The data lives in history.json.
Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.
| File | What | Size |
|---|---|---|
glassbox/reel.mp4 |
Reel / Short, with captions and soundtrack | 1080×1920 |
glassbox/video.mp4 |
YouTube video, with captions and soundtrack | 1920×1080 |
glassbox/slide-1…10.jpg |
Instagram carousel | 1080×1350 |
glassbox/thumb.jpg |
YouTube thumbnail | 1280×720 |
glassbox/cover.jpg |
Share card and repo social preview | 1200×630 |
glassbox/history-reel.mp4 |
“History in 10 moments” Reel / Short | 1080×1920 |
glassbox/history-slide-*.jpg |
History carousel | 1080×1350 |
glassbox/post.json |
Post copy and schedule used by the publish kit |
This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.
It remembers a few things in your own browser only, and never sends them anywhere:
| Browser storage key | What it holds |
|---|---|
lightingclear.v1 |
Which chapters you have opened, your best quiz scores, and sound on or off. |
Exactly what each one sees is at glassbox.how/privacy.
- Code: MIT. Use it, change it, ship it.
- Explanations, text, images and videos (
glassbox.json,glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/lightingclear”. - Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
- The Glassbox name and logo aren't covered by either licence. See the terms.
Found a mistake? Open an issue. Corrections happen in public.
It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.
python3 -m http.server 8000Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.
Then open http://localhost:8000.
| File | What |
|---|---|
index.html, css/app.css |
The page and its styles |
js/app.js, js/stage.js, js/ui.js, js/kit.js |
The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director |
js/chapters/*.js |
One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes |
js/light.js |
LightingClear's shared parts: chart boards, the dark studio, faceless mannequin bust and diners, lamps with real three.js spotlights (Fresnel, softbox, LED panel), flags and nets, lamp dragging, colour temperature maths, fixture data and the camera-view inset with its histogram |
glassbox.json |
Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how |
reel in each chapter |
The storyboard the Glassbox studio records into short videos |
glassbox/ |
The published video, slides, thumbnail and post copy |
fonts/, vendor/three/ |
Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT) |