• Components
  • CldImage
  • Configuration

CldImage Configuration

General Props

Prop NameTypeExample
cropstring"thumb"
gravitystring"faces"
overlaysarraySee Below
rawTransformationsarray['e_blur:2000']
removeBackgroundbool/stringtrue
textstring"Next Cloudinary"
transformationsstring/array['my-named-transformation']
underlaystring"my-public-id"
underlaysarraySee Below
zoomstring0.5
zoompanbool/string/objectSee Below

Misc props

Prop NameTypeDefaultExample
qualitystring"auto""90"
formatstring"auto""webp"
deliveryTypestring"upload""fetch"

Effect Props

Prop NameTypeExample
artstring"al_dente"
autoBrightnessbool/stringtrue, "80"
autoColorbool/stringtrue, "80"
autoContrastbool/stringtrue, "80"
assistColorblindbool/stringtrue, "20", "xray"
blackwhitebool/stringtrue, "40"
blurbool/stringtrue, "800"
blurFacesbool/stringtrue, "800"
blurRegionbool/stringtrue, "1000,h_425,w_550,x_600,y_400"
brightnessbool/stringtrue, "100"
brightnessHSBbool/stringtrue, "100"
cartoonifybool/stringtrue, "70:80"
colorizestring"35,co_darkviolet"
contrastbool/stringtrue, "100", "level_-70"
distortstring"150:340:1500:10:1500:1550:50:1000", "arc:180.0"
fillLightbool/stringtrue, "70:20"
gammabool/stringtrue, "100"
gradientFadebool/stringtrue, "symmetric:10,x_0.2,y_0.4"
grayscalebooltrue
improvebool/stringtrue, "50", "indoor"
negatebooltrue
oilPaintbool/stringtrue, "40"
outlinebool/stringtrue, "40", "outer:15:200"
pixelatebool/stringtrue, "20"
pixelateFacesbool/stringtrue, "20"
pixelateRegionbool/stringtrue, "35,h_425,w_550,x_600,y_400"
redeyebool/stringtrue
replaceColorstring"saddlebrown", "2F4F4F:20", "silver:55:89b8ed"
saturationbool/stringtrue, "70"
sepiabool/stringtrue, "50"
shadowbool/stringtrue, "50,x_-15,y_15"
sharpenbool/stringtrue, "100"
shearstring"20.0:0.0"
simulateColorblindbool/string"deuteranopia"
tintbool/stringtrue, "100:red:blue:yellow"
unsharpMaskbool/stringtrue, "500"
vectorizebool/stringtrue, "3:0.5"
vibrancebool/stringtrue, "70"
vignettebool/stringtrue, "30"

View the Cloudinary docs to see learn more about using effects.

Overlay Props

The overlays prop is an array of objects with the following configuration options:

Property NameTypeExample
effectsarraySee Below
positionobjectSee Below
publicIdstring"thumb"
textobjectstring
urlstring"https://.../image.jpg"

The position property can include:

Property NameTypeExample
anglenumber45
gravitystring'"north_west"'
xnumber10
ynumber10

Objects in the effects array can include:

Property NameTypeExample
aspectRatiostring"3.0"
cropstring10
gravitystring'"north_west"'
heightnumber'600'
widthnumber'600'

The text property can include:

Property NameTypeExample
borderstring"20px_solid_blue"
colorstring"blueviolet"
fontFamilystring"Open Sans"
fontSizenumber48
fontWeightstring"bold"
letterSpacingnumber"14"
lineSpacingnumber"14"
strokebooltrue in coordination with Border
textDecorationstring"underline"
Last updated on November 29, 2022