Vignette

On this page

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

'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?

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine