Polaroid Camera Made with CSS Gradients
Polaroid camera by Sarah Fossheim on CodePen
Open on CodePen ↗Sarah Fossheim rebuilt a Polaroid camera design entirely in CSS, picking colours from a reference photo. Each part, from the flash to the lens, is its own absolutely positioned div.
The surfaces come from many layered linear and radial gradients, and stacked box-shadows, some inset, add the highlights and depth. She wrote up the whole process.
artlinear-gradientradial-gradientconic-gradient
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- animation
by Kiarash ZarinmehrDancing skeleton
A small skeleton that never stops dancinganimationarttransformborder-radius - animation
by Ricardo Oliva AlonsoPainter
A painter at his easel, drawn and animated in CSSanimationartborder-radiuslinear-gradient - animation
by Henry DesrochesSea drawing
A colourful seascape with gently rolling wateranimationartlinear-gradientborder-radius