Gradient Overlay Image

Name: Gradient Overlay Image
Brand: Cloudinary
Rating: 4.8 (26 reviews)

Add a gradient overlay to your image with our free online tool. Upload a photo, drop a color gradient on top, and download the result in just a few clicks.

🖼️ Scaling millions of product images? 💡Automate, optimize, and deliver faster. 👉 Talk to a Media Expert

Upload an Image to Add Gradient Overlay

Or drag your image here

Preview

Dimensions: --

Gradient Color

Adjustments

Gradient Strength 50

Direction

Output

Format

Quality

★★★★★

4.8 (26 reviews)

Looking to add gradient overlays in bulk?

GET FREE API

Free Online Gradient Overlay Image Tool

Add gradient overlays in seconds, right in your browser. No downloads needed. Just upload your image and choose your gradient.

Why use our Gradient Overlay Image?

Add gradient overlays right in the browser with no downloads or ads. Developers can also use our API to automate gradient overlays at scale across workflows.

Built for the browser

Work right in your browser, free, with no software to install and no watermarks.

Quality preserved

Cloudinary keeps your image crisp and true to the original, end to end.

Performance Optimization

Your image with a gradient is delivered in the best format and quality for every device, browser, and connection, automatically.

Add gradient overlays in bulk

Process one image or thousands. Use our free API to add gradient overlays automatically across your projects.

Workflow Automation

Set up presets to add gradient overlays automatically on upload, transformed and ready for delivery in seconds.

Format versatility

Works with all major formats, so your image with a gradient looks sharp anywhere you share it.

How to add a gradient overlay in 3 steps

Get your image with a gradient in 3 simple steps. Upload your image, choose your gradient, and download the result in seconds.

Upload your image

Drag and drop your image into the browser, or upload it from your device in seconds.

Choose your gradient

Pick the colors, direction and opacity of the gradient, and preview it over your image.

Download your image with a gradient

Once it’s ready, download your image with a gradient, with no watermarks, ready to share or publish.

Go beyond a basic gradient overlay

A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills. — An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Duration: 1:42

Duration: 0:15

URL:

/ar_0.5,c_fill,g_auto,w_433/q_auto/f_auto/hiking_dog_mountain.jpg

cloudinary.image("hiking_dog_mountain.jpg", {transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ]})

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

CloudinaryImage("hiking_dog_mountain.jpg").image(transformation=[
  {'aspect_ratio': "0.5", 'gravity': "auto", 'width': 433, 'crop': "fill"},
  {'quality': "auto"},
  {'fetch_format': "auto"}
  ])

(new ImageTag('hiking_dog_mountain.jpg'))
	->resize(Resize::fill()->width(433)
->aspectRatio(0.5)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()))
	->delivery(Delivery::format(
	Format::auto()));

cloudinary.url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).imageTag("hiking_dog_mountain.jpg");

cl_image_tag("hiking_dog_mountain.jpg", transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ])

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("0.5").Gravity("auto").Width(433).Crop("fill").Chain()
  .Quality("auto").Chain()
  .FetchFormat("auto")).BuildImageTag("hiking_dog_mountain.jpg")

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("0.5").setGravity("auto").setWidth(433).setCrop("fill").chain()
  .setQuality("auto").chain()
  .setFetchFormat("auto")).generate("hiking_dog_mountain.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).generate("hiking_dog_mountain.jpg");

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

cloudinary.image {
	publicId("hiking_dog_mountain.jpg")
	 resize(Resize.fill() { width(433)
 aspectRatio(0.5F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto()))
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

Frequently Asked Questions

What is the Gradient Overlay Image tool?

The Gradient Overlay Image tool lets you add a color gradient overlay on top of your image, quickly and easily, right in your browser, with nothing to install.

How does the Gradient Overlay Image work?

Upload your image and choose your gradient directly in your browser. The tool processes it and gives you your image with a gradient in seconds.

Is the Gradient Overlay Image free to use?

Yes, the Gradient Overlay Image is free to use online. Just upload your image, choose your gradient, and download the result, with no software required.

Can developers use the Gradient Overlay Image programmatically?

Yes. Developers can use Cloudinary’s API to add gradient overlays and automate gradient overlays across their workflows at scale.

What can I do with the Gradient Overlay Image?

Improve text contrast on banners, create moody backdrops, brand visuals, or stylish social posts.