Gradient Picker

A visual gradient editor with two color pickers and a direction selector. Renders a live preview of the gradient in the admin. Returns a complete CSS linear-gradient() string ready to use directly in a background or background-image declaration.

Settings

Available directions

to right · to left · to bottom · to top · to bottom right · to bottom left · to top right · to top left

Return values

Returns a CSS linear-gradient() string.

$gradient = get_field('hero_background');
// "linear-gradient(to right, #3b82f6, #8b5cf6)"

Returns an empty string if no gradient has been configured.

Usage

Applying as a background via CSS var (preferred)

Write the gradient to a CSS custom property in wp_head, then reference it in your stylesheet.

add_action('wp_head', function () {
    $gradient = get_field('section_gradient');
    if ($gradient) {
        echo '<style>:root { --section-bg: ' . esc_attr($gradient) . '; }</style>';
    }
});

.section {
    background: var(--section-bg);
}

Writing to a CSS custom property

add_action('wp_head', function () {
    $gradient = get_field('brand_gradient', 'option');

    if ($gradient) {
        echo '<style>:root { --brand-gradient: ' . esc_attr($gradient) . '; }</style>';
    }
});

Then in your CSS:

.hero {
    background-image: var(--brand-gradient);
}

Combining with a fallback color

$gradient    = get_field('card_gradient');
$fallback    = get_field('card_color'); // plain hex from another field

$background  = $gradient ?: $fallback ?: '#f3f4f6';

echo '<div class="card" style="background: ' . esc_attr($background) . ';">';

Outputting as a CSS class via <style> block

$id       = get_the_ID();
$gradient = get_field('post_header_gradient');

if ($gradient) {
    echo '<style>.post-header-' . intval($id) . ' { background: ' . esc_attr($gradient) . '; }</style>';
    echo '<div class="post-header post-header-' . intval($id) . '">';
}