UD5 Toolkit
Image Blend Mode Tester - Online Overlay Two Photos
Upload two images and apply CSS blend modes (multiply, screen, overlay, etc.). See the result and copy the filter CSS. Pure frontend.
No image loaded
📷 Image Source
🎨 Gradient Type
🌈 Colors
✨ Quick Presets
🎨 Gradient Type
Start
End
📐 Angle: 135°
💧 Overlay Opacity: 60%
135°
60%
🔀 Blend Mode
Frequently Asked Questions
What is a gradient overlay?
A gradient overlay blends a smooth color transition on top of your image. It creates a color tint effect where one shade gradually transitions into another, enhancing the mood and aesthetic of your photo without permanently altering the original.
How do I add a color tint to my image?
Upload your image, choose two colors (or the same color for a solid tint), adjust the opacity and blend mode, then download. The Overlay blend mode works great for subtle color grading, while Multiply creates darker, moodier effects.
Which blend mode should I use?
Overlay adds contrast and vibrancy — ideal for most photo enhancements. Multiply darkens images for dramatic shadows. Screen brightens for airy, ethereal looks. Soft Light gives a gentle, natural tint. Experiment to find your perfect style!
Can I use this tool for free?
Yes! This gradient overlay tool is completely free to use with no registration, no watermarks, and no usage limits. Process as many images as you need directly in your browser — your files are never uploaded to any server.
What image formats are supported?
You can upload JPG, PNG, WebP, GIF (static), and BMP images. Downloads are saved as high-quality PNG files to preserve transparency and color accuracy. Maximum recommended resolution is 6000×4000 pixels for smooth performance.
How is this different from Instagram filters?
Unlike pre-made filters, this tool gives you full control over every aspect: exact colors, gradient angle, opacity strength, and blend mode. You can create custom color grades that match your brand or aesthetic perfectly, then copy the CSS code for web use.
Can I use the CSS code on my website?
Absolutely! Click "Copy CSS" to get the exact gradient and blend mode code for your website. This is perfect for adding matching gradient overlays to hero images, banners, or background sections using pure CSS.
Is my image uploaded to a server?
No. All image processing happens locally in your browser using the HTML5 Canvas API. Your images never leave your device, ensuring complete privacy and security. This also means the tool works offline once loaded.
Image FFT Visualizer - Online See Frequency Domain
Upload an image and see its 2D FFT magnitude and phase. Learn how image filtering works. Educatinal tool. Canvas.
Emoji to Image Converter - Online Download Emoji as PNG
Pick any emoji and download it as a high‑resolution PNG image with transparent background. For social media or icons.
Image Hue Shifter - Online Change Colors Easily
Rotate the hue of any image globally. Turn a red car blue instantly. Download the result. Works entirely in the browser.
Web Image Size Calculator - Online KB & Dimensions Tool
Predict the file size of an image based on pixel dimensions and format (JPEG, PNG, WebP). Rough estimate. Local.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Image Palette Extractor (Paste) - Online Clipboard Image
Paste an image from your clipboard directly into the page (Ctrl+V) and extract its color palette. No file dialog needed.
Text Watermark on Image - Online Add Subtle Overlay
Add a repeating diagonal text watermark to your images. Adjust opacity, font, and color. Protect your photos locally.
Image to Pure ASCII - Online High‑Contrast Text Art
Turn a photo into a high‑contrast ASCII art using only standard text characters. Adjust brightness and character set. Works offline.
Image Emboss Effect - Online Raised 3D Look
Apply an emboss filter to your photo. Choose direction and depth. Gives a 3D carved stone look. Pure canvas.
Image to Binary Array - Online Pixel Dump
Convert any image into a raw binary array of RGBA values. For use in embedded systems or game development. Copy as Uint8Array.
Image to Color Squares - Online Abstract Block Art
Reduce an image to large colored squares. Create bold, minimalist wall art. Adjust block size. Download PNG.
Color Image to ASCII Art - Online True Color Converter
Convert any image into colored ASCII art using divs with background colors. Creates a stunning text‑based replica. View & copy HTML.
Image Warmth & Coolness Slider - Online White Balance Tint
Slide left for cooler (blue) or right for warmer (orange) tones on your image. Quick photo adjustment. Local.
Emoji Reaction Overlay Generator - Online Video Comment Style
Add floating emoji reactions (like live streams) to any screenshot or photo. Export as still image. Fun social media tool.
Image Format MIME Checker - Online Identify True Type
Drop an image that might have wrong extension and see its real format (JPEG, PNG, WebP) based on header bytes.
Image to CSS Grid Layout - Online Pixel‑Based Generator
Upload a small pixel art image and get a CSS grid layout that recreates it using divs. Novelty developer tool.
Text to Braille Image - Online Embossable PNG Generator
Convert short text into a black‑and‑white Braille bump image ready for embossing. Educational and inclusive.
Image Color Palette from URL - Online Remote Photo Analysis
Enter an image URL and extract its dominant color palette. No download needed. Fast visual analysis.
Batch Image to Base64 Encoder - Online Multiple Files
Convert multiple images to Base64 data URIs at once. Copy individually or as a JSON array. Great for inline assets. Local.
Text Diff to Image - Online Compare & Export as PNG
Paste two texts, compute the diff, and render the result as a highlighted image. Easier to share changes visually.
Rain Overlay Effect - Online Add Rain to Photo
Add a realistic animated rain or static rain overlay to your image. Adjust opacity and droplet size. Download final.
Gradient Match Game - Online Drag & Match Linear CSS
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Quote Image Maker - Online Text on Beautiful Backgrounds
Create shareable quote images. Choose background gradient or photo, add text, and download as PNG. Fully local design tool.
Video Color Filter - Online Apply Tint to Video in Browser
Apply real-time CSS filters or canvas effects to a video and download the processed output. Experiment with video post-processing locally.
Image Background Remover - Online AI-Free Local Tool
Remove solid or similar backgrounds from images using color thresholding. No AI, just quick client-side canvas processing. Download as PNG.
Dynamic Placeholder Image Service - Online Test Images
Generate dynamic placeholder images by specifying width, height, colors, and text. View instantly as a URL you can embed in mockups. Canvas-based.
Code Screenshot Generator - Online Carbon Code Image Maker
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Image Splitter - Online Cut Photo into Grid or Strips
Split an image into equal grid parts or horizontal/vertical strips. Useful for Instagram carousel posts or puzzle creation. Everything runs in your browser.
Image Watermarker - Online Add Text or Logo to Photos
Protect your images by adding a text or image watermark. Adjust transparency, position, and rotation. All image processing is done locally; no upload to server.