Inspired by physical stacked paper and letterpress printing. Three ultra-fine shadow layers create the illusion of real paper sheets sitting on a desk. Each layer has minimal offset and distinct opacity, producing delicate depth without heaviness. Perfect for note-taking apps, document tools, and minimalist design.
CSS Math Analysis
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Implement a layered paper shadow system that mimics real stacked sheets. Base state uses three layers: tight contact (0 1px 1px #0000000D), medium ambient (0 2px 4px #0000000A), and atmospheric (0 5px 10px #00000008). On hover, expand to four layers for a convincing floating effect: contact (0 2px 3px #00000012), ambient (0 6px 12px #0000000D), atmospheric (0 12px 24px #0000000A), and ultra-wide (0 24px 48px #00000005). The 4th layer on hover creates a "paper lifting off the desk" illusion. Pair with a 1px border at 8% opacity. Transition over 250ms ease. Never scale — the paper metaphor relies on shadow depth, not zoom. This shadow conveys quiet craftsmanship and tactile authenticity.Inspired by physical stacked paper and letterpress printing. Three ultra-fine shadow layers create the illusion of real paper sheets sitting on a desk. Each layer has minimal offset and distinct opacity, producing delicate depth without heaviness. Perfect for note-taking apps, document tools, and minimalist design.
CSS Math Analysis