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.
Image Gradient Overlay - Online Add Color Tint
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.
Hex Color Darken/Lighten - Online Shade & Tint Calculator
Input a hex color and adjust its lightness by a percentage. Get tristimulus shades for CSS. Quick and visual.
Element Blend Mode Tester - Online See mix-blend-mode
Overlay colored blocks and images and apply all mix‑blend‑mode values. Understand how each mode works live.
Image Contrast Enhancer - Online Histogram Equalization
Automatically improve the contrast of dark or washed‑out photos using histogram equalization. One‑click auto‑tune. All canvas‑based.
Screenshot Color Picker - Online Upload & Pick Hex
Upload a screenshot or image and use the magnifying glass to pick exact colors. Get hex, RGB, and HSL. Simple.
HSL to HEX Converter - Online Hue Saturation Lightness to Hex
Convert HSL and HSLA color specifications back to standard HEX codes. Useful when extracting colors from CSS preprocessors. Instant client-side conversion.
forced‑colors Mode Tester - Online Windows High Contrast
Simulate forced‑colors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
HEX to HSL Converter - Online Color Code to Hue Saturation Lightness
Translate HEX colors to HSL values and adjust lightness and saturation visually. Great for creating color variations in CSS design systems.
Hex Color Clock - Online Time Displayed as Background Color
Every second, the background color changes to the hex code corresponding to the current time (HHMMSS). A beautiful, ever‑changing clock.
Color to Tailwind Class Converter - Online Map Hex to closest
Enter any hex color and find the nearest Tailwind CSS color class. Also shows the Tailwind palette shade.
Camera Selfie Tool - Online Take Pictures & Add Frame
Use your webcam to take selfies. Add a simple frame or filter, then download the picture. No upload, just fun.
CSS Countdown Number Animation - Online Flip Clock Effect
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
Online Alarm Clock - Set & Wake with Sound
Set an alarm that rings at a specific time even if the tab is in background. Multiple alarm tones. Works offline.
Memory Sequence Game - Online Watch & Repeat Colors
Watch a color sequence and click the same pattern. Gets longer each round. Test and improve your working memory. All local.
Sunrise Alarm Simulator – Online Gradual Light Wake‑Up
Set a wake-up time and the screen gradually brightens from dark to warm yellow. Use as a gentle alarm.
Advanced Eye Exercise Timer – Online 20‑20‑20 + Focus Shift
Alternates between near and far focus cues with timed breaks. Reduce digital eye strain.
Retro Clock Widget - Online Fullscreen Nixie or Flip Clock
Display a stylish retro flip clock or Nixie tube clock in full screen. Perfect for desk presentation or decoration. Pure CSS and JS.
Countdown Timer with Laps - Online Workout & Study
Run a countdown timer that automatically repeats for a set number of laps. Great for HIIT, study sprints, or any interval work.
Guitar Effect Chain Simulator - Online Virtual Pedalboard
Route your microphone input through a chain of virtual effects (distortion, reverb, delay) using Web Audio API.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
Live Binary Clock - Online Hex & Decimal Time
See the current time displayed in binary and hexadecimal. Dark theme, full‑screen mode. A geeky desk decoration.
Qibla Direction Finder – Online Sun Shadow & Compass
Use your device's orientation sensor or manually enter a location to find the bearing toward Mecca. Simple compass tool.
Binary Clock - Online Real‑Time Time in BCD
View the current time in binary (BCD) format. A stylish geek clock with dot columns. Toggle between binary and decimal labels.
Scan Barcode from Camera - Online Live UPC/EAN Reader
Point your camera at a barcode and decode it live. Works with multiple formats. Pure JavaScript barcode detection.
Binaural Beats Generator - Online Brainwave Focus & Relax
Create binaural beats by setting base frequency and beat frequency. Use headphones. For relaxation or focus. Web Audio API.
Sleep Cycle & REM Calculator - Online Best Bedtimes
Find the optimal go‑to‑sleep or wake‑up times based on 90‑min sleep cycles. Wake up between REM cycles and feel refreshed.
Roman Numeral Arithmetic - Online Add & Subtract
Enter two Roman numerals and add or subtract them. See the result in Roman and Arabic. A fun mental workout.
Barcode Scanner - Online Scan 1D Barcodes from Camera
Use your camera to scan 1D barcodes (UPC, EAN, CODE128) directly in the browser. Quick and no app install. All scanning is local.
Solar Eclipse Timer – Online Countdown to C1/C2/Max/C3/C4
Enter a future eclipse date and approximate location to see estimated contact times. Event countdown.
SHA‑1, SHA‑256, SHA‑512 Hash Generator - Online
Generate SHA‑1, SHA‑256, SHA‑512, and SHA‑3 digests of any text or file. Verify integrity. All in your browser.