> ## 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 straight horizontal line to an image?


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

To draw a straight line across an image, overlay a 1x1 pixel black image and stretch it to the size of the line you want:

`l_docs:one_black_pixel/h_5,w_500/fl_layer_apply`

Replace `docs:one_black_pixel` with the public ID of a 1x1 black 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 straight horizontal black line to a photo? I mean an actual line on the picture, not a border around it."_

Cloudinary has no dedicated "draw a line" transformation. The border (`bo_`) parameter adds an outline around the whole image, and text characters such as underscores or hyphens can't be relied on to look like a line. Instead, you overlay a tiny solid-color image and stretch it into a line.

People add lines to images for reasons such as:

* **Dividers:** separating the rows of a product grid or collage, or an image from a caption area.
* **Crossed-out prices:** crossing out an old price in a sale image.
* **Split screens:** showing a vertical divider in a before-and-after comparison.
* **Accents and guides:** adding an underline accent beneath a headline, or alignment guides over a design.

## The original asset

The examples start with this photo of cameras on a plain background:

![Original photo of nine vintage cameras laid out in three rows](https://res.cloudinary.com/demo/image/upload/docs/old-cameras.jpg "thumb: c_scale,w_400")

```nodejs
cloudinary.image("docs/old-cameras.jpg")
```

```react
new CloudinaryImage("docs/old-cameras.jpg");
```

```vue
new CloudinaryImage("docs/old-cameras.jpg");
```

```angular
new CloudinaryImage("docs/old-cameras.jpg");
```

```js
new CloudinaryImage("docs/old-cameras.jpg");
```

```python
CloudinaryImage("docs/old-cameras.jpg").image()
```

```php
(new ImageTag('docs/old-cameras.jpg'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("docs/old-cameras.jpg");
```

```ruby
cl_image_tag("docs/old-cameras.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("docs/old-cameras.jpg")
```

```dart
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("docs/old-cameras.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("docs/old-cameras.jpg");
```

```flutter
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("docs/old-cameras.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("docs/old-cameras.jpg")
```

```react_native
new CloudinaryImage("docs/old-cameras.jpg");
```

## The solution

1. Upload a 1x1 pixel black 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_`). A wide, short rectangle looks like a horizontal line.
3. Apply the layer with `fl_layer_apply`, and use gravity (`g_`) and offsets (`x_`, `y_`) to position it.

This example draws a black line 800 pixels wide and 5 pixels thick, between the first and second rows of cameras (299 pixels from the top):

![Cameras photo with a black horizontal line between the first and second rows](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/h_5,w_800/fl_layer_apply,g_north,y_299/docs/old-cameras.jpg "thumb: c_scale,w_500")

```nodejs
cloudinary.image("docs/old-cameras.jpg", {transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 5, width: 800, crop: "scale"},
  {gravity: "north", y: 299, 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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(800).height(5))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(299)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(800).height(5))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(299)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(800).height(5))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(299)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(800).height(5))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(299)
  )
);
```

```python
CloudinaryImage("docs/old-cameras.jpg").image(transformation=[
  {'overlay': "docs:one_black_pixel"},
  {'height': 5, 'width': 800, 'crop': "scale"},
  {'gravity': "north", 'y': 299, 'flags': "layer_apply"}
  ])
```

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

(new ImageTag('docs/old-cameras.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(800)
->height(5)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(299))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(5).width(800).crop("scale").chain()
  .gravity("north").y(299).flags("layer_apply")).imageTag("docs/old-cameras.jpg");
```

```ruby
cl_image_tag("docs/old-cameras.jpg", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 5, width: 800, crop: "scale"},
  {gravity: "north", y: 299, flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(5).Width(800).Crop("scale").Chain()
  .Gravity("north").Y(299).Flags("layer_apply")).BuildImageTag("docs/old-cameras.jpg")
```

```dart
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(800)
.height(5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.north()))
.offsetY(299))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(5).setWidth(800).setCrop("scale").chain()
  .setGravity("north").setY(299).setFlags("layer_apply")).generate("docs/old-cameras.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(5).width(800).crop("scale").chain()
  .gravity("north").y(299).flags("layer_apply")).generate("docs/old-cameras.jpg");
```

```flutter
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(800)
.height(5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.north()))
.offsetY(299))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/old-cameras.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(800)
 height(5) }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(299) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/old-cameras.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: 5, width: 800, crop: "scale"},
  {gravity: "north", y: 299, 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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width(800).height(5))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(299)
  )
);
```

> **NOTE**: Without `g_` and offsets, the line is centered on the image. Because all the dimensions are in pixels, the line has the same size regardless of the base image size.

## Make the line span the full width of the image

To draw a line that always stretches across the whole image, regardless of its width, use relative sizing. Scale the pixel with `c_scale` and `fl_relative`, and give the height as a fraction of the base image (here `0.006` is 0.6% of the image height). With `g_north`, a fractional `y_` offset is also relative, so `y_0.36` is 36% of the way down:

![Cameras photo with a full-width black horizontal line between the first and second rows](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/c_scale,fl_relative,h_0.006,w_1.0/fl_layer_apply,g_north,y_0.36/docs/old-cameras.jpg "thumb: c_scale,w_500")

```nodejs
cloudinary.image("docs/old-cameras.jpg", {transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: "0.006", width: "1.0", flags: "relative", crop: "scale"},
  {gravity: "north", y: "0.36", 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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width("1.0").height(0.006).relative())
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.36)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width("1.0").height(0.006).relative())
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.36)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width("1.0").height(0.006).relative())
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.36)
  )
);
```

```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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width("1.0").height(0.006).relative())
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.36)
  )
);
```

```python
CloudinaryImage("docs/old-cameras.jpg").image(transformation=[
  {'overlay': "docs:one_black_pixel"},
  {'height': "0.006", 'width': "1.0", 'flags': "relative", 'crop': "scale"},
  {'gravity': "north", 'y': "0.36", 'flags': "layer_apply"}
  ])
```

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

(new ImageTag('docs/old-cameras.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(1.0)
->height(0.006)
	->relative()
	))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(0.36))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(0.006).width(1.0).flags("relative").crop("scale").chain()
  .gravity("north").y(0.36).flags("layer_apply")).imageTag("docs/old-cameras.jpg");
```

```ruby
cl_image_tag("docs/old-cameras.jpg", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 0.006, width: 1.0, flags: "relative", crop: "scale"},
  {gravity: "north", y: 0.36, flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(0.006).Width(1.0).Flags("relative").Crop("scale").Chain()
  .Gravity("north").Y(0.36).Flags("layer_apply")).BuildImageTag("docs/old-cameras.jpg")
```

```dart
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width('1.0')
.height(0.006)
	.relative()
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.north()))
.offsetY(0.36))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(0.006).setWidth(1.0).setFlags("relative").setCrop("scale").chain()
  .setGravity("north").setY(0.36).setFlags("layer_apply")).generate("docs/old-cameras.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(0.006).width(1.0).flags("relative").crop("scale").chain()
  .gravity("north").y(0.36).flags("layer_apply")).generate("docs/old-cameras.jpg");
```

```flutter
cloudinary.image('docs/old-cameras.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width('1.0')
.height(0.006)
	.relative()
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.north()))
.offsetY(0.36))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/old-cameras.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(1.0F)
 height(0.006F)
	 relative()
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(0.36F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/old-cameras.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: "0.006", width: "1.0", flags: "relative", crop: "scale"},
  {gravity: "north", y: "0.36", 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";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/old-cameras.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation().resize(scale().width("1.0").height(0.006).relative())
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.36)
  )
);
```

## Change the color of the line

To draw a line in a different color, add `e_colorize` and `co_<color>` to the layer, before `fl_layer_apply`. This example crosses out a price in a sale image, with a red line that's tilted slightly (`a_-12`):

![Teapot photo with a crossed-out price in the top corner](https://res.cloudinary.com/demo/image/upload/co_rgb:333333,l_text:Arial_110_bold:%2440/fl_layer_apply,g_north_east,x_150,y_120/l_docs:one_black_pixel/h_10,w_200/co_red,e_colorize/a_-12/fl_layer_apply,g_north_east,x_150,y_145/docs/teapot-product.jpg "thumb: c_scale,w_500")

```nodejs
cloudinary.image("docs/teapot-product.jpg", {transformation: [
  {color: "#333333", overlay: {font_family: "Arial", font_size: 110, font_weight: "bold", text: "%2440"}},
  {gravity: "north_east", x: 150, y: 120, flags: "layer_apply"},
  {overlay: "docs:one_black_pixel"},
  {height: 10, width: 200, crop: "scale"},
  {color: "red", effect: "colorize"},
  {angle: -12},
  {gravity: "north_east", x: 150, y: 145, 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 { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { text, image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/teapot-product.jpg")
  .overlay(
    source(
      text("$40", new TextStyle("Arial", 110).fontWeight("bold")).textColor(
        "#333333"
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(120)
    )
  )
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width(200).height(10))
          .effect(colorize().color("red"))
          .rotate(byAngle(-12))
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(145)
    )
  );
```

```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 { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { text, image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/teapot-product.jpg")
  .overlay(
    source(
      text("$40", new TextStyle("Arial", 110).fontWeight("bold")).textColor(
        "#333333"
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(120)
    )
  )
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width(200).height(10))
          .effect(colorize().color("red"))
          .rotate(byAngle(-12))
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(145)
    )
  );
```

```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 { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { text, image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/teapot-product.jpg")
  .overlay(
    source(
      text("$40", new TextStyle("Arial", 110).fontWeight("bold")).textColor(
        "#333333"
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(120)
    )
  )
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width(200).height(10))
          .effect(colorize().color("red"))
          .rotate(byAngle(-12))
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(145)
    )
  );
```

```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 { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { text, image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/teapot-product.jpg")
  .overlay(
    source(
      text("$40", new TextStyle("Arial", 110).fontWeight("bold")).textColor(
        "#333333"
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(120)
    )
  )
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width(200).height(10))
          .effect(colorize().color("red"))
          .rotate(byAngle(-12))
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(145)
    )
  );
```

```python
CloudinaryImage("docs/teapot-product.jpg").image(transformation=[
  {'color': "#333333", 'overlay': {'font_family': "Arial", 'font_size': 110, 'font_weight': "bold", 'text': "%2440"}},
  {'gravity': "north_east", 'x': 150, 'y': 120, 'flags': "layer_apply"},
  {'overlay': "docs:one_black_pixel"},
  {'height': 10, 'width': 200, 'crop': "scale"},
  {'color': "red", 'effect': "colorize"},
  {'angle': -12},
  {'gravity': "north_east", 'x': 150, 'y': 145, 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Rotate;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Color;
use Cloudinary\Transformation\FontWeight;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/teapot-product.jpg'))
	->overlay(Overlay::source(
	Source::text("$40",(new TextStyle("Arial",110))
	->fontWeight(
	FontWeight::bold())
	)
	->textColor(Color::rgb("333333"))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
->offsetX(150)
->offsetY(120))
	)
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(200)
->height(10))
	->effect(Effect::colorize()
	->color(Color::RED)
	)
	->rotate(Rotate::byAngle(-12)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
->offsetX(150)
->offsetY(145))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .color("#333333").overlay(new TextLayer().fontFamily("Arial").fontSize(110).fontWeight("bold").text("%2440")).chain()
  .gravity("north_east").x(150).y(120).flags("layer_apply").chain()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(10).width(200).crop("scale").chain()
  .color("red").effect("colorize").chain()
  .angle(-12).chain()
  .gravity("north_east").x(150).y(145).flags("layer_apply")).imageTag("docs/teapot-product.jpg");
```

```ruby
cl_image_tag("docs/teapot-product.jpg", transformation: [
  {color: "#333333", overlay: {font_family: "Arial", font_size: 110, font_weight: "bold", text: "%2440"}},
  {gravity: "north_east", x: 150, y: 120, flags: "layer_apply"},
  {overlay: "docs:one_black_pixel"},
  {height: 10, width: 200, crop: "scale"},
  {color: "red", effect: "colorize"},
  {angle: -12},
  {gravity: "north_east", x: 150, y: 145, flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("#333333").Overlay(new TextLayer().FontFamily("Arial").FontSize(110).FontWeight("bold").Text("%2440")).Chain()
  .Gravity("north_east").X(150).Y(120).Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(10).Width(200).Crop("scale").Chain()
  .Color("red").Effect("colorize").Chain()
  .Angle(-12).Chain()
  .Gravity("north_east").X(150).Y(145).Flags("layer_apply")).BuildImageTag("docs/teapot-product.jpg")
```

```dart
cloudinary.image('docs/teapot-product.jpg').transformation(Transformation()
	.addTransformation("co_rgb:333333,l_text:Arial_110_bold:$40/fl_layer_apply,g_north_east,x_150,y_120/l_docs:one_black_pixel/h_10,w_200/co_red,e_colorize/a_-12/fl_layer_apply,g_north_east,x_150,y_145"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("#333333").setOverlay("text:Arial_110_bold:%2440").chain()
  .setGravity("north_east").setX(150).setY(120).setFlags("layer_apply").chain()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(10).setWidth(200).setCrop("scale").chain()
  .setColor("red").setEffect("colorize").chain()
  .setAngle(-12).chain()
  .setGravity("north_east").setX(150).setY(145).setFlags("layer_apply")).generate("docs/teapot-product.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("#333333").overlay(new TextLayer().fontFamily("Arial").fontSize(110).fontWeight("bold").text("%2440")).chain()
  .gravity("north_east").x(150).y(120).flags("layer_apply").chain()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(10).width(200).crop("scale").chain()
  .color("red").effect("colorize").chain()
  .angle(-12).chain()
  .gravity("north_east").x(150).y(145).flags("layer_apply")).generate("docs/teapot-product.jpg");
```

```flutter
cloudinary.image('docs/teapot-product.jpg').transformation(Transformation()
	.addTransformation("co_rgb:333333,l_text:Arial_110_bold:$40/fl_layer_apply,g_north_east,x_150,y_120/l_docs:one_black_pixel/h_10,w_200/co_red,e_colorize/a_-12/fl_layer_apply,g_north_east,x_150,y_145"));
```

```kotlin
cloudinary.image {
	publicId("docs/teapot-product.jpg")
	 overlay(Overlay.source(
	Source.text("\$40",TextStyle("Arial",110) {
	 fontWeight(
	FontWeight.bold())
	 }) {
	 textColor(Color.rgb("333333"))
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
 offsetX(150)
 offsetY(120) })
	 })
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(200)
 height(10) })
	 effect(Effect.colorize() {
	 color(Color.RED)
	 })
	 rotate(Rotate.byAngle(-12)) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
 offsetX(150)
 offsetY(145) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/teapot-product.jpg", {transformation: [
  {color: "#333333", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(110).fontWeight("bold").text("%2440")},
  {gravity: "north_east", x: 150, y: 120, flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: 10, width: 200, crop: "scale"},
  {color: "red", effect: "colorize"},
  {angle: -12},
  {gravity: "north_east", x: 150, y: 145, 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 { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { text, image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/teapot-product.jpg")
  .overlay(
    source(
      text("$40", new TextStyle("Arial", 110).fontWeight("bold")).textColor(
        "#333333"
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(120)
    )
  )
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width(200).height(10))
          .effect(colorize().color("red"))
          .rotate(byAngle(-12))
      )
    ).position(
      new Position()
        .gravity(compass("north_east"))
        .offsetX(150)
        .offsetY(145)
    )
  );
```

## Draw a vertical line

Swap the proportions, so that the width is small and the height is large. This example draws a white line down the middle of a photo, such as for a split-screen comparison. The height is relative to the image (`h_1.0` with `fl_relative` is the full height), so it spans the whole image:

![Landscape photo with a vertical white line down the middle](https://res.cloudinary.com/demo/image/upload/l_docs:one_black_pixel/c_scale,fl_relative,h_1.0,w_0.008/co_white,e_colorize/fl_layer_apply,g_center/docs/landscape-country.jpg "thumb: c_scale,w_500")

```nodejs
cloudinary.image("docs/landscape-country.jpg", {transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: "1.0", width: "0.008", flags: "relative", crop: "scale"},
  {color: "white", effect: "colorize"},
  {gravity: "center", 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 { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/landscape-country.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(0.008).height("1.0").relative())
        .effect(colorize().color("white"))
    )
  ).position(new Position().gravity(compass("center")))
);
```

```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 { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/landscape-country.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(0.008).height("1.0").relative())
        .effect(colorize().color("white"))
    )
  ).position(new Position().gravity(compass("center")))
);
```

```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 { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/landscape-country.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(0.008).height("1.0").relative())
        .effect(colorize().color("white"))
    )
  ).position(new Position().gravity(compass("center")))
);
```

```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 { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/landscape-country.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(0.008).height("1.0").relative())
        .effect(colorize().color("white"))
    )
  ).position(new Position().gravity(compass("center")))
);
```

```python
CloudinaryImage("docs/landscape-country.jpg").image(transformation=[
  {'overlay': "docs:one_black_pixel"},
  {'height': "1.0", 'width': "0.008", 'flags': "relative", 'crop': "scale"},
  {'color': "white", 'effect': "colorize"},
  {'gravity': "center", '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\Compass;

(new ImageTag('docs/landscape-country.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(0.008)
->height(1.0)
	->relative()
	)
	->effect(Effect::colorize()
	->color(Color::WHITE)
	))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::center()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(1.0).width(0.008).flags("relative").crop("scale").chain()
  .color("white").effect("colorize").chain()
  .gravity("center").flags("layer_apply")).imageTag("docs/landscape-country.jpg");
```

```ruby
cl_image_tag("docs/landscape-country.jpg", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 1.0, width: 0.008, flags: "relative", crop: "scale"},
  {color: "white", effect: "colorize"},
  {gravity: "center", flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(1.0).Width(0.008).Flags("relative").Crop("scale").Chain()
  .Color("white").Effect("colorize").Chain()
  .Gravity("center").Flags("layer_apply")).BuildImageTag("docs/landscape-country.jpg")
```

```dart
cloudinary.image('docs/landscape-country.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.008)
.height('1.0')
	.relative()
	)
	.effect(Effect.colorize()
	.color(Color.WHITE)
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.center()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(1.0).setWidth(0.008).setFlags("relative").setCrop("scale").chain()
  .setColor("white").setEffect("colorize").chain()
  .setGravity("center").setFlags("layer_apply")).generate("docs/landscape-country.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(1.0).width(0.008).flags("relative").crop("scale").chain()
  .color("white").effect("colorize").chain()
  .gravity("center").flags("layer_apply")).generate("docs/landscape-country.jpg");
```

```flutter
cloudinary.image('docs/landscape-country.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/one_black_pixel")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.008)
.height('1.0')
	.relative()
	)
	.effect(Effect.colorize()
	.color(Color.WHITE)
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.center()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/landscape-country.jpg")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(0.008F)
 height(1.0F)
	 relative()
	 })
	 effect(Effect.colorize() {
	 color(Color.WHITE)
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.center()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/landscape-country.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: "1.0", width: "0.008", flags: "relative", crop: "scale"},
  {color: "white", effect: "colorize"},
  {gravity: "center", 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 { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/landscape-country.jpg").overlay(
  source(
    image("docs/one_black_pixel").transformation(
      new Transformation()
        .resize(scale().width(0.008).height("1.0").relative())
        .effect(colorize().color("white"))
    )
  ).position(new Position().gravity(compass("center")))
);
```

## Related topics

* [Image overlays](layers#image_overlays)
* [Add a solid color shape over an image](recipe_add_solid_color_shape_over_image)