Gradient Background For Pseudo-element From ACF Color Pickers in Oxygen

In the past, we covered Gradient Background for an Element via ACF Color Pickers and ACF color picker custom fields to CSS custom properties workflow.

This members-only tutorial provides the steps to display the color stops with a gradient set in ACF Pro's Options page as the background for Notice Bar's (a sitewide section above the header) ::after pseudo-element.

We shall set some transparency so that the gradient is overlayed on top of the background image for the Notice Bar.

Step 1

Install and activate ACF Pro.

Step 2

Let us create an options page.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: ACF Options page

Code:

if ( function_exists( 'acf_add_options_page' ) ) {
	
	acf_add_options_page();
	
}

Set the snippet to run only in admin.

Save changes and activate.

Step 3

Go to Custom Fields > Add New.

Title: Global Options

Add a group-type of field named say, gradient with two Color-Picker-type sub fields: color_stop_1 and color_stop_2.

Add a range-type of field named say, angle. Set the Maximum Value to 360. Append (Appears after the input): deg.

Set the fields to appear on the Options Page.

Step 4

Go to the Options page and select your desired gradient colors.

Ex.: #4dc9e6 and #210cae.

Set your desired angle using the range slider. If this is not set, it will default to to right per our code in the next step.

Step 5

Create a new Code Snippet.

Title: Set Notice Bar's Gradient

Code: