How to Add a Solid Color Overlay?

Applying solid color overlays to images can be useful for highlighting areas, adding masks, or enhancing design elements. In Cloudinary, you can achieve this by uploading a 1x1 pixel solid color image and using it as an overlay with transformations.

Upload a 1x1 solid color image

You can upload a 1x1 pixel solid-colored image to your Cloudinary account. For example, you can use this 1x1 grey square:

Once uploaded, this image can serve as a resizable, color-customizable overlay.

Apply the overlay and resize it

Once the one_pixel image is in your account, you can overlay it onto another image and resize it to fit the required dimensions.

💡 Example: Overlaying the one_pixel image, stretching it to 60x60 pixels, and placing it over an image called face_left:

Output: The overlay appears as a 60x60 pixel grey square over the base image.

Change the overlay color

You can modify the overlay color by applying the e_colorize effect along with the co (color) parameter.

💡 Example: Changing the overlay color to red:

Output: A 60x60 pixel red square appears over the image.

Auto-position the overlay on a detected face

To automatically place the overlay on top of a detected face, use the g_face (gravity face) parameter.

💡 Example: Positioning the red overlay on a detected face:

Output: The red square is automatically centered over the detected face in the image.

Adjust overlay opacity

You can control the transparency of the overlay using the o (opacity) parameter.

💡 Example: Setting the overlay opacity to 50%:

Output: The red square is placed over the detected face but appears semi-transparent.

Conclusion

By leveraging a 1x1 pixel image, Cloudinary allows you to create dynamic solid color overlays that can be resized, colored, positioned automatically, and adjusted for opacity. This technique is useful for highlighting, masking, and styling images dynamically with simple URL-based transformations.

For more advanced transformations, refer to Cloudinary's Image Transformation Documentation.