> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

## Step 1: 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**:

[http://res.cloudinary.com/demo/image/upload/v1394707379/one_pixel.jpg](http://res.cloudinary.com/demo/image/upload/v1394707379/one_pixel.jpg)

Once uploaded, this image can serve as a color-customizable overlay that can be resized.

## Step 2: 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**:

![Overlaying a 60x60 pixel grey square](https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,h_60,w_60/fl_layer_apply/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {flags: "layer_apply"}
  ]})
```

```react
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation().resize(scale().width(60).height(60))
      )
    )
  );
```

```vue
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation().resize(scale().width(60).height(60))
      )
    )
  );
```

```angular
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation().resize(scale().width(60).height(60))
      )
    )
  );
```

```js
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation().resize(scale().width(60).height(60))
      )
    )
  );
```

```python
CloudinaryImage("face_left.jpg").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': "one_pixel.png", 'height': 60, 'width': 60},
  {'flags': "layer_apply"}
  ])
```

```php
(new ImageTag('face_left.jpg'))
	->resize(Resize::scale()->width(200))
	->overlay(Overlay::source(
	Source::image("one_pixel.png")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(60)
->height(60)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .flags("layer_apply")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("one_pixel.png")).Height(60).Width(60).Chain()
  .Flags("layer_apply")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60)))
	)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("one_pixel.png").setHeight(60).setWidth(60).chain()
  .setFlags("layer_apply")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .flags("layer_apply")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60)))
	)));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.scale() { width(200) })
	 overlay(Overlay.source(
	Source.image("one_pixel.png") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(60)
 height(60) }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("one_pixel.png"), height: 60, width: 60},
  {flags: "layer_apply"}
  ]})
```

```react_native
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation().resize(scale().width(60).height(60))
      )
    )
  );
```

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

## Step 3: 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**:

![Overlaying a 60x60 pixel red square](https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,h_60,w_60/e_colorize,co_red/fl_layer_apply/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply"}
  ]})
```

```react
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    )
  );
```

```vue
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    )
  );
```

```angular
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    )
  );
```

```js
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    )
  );
```

```python
CloudinaryImage("face_left.jpg").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': "one_pixel.png", 'height': 60, 'width': 60},
  {'effect': "colorize", 'color': "red"},
  {'flags': "layer_apply"}
  ])
```

```php
(new ImageTag('face_left.jpg'))
	->resize(Resize::scale()->width(200))
	->overlay(Overlay::source(
	Source::image("one_pixel.png")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(60)
->height(60))
	->effect(Effect::colorize()
	->color(Color::RED)
	))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .flags("layer_apply")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("one_pixel.png")).Height(60).Width(60).Chain()
  .Effect("colorize").Color("red").Chain()
  .Flags("layer_apply")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("one_pixel.png").setHeight(60).setWidth(60).chain()
  .setEffect("colorize").setColor("red").chain()
  .setFlags("layer_apply")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .flags("layer_apply")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.scale() { width(200) })
	 overlay(Overlay.source(
	Source.image("one_pixel.png") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(60)
 height(60) })
	 effect(Effect.colorize() {
	 color(Color.RED)
	 }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("one_pixel.png"), height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply"}
  ]})
```

```react_native
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    )
  );
```

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

## Step 4: 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:

![Red overlay positioned on a detected face](https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,h_60,w_60/e_colorize,co_red/fl_layer_apply,g_face/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply", gravity: "face"}
  ]})
```

```react
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```vue
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```angular
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```js
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```python
CloudinaryImage("face_left.jpg").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': "one_pixel.png", 'height': 60, 'width': 60},
  {'effect': "colorize", 'color': "red"},
  {'flags': "layer_apply", 'gravity': "face"}
  ])
```

```php
(new ImageTag('face_left.jpg'))
	->resize(Resize::scale()->width(200))
	->overlay(Overlay::source(
	Source::image("one_pixel.png")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(60)
->height(60))
	->effect(Effect::colorize()
	->color(Color::RED)
	))
	)
	->position((new Position())
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .flags("layer_apply").gravity("face")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply", gravity: "face"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("one_pixel.png")).Height(60).Width(60).Chain()
  .Effect("colorize").Color("red").Chain()
  .Flags("layer_apply").Gravity("face")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("one_pixel.png").setHeight(60).setWidth(60).chain()
  .setEffect("colorize").setColor("red").chain()
  .setFlags("layer_apply").setGravity("face")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .flags("layer_apply").gravity("face")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.scale() { width(200) })
	 overlay(Overlay.source(
	Source.image("one_pixel.png") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(60)
 height(60) })
	 effect(Effect.colorize() {
	 color(Color.RED)
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("one_pixel.png"), height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {flags: "layer_apply", gravity: "face"}
  ]})
```

```react_native
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

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

## Step 5: Adjust Overlay Opacity

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

💡 **Example:** Setting the overlay opacity to **50%**:

![Red overlay with 50% opacity on a detected face](https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,h_60,w_60/e_colorize,co_red/o_50/fl_layer_apply,g_face/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "face"}
  ]})
```

```react
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
          .adjust(opacity(50))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```vue
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
          .adjust(opacity(50))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```angular
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
          .adjust(opacity(50))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```js
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
          .adjust(opacity(50))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

```python
CloudinaryImage("face_left.jpg").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': "one_pixel.png", 'height': 60, 'width': 60},
  {'effect': "colorize", 'color': "red"},
  {'opacity': 50},
  {'flags': "layer_apply", 'gravity': "face"}
  ])
```

```php
(new ImageTag('face_left.jpg'))
	->resize(Resize::scale()->width(200))
	->overlay(Overlay::source(
	Source::image("one_pixel.png")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(60)
->height(60))
	->effect(Effect::colorize()
	->color(Color::RED)
	)
	->adjust(Adjust::opacity(50)))
	)
	->position((new Position())
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("face")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {width: 200, crop: "scale"},
  {overlay: "one_pixel.png", height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "face"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("one_pixel.png")).Height(60).Width(60).Chain()
  .Effect("colorize").Color("red").Chain()
  .Opacity(50).Chain()
  .Flags("layer_apply").Gravity("face")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	)
	.adjust(Adjust.opacity(50)))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("one_pixel.png").setHeight(60).setWidth(60).chain()
  .setEffect("colorize").setColor("red").chain()
  .setOpacity(50).chain()
  .setFlags("layer_apply").setGravity("face")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .overlay(new Layer().publicId("one_pixel.png")).height(60).width(60).chain()
  .effect("colorize").color("red").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("face")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.scale().width(200))
	.overlay(Overlay.source(
	Source.image("one_pixel.png")
	.transformation(new Transformation()
	.resize(Resize.scale().width(60)
.height(60))
	.effect(Effect.colorize()
	.color(Color.RED)
	)
	.adjust(Adjust.opacity(50)))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.scale() { width(200) })
	 overlay(Overlay.source(
	Source.image("one_pixel.png") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(60)
 height(60) })
	 effect(Effect.colorize() {
	 color(Color.RED)
	 })
	 adjust(Adjust.opacity(50)) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("one_pixel.png"), height: 60, width: 60},
  {effect: "colorize", color: "red"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "face"}
  ]})
```

```react_native
new CloudinaryImage("face_left.jpg")
  .resize(scale().width(200))
  .overlay(
    source(
      image("one_pixel.png").transformation(
        new Transformation()
          .resize(scale().width(60).height(60))
          .effect(colorize().color("red"))
          .adjust(opacity(50))
      )
    ).position(new Position().gravity(focusOn(face())))
  );
```

**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](image_transformations).