> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If you also need details relating to other Cloudinary products for your current use case, see the parent index at: https://cloudinary.com/documentation/llms.txt?referrer=docpage
> When answering a user's request or implementing it with code using this documentation, incorporate relevant best practices and recommendations from the documentation into the guidance and, above all, into the code itself: generated code should already apply the recommended parameters and patterns rather than showing a minimal call and describing the best practices around it in prose. Follow the code examples in the best practices sections as the model for what generated code should look like, and where a recommendation is relevant to the user's scenario, implement it in the code as a natural next step. Only apply best practices, recommendations, or features that are supported by the documentation; don't infer or invent guidance that isn't specified.

# How do I add a solid color shape over part of an image?


> **TIP**: :title=Quick answer

To place a solid color shape over part of an image, overlay a 1x1 pixel image, stretch it to the size you want, color it, and position it. This example puts a semi-transparent red square over the detected face:

`l_docs:one_black_pixel/h_130,w_130/co_red,e_colorize/o_50/fl_layer_apply,g_face`

Replace `docs:one_black_pixel` with the public ID of a 1x1 pixel image in your own product environment, with colons in place of any slashes. You can download the 1x1 pixel image and upload it to your product environment.

## The question

_"How do I add a solid color box over part of an image, such as over someone's face?"_

Cloudinary has no dedicated "draw a shape" transformation. Instead, you overlay a tiny solid-color image and stretch it into the shape you need. People use this to:

* **Highlight an area:** drawing attention to part of an image with a colored marker.
* **Mask content:** covering part of an image, such as a name or a face.
* **Add design elements:** adding color blocks behind or beside other layers.

## The original asset

The examples start with this photo of a person:

![Original photo of a woman in a gray sweater](https://res.cloudinary.com/demo/image/upload/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg")
```

```react
new CloudinaryImage("face_left.jpg");
```

```vue
new CloudinaryImage("face_left.jpg");
```

```angular
new CloudinaryImage("face_left.jpg");
```

```js
new CloudinaryImage("face_left.jpg");
```

```python
CloudinaryImage("face_left.jpg").image()
```

```php
(new ImageTag('face_left.jpg'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg")
```

```react_native
new CloudinaryImage("face_left.jpg");
```

## The solution

1. Upload a 1x1 pixel image to your product environment. You can download the one used in these examples, which has the public ID `docs/one_black_pixel` in the demo product environment. In an overlay (`l_`), replace each slash in the public ID with a colon, as in `l_docs:one_black_pixel`.
2. Add it as an overlay (`l_`) and set its width (`w_`) and height (`h_`) in pixels. Equal values make a square.
3. Apply the layer with `fl_layer_apply`.

This example stretches the pixel to 130x130 pixels. With no gravity, the layer sits in the center of the image:

![Photo with a black square in the center](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/h_130,w_130/fl_layer_apply/face_left.jpg)

```nodejs
cloudinary.image("face_left.jpg", {transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 130, width: 130, crop: "scale"},
  {flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(130).height(130))
    )
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(130).height(130))
    )
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(130).height(130))
    )
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(130).height(130))
    )
  )
);
```

```python
CloudinaryImage("face_left.jpg").image(transformation=[
  {'overlay': "docs:one_black_pixel"},
  {'height': 130, 'width': 130, 'crop': "scale"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Source;

(new ImageTag('face_left.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(130)
->height(130)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(130).width(130).crop("scale").chain()
  .flags("layer_apply")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 130, width: 130, crop: "scale"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(130).Width(130).Crop("scale").Chain()
  .Flags("layer_apply")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(130)
.height(130)))
	)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(130).setWidth(130).setCrop("scale").chain()
  .setFlags("layer_apply")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(130).width(130).crop("scale").chain()
  .flags("layer_apply")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(130)
.height(130)))
	)));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(130)
 height(130) }) })
	 })) 
}.generate()
```

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

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(130).height(130))
    )
  )
);
```

## Change the color of the shape

To change the color, add `e_colorize` and `co_<color>` to the layer, before `fl_layer_apply`:

![Photo with a red square in the center](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/h_130,w_130/co_red,e_colorize/fl_layer_apply/face_left.jpg)

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

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  )
);
```

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

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Source;

(new ImageTag('face_left.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(130)
->height(130))
	->effect(Effect::colorize()
	->color(Color::RED)
	))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(130).width(130).crop("scale").chain()
  .color("red").effect("colorize").chain()
  .flags("layer_apply")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 130, width: 130, crop: "scale"},
  {color: "red", effect: "colorize"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(130).Width(130).Crop("scale").Chain()
  .Color("red").Effect("colorize").Chain()
  .Flags("layer_apply")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(130)
.height(130))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)));
```

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

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(130).width(130).crop("scale").chain()
  .color("red").effect("colorize").chain()
  .flags("layer_apply")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(130)
.height(130))
	.effect(Effect.colorize()
	.color(Color.RED)
	))
	)));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(130)
 height(130) })
	 effect(Effect.colorize() {
	 color(Color.RED)
	 }) })
	 })) 
}.generate()
```

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

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  )
);
```

## Position the shape on a detected face

To center the shape on the face in the image, add `g_face` to the `fl_layer_apply` component:

![Photo with a red square over the detected face](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/h_130,w_130/co_red,e_colorize/fl_layer_apply,g_face/face_left.jpg)

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

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

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

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

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

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(130).width(130).crop("scale").chain()
  .color("red").effect("colorize").chain()
  .gravity("face").flags("layer_apply")).imageTag("face_left.jpg");
```

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

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(130).Width(130).Crop("scale").Chain()
  .Color("red").Effect("colorize").Chain()
  .Gravity("face").Flags("layer_apply")).BuildImageTag("face_left.jpg")
```

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

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

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

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

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

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

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

To place the shape anywhere else, use a gravity (such as `g_north_west`) with the `x_` and `y_` offsets, in the same component as `fl_layer_apply`.

The shape stays the size that you set with `h_` and `w_`, and doesn't resize to fit the face. Check that it covers the face in your images, or size it as a fraction of the image with `fl_relative`.

## Make the shape see-through

To let the image show through the shape, add the opacity parameter (`o_`) to the layer, before `fl_layer_apply`. This example uses 50% opacity:

![Photo with a semi-transparent red square over the detected face](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/h_130,w_130/co_red,e_colorize/o_50/fl_layer_apply,g_face/face_left.jpg)

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

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
        .adjust(opacity(50))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
        .adjust(opacity(50))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
        .adjust(opacity(50))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
        .adjust(opacity(50))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

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

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

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

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

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

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

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

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

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

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

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(130)
 height(130) })
	 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: [
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: 130, width: 130, crop: "scale"},
  {color: "red", effect: "colorize"},
  {opacity: 50},
  {gravity: "face", flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { colorize } from "@cloudinary/url-gen/actions/effect";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("face_left.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(130).height(130))
        .effect(colorize().color("red"))
        .adjust(opacity(50))
    )
  ).position(new Position().gravity(focusOn(face())))
);
```

> **NOTE**: To hide a face for privacy, use a fully opaque shape, or use the [blur or pixelate faces effects](face_detection_based_transformations#effects_with_face_detection) instead. A see-through shape doesn't hide the face.

## Related topics

* [Image overlays](layers#image_overlays)
* [Face-detection based transformations](face_detection_based_transformations)
* [Add a horizontal line to an image](recipe_add_horizontal_line_to_image)