?? ?????? ???? ?????? ?????????????????? ???? ?????????????????? ??????????

When it comes to applying a style, Microsoft Lists makes no exceptions: whether it's an Outline style, a basic Flat design or the amazing Neumorphism created by Kristine Kolodziejski ??? for Power Apps and the Design samples of André Lage , we can enrich the interface of our lists to make them even more beautiful and unique.

Thanks to the CSS available in Microsoft Lists, we can apply many graphical effects to customize the elements of a SharePoint list. But how can we also apply a gradient effect to a button, a banner, or to a card thumbnail? Let's do it with a basic example!

Gradient button: how to

Let's say we want to create a button with a gradient effect, perhaps the classic button to open another internal or external resource. Below is an example of the result we want to achieve:

Getting a button like this is pretty easy, since all the few JSON code elements are arranged into a container-content JSON code structure. In 3 steps:

1) A div plays the role of a container

2) A SVG works as a background image

3) A transparent box with "Learn more" clickable text is put on top.

Why a SVG instead of a png or jpg?

Even if it's possible to use other image formats, such as png or jpg, I preferred using a SVG for 2 main reasons: it's very lightweight and it can be resized without losing quality. Generally speaking, SVG is often a better option for decorative website graphics, logos, icons, graphs and diagrams, and other simple images like gradients.

How can we create a custom SVG?

We can use any image editor capable of creating and manipulating SVGs. However, to speed up the process, I preferred to use the following online application: Angry Tools

This web app will allows us to create any SVG based on our taste, through a color picker bar. To save the resulting SVG code, select the SVG tag placed on the right side pane and click on the "Copy" button:

Paste the SVG code into a new Windows Notepad (TextEdit for Mac) and save it with a name, including the .SVG file extension. Alternatively, you can find the SVG I'm using for this example HERE. Now we have a gradient background ready for use in Microsoft Lists!

Save the SVG image to SharePoint

Save the SVG image to a SharePoint folder where other users have at least read access and then take note of its direct path.

JSON formatting

Create a new single line of text column and write a custom title. Open the advanced formatting pane, copy and paste the JSON code sample available HERE. Before saving, replace the dummy text at row n. 11 with your SVG direct path.

Result preview

Each item should have a dedicated gradient button as shown in the preview below:

?? Note: the Learn more text and its link are hardcoded in the JSON sample, but you can change them, so that TxtContent property (row n. 37) and href will point to anything else you want.

Gradients in view formatting

Taking advantage of the same logic used above, it's possible to apply a gradient effect for custom views as well. For example, we could display some cards with different call to action buttons, thanks to the Column Formatter Reference. In this case, two SVG files would be required to get the result shown below:

??Additional info about gradients

There are tons of free resources out there, but if you want to learn more about gradients and how to effectively use them in Microsoft Lists, here is something more in this article.