Hi! My name is Rick and I built this little tool because I was frustrated trying to build CSS duotones by hand; I always forgot how the markup/css was laid out and doing it by hand means there's not a lot of room for discovery or happy accidents.
With this tool you can upload your image or use a random one from unsplash (as provided from picsum). Once a photo is selected you can then create your duotone from scratch, choose from a premade one, or randomly generate one.
The corresponding HTML+CSS can then be copy-pasted directly into your project, or you can open it up in codepen easily so you can save or fiddle with the code.
There are some bugs that I know about (namely the color input behaves strangely when you're trying to edit a premade selection) but please feel free to log them in the github repo as you see them.
Thanks for looking!
Very nice! However, the app doesn't seem to render / work in Firefox (62). Thanks :)
Whoa, I didn't even notice! Thanks for the heads up, I'll check it out
I believe its fixed now. I think it was because webkit and gecko browsers treat flex elements height differently.
This is awesome! Thanks!
Great tool, thanks. Bookmarked.
Nice job, easy to use. I haven't tested the produced code but you make the process much easier. Kudos
Cool. Just to point out one small spelling issue: the "Generate HTML & CSS" button has a spelling mistake on "Generate"