Vignette

A vignette (dark edges) can be added around an image. You're able to control the amount of vignette and its color.

Demo
Color
Value
https://demo.sirv.com/lady.jpg?&vignette.color=575C60&vignette.value=35

'vignette.value' controls how far into the image the vignette appears. It is set with a number from 0 to 100. The default is 20.

https://demo.sirv.com/vase.jpg?vignette.value=50

Vignette on image (50)

'vignette.color' sets the color of the vignette. The values are set with hex RGB/RGBA or an HTML color name.

https://demo.sirv.com/vase.jpg?vignette.color=red

Red vignette applied as HTML color name

If you set the color with a hex value, don't include a '#' character in the URL. For example:

https://demo.sirv.com/vase.jpg?vignette.color=ff0000

Red vignette applied as hex value

Here are examples of 'vignette.value' and 'vignette.color' together:

https://demo.sirv.com/vase.jpg?vignette.color=blue&vignette.value=50

Blue 50%-vignette on image

https://demo.sirv.com/vase.jpg?vignette.color=ff8c00&vignette.value=100

Colored 100%-vignette

https://demo.sirv.com/vase.jpg?vignette.color=ffffff&vignette.value=40

White 40%-vignette

Was this article helpful?

Array

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine