Techniques
Painted oblique shadow
A hard-edged, unblurred offset drop that reads as a shadow *painted* onto the set rather than cast by light — the signature Caligari shadow flat.
.element {
position: relative;
background: #16151D;
border: 1px solid #2E2A22;
box-shadow: 12px 18px 0 rgba(0, 0, 0, 0.65);
}
.element::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(118deg, transparent 58%, rgba(0, 0, 0, 0.55) 58.2%, rgba(0, 0, 0, 0.55) 64%, transparent 64.2%);
pointer-events: none;
}
Raked skew frame
An off-kilter card that leans on an acute angle, counter-skewing its content so text stays legible while the frame distorts — the leaning verticals of an Expressionist set.
.element {
transform: skewY(-2deg) rotate(-1deg);
border: 1px solid #2E2A22;
background: #16151D;
box-shadow: 12px 18px 0 rgba(0, 0, 0, 0.65);
}
.element > * {
transform: skewY(2deg) rotate(1deg);
}
Nitrate flicker grain
A film-grain flicker overlay that animates the amber-by-day / steel-blue-by-night tint of an old nitrate print across the dark frame.
.element {
position: relative;
background: #0E0D14;
}
.element::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg, rgba(201,194,172,0.04) 0 1px, transparent 1px 3px),
radial-gradient(120% 80% at 50% 0%, rgba(185,140,63,0.08), transparent 60%),
radial-gradient(120% 80% at 50% 100%, rgba(28,36,51,0.18), transparent 60%);
mix-blend-mode: screen;
animation: nitrate-flicker 320ms steps(3) infinite;
}
@keyframes nitrate-flicker {
0%, 100% { opacity: 0.85; }
33% { opacity: 1; }
66% { opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
.element::before { animation: none; opacity: 0.9; }
}