Radial gradient highlighter

How to use it

Use a radial gradient on an element, with the lighter end of the gradient on the inside.

When to use it

If you have an element that has something at its centre that you want to highlight, you can add a radial gradient as the background and make the middle of that element subtly lighter. In the example below I've used it to highlight the icon in the middle of a button, which catches a user's attention and invites them to tap the button.

What to watch out for

If the lighter colour in the gradient is too light, it'll make the radial gradient very obvious. This effect still works even if the gradient is not obvious.

Make sure the lighter part of the gradient does not lower the contrast between the background and whatever you're trying to highlight.

Examples

Example