Introducing Cheesy Shadow Picker: Simplifying CSS Shadow Usage
Context
Cheesy Shadow Picker is a small utility I built to speed up one recurring task: finding readable text-shadow combinations for labels on imagery and maps. Instead of trial and error in code, the tool gives fast visual feedback and ready-to-copy CSS values for production use.
My role
- Frontend development
- Have fun
I designed and built the full tool as a practical utility for my own production workflow, focused on fast iteration and immediate export of usable CSS values.
Data and methodology
The idea came from repeated label-readability issues in ai2html and Adobe Illustrator map outputs, especially on complex satellite backgrounds and dense basemaps.
I implemented a simple interactive interface in Svelte to test shadow combinations in real time and progressively expanded it based on daily newsroom usage.
Key decisions
- I prioritized speed and simplicity over feature breadth so users could move quickly from testing to production.
- The latest version adds image upload support, allowing designers to test shadows directly on their own map or graphic background before publishing.
- I kept the output format copy-oriented and minimal to reduce friction when transferring values into ai2html and web stylesheets.
Result
The final tool turned a repetitive trial-and-error step into a fast visual check, with practical CSS outputs ready to use in real projects.
Impact and learnings
- The project became part of my regular production workflow and is now used in many map-based stories.
- It also served as an early Svelte learning project and helped consolidate a component-first approach for building small newsroom utilities.