A little while ago I had to include a type of gradient effect I hadn’t heard of before, a gradient with an inset. Essentially this meant having the gradient stay a solid colour for say 20% of it and then fade to almost nothing at the end.

The designers point of this was to make some text clearer to the user while still showing a nice background image and maintaining the apps main brand colours. They also wanted the image to be updatable remotely without designer input, so the effect had to be built into the app itself.

Thankfully already having SkiaSharp for Xamarin.Forms included in the project this turned out to be a reasonably simple thing to include and I wrapped it up into a control that can simply be added above an image to achieve the desired effect.

Adding the gradient effect once it was bundled up in a control was as simple as:

The code for the control itself is also pretty simple, with half of it just adding in stock standard property bindings:

And that’s it! So if you find yourself with a designer who wants to take advantage of this sort of approach, or are inspired enough by this very crude example, this is a quick and easy way to keep the colours and imagery you want in your app.

As usual, if you want the entire working example, please have a look here on GitHub.