<a href="https://imageblender.vercel.app/" target="_blank" rel="noopener nofollow">Live</a> | <a href="https://github.com/muhammadhafijur/image-blender" target="_blank" rel="noopener nofollow">Github</a>
As a frontend developer, I have used blend modes in various projects. Previously, I had to check the output in DevTools multiple times. To make that process easier, I created an open-source project called Image Blender. However, I wasn’t happy with the UI/UX, so this time, I focused on improving it and added some new features as well.
Features:
<ul>
<li>Paste or Upload Images – Quickly drag, drop, or paste image links to get started.</li>
<li>Blend Effects – Apply various CSS blend modes (Multiply, Screen, Overlay, and more) to create eye-catching effects.</li>
<li>Gradient Effects – Seamlessly blend colors with customizable gradient options.
Unique Presets – Choose from a curated collection of preset styles for instant styling.</li>
<li>Community Presets – Explore and use presets contributed by the community.</li>
<li>View &amp; Copy Code – Instantly generate Tailwind CSS code for your effects so you can integrate them into your projects.</li>
<li>Download Modified Images – Save your high-quality, blended images directly from the app.</li>
</ul>
Do check this out and share your feedback! If you’re interested, you can contribute to community presets or any other improvements as well.

The official Open Source daily.dev Squad. 

Open Source

A developer created Image Blender, an open-source web tool that applies CSS blend modes and gradient effects to images. The tool features drag-and-drop image upload, various blend effects like multiply and overlay, customizable gradients, preset collections, and automatic Tailwind CSS code generation. Users can download processed images and contribute community presets to the project.

I’ve built an open source image blending tool that lets you create stunning image effects, generate Tailwind CSS code, and more!

Great Tool! Just a quick tip: Open Graph Image should be an absolute URL otherwise some Social Media platforms and bookmarking tools will fail to fetch it.
content=“/og-image-blender.png”

On your homepage / demo slider the image scales which doesn’t look great, it just needs a max-width:initial; and a set width (1246px on desktop) which will fix the issue :)