Defining gradients in the panel (Color field)

Kirby 4 Solved ✔️
,
1

Hey!
I’ve been looking into color fields in the panel in order to allow the user to change the background color of certain elements. I was wondering if the same could be done with predefined gradients? To have something like this:

color:
  type: color
  options:
    "#A370FF": "Purple"
    "linear-gradient(180deg, #fff 30%, #D6FF30 100%)": "Yellow Fade"

Is there a way to achieve something like this?

2

Or do I need to create two different color variables and do something like:

<?php if ($background1 = $page->color1() && $background2 = $page->color2()) : ?>
    <style type="text/css">
     .element { 
       background: linear-gradient(180deg, <?php echo $background1 ?> 30%, <?php echo $background2 ?> 100%);
      }
    </style>
  <?php endif; ?>
3

That’s not a valid color code, you would indeed have to calculate the gradient from two color a and b.