Gradient Background for an Element via ACF Color Pickers in Oxygen

In the WPDevDesign Facebook group a user asks:

Hi folks, is it possible to use an ACF color picker field (two set up for each post) to generate a background gradient for the single post template for that post type? I have a client who wants a list of brands, and when you click on each brand page, I though it'd be nice to have the brand colours set as a background gradient on the main section background. I can't seem to get the ACF data pulled into the gradient hex fields though. Any ideas? Thanks!

This members-only tutorial provides the steps to add a couple of color picker fields inside a group field using ACF to posts and showing the colors set for each post as the background gradient for a section on the front end.

On the front end:

Step 1

Register a field group attached to Posts having a group-type of field named say, gradient with two sub fields: color_stop_1 and color_stop_2.

Step 2

Edit your posts and set your desired colors for each.

Step 3

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Function] Get Gradient Background

Code: