Tilt-shift — Design Atlas

<div class="city"> <div class="sky"></div> <div class="b b1"></div><div class="b b2"></div><div class="b b3"></div><div class="b b4"></div><div class="b b5"></div> <div class="road"></div> <div class="car c1"></div><div class="car c2"></div> </div> <div class="blurband top"></div> <div class="blurband bottom"></div>

.city{position:absolute;inset:0;overflow:hidden;filter:saturate(1.45) contrast(1.12)} .sky{position:absolute;inset:0;background:linear-gradient(180deg,#bcd8ee,#eef1df 68%)} .b{position:absolute;bottom:24%;background:linear-gradient(180deg,#4a5b78,#2e394f)} .b1{left:4%;width:11%;height:38%} .b2{left:18%;width:14%;height:54%} .b3{left:35%;width:10%;height:30%} .b4{left:58%;width:16%;height:60%} .b5{left:80%;width:13%;height:44%} .road{position:absolute;left:0;right:0;bottom:0;height:24%;background:#3a3a3f} .road::before{content:'';position:absolute;left:0;right:0;top:46%;height:3px; background:repeating-linear-gradient(90deg,#e8d98a 0 14px,transparent 14px 30px)} .car{position:absolute;bottom:8%;width:4%;height:5%;border-radius:2px;animation:drive 3.6s linear infinite} .c1{background:#ff5c5c;animation-delay:0s} .c2{background:#5c8bff;bottom:14%;animation-delay:-1.8s;animation-direction:reverse} @keyframes drive{from{left:-6%}to{left:104%}} .blurband{position:absolute;left:0;right:0;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .blurband.top{top:0;height:30%} .blurband.bottom{bottom:0;height:34%}

A real tilt-shift lens physically tilts its optical plane relative to the camera body, so the plane of focus itself isn't parallel to the frame anymore. The in-focus area becomes a thin horizontal band, and everything above and below it falls out of focus fast.

Seeing depth of field that shallow makes the brain unconsciously read the scene as "something small, shot up close" — because that's exactly what produces such a shallow depth of field in macro photography. Point the effect down at a real city from above, and full-size buildings and cars suddenly read as a miniature model.

These days it's usually faked in post rather than shot with a real tilt-shift lens: a gradient blur mask over the top and bottom bands, plus a bump in saturation and contrast to sell the "toy plastic" look. On the web, backdrop-filter: blur() on just the top and bottom strips gets you there.

When to use

Use it on a high-angle, looking-down shot of a city or event you want to read as a toy. It barely registers on an eye-level photo.