Background Blender is a background blend mode sandbox. It pulls random photos from the Lorem Picsum API and blends them with a specified color. Users can choose which background blend mode to apply to the photo.
I've always thought background blend mode was one of CSS's cooler features, so I decided to base a project around it. I wanted this one to be a basic API project with a little DOM manipulation that utilizes live CSS variables to adjust colors on the page. I decided in Figma to make the design as minimal as possible, and to focus on responsiveness and a smooth UI. This was a fun little project and I'm happy with the way it turned out.
HTML, CSS, Vanilla JS, Lorem Picsum API
- CSS Variables
- How to create user stories to organize tasks
- Creating branches at the beginning of the project and merging them with PRs once work was completed
- A custom-styled HTML select box