Impossible to declare box-shadow with wp.customize?

Well i couldnt find any answer all around internet… So, what i did was creating a hidden input where is collecting an array with every box-shadow value. So, when i change only a part of the total box-shadow value, only this part of the array is changed. Of course, each change must be triggered by javascript in that input. I dont know if it’s the best option but it’s the best i can do right now with my knowledge:

class My_customize_shadow extends WP_Customize_Control {
public $type="shadowh1";

public function __construct( $manager, $id, $args = array() ) {
    parent::__construct( $manager, $id, $args );
    $defaults = array(
        'min' => 0,
        'max' => 100,
        'step' => 1,
        'max_color' => 14,
    );
    $args = wp_parse_args( $args, $defaults );

    $this->min = $args['min'];
    $this->max = $args['max'];
    $this->step = $args['step'];
    $this->max_color = $args['max_color'];
}

public function render_content() {
?>
<p id="otec_shadow-button" onclick='jQuery("#shadow-block").slideToggle();'>
SOMBRA
</p>
<div id="shadow-block" style="display:none">
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
    
    <label style="display:block">Sombra Horizontal</label>
    <input id="shadowx" class="range-slider" value="0" min="-50" max="50" step="<?php echo $this->step ?>" type="range">
    
    <label style="display:block">Sombra Vertical</label>
    <input id="shadowy" class="range-slider" value="0" min="-50" max="50" step="<?php echo $this->step ?>" type="range">
    
    <label style="display:block">Profundidad de sombra</label>
    <input id="shadowz" class="range-slider" value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type="range">
    
    <label style="display:block">Extensión de sombra</label>
    <input id="shadoww" class="range-slider" value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type="range">
    
    <label style="display:block">Color de la sombra</label>
    <input id="shadowc" type="text" placeholder="Escriba su código HTML">
    
    <a style="display:block" href="https://orbitalthemetips.com/colorpicker" target="__blank">color picker</a>
    
    <script>
    jQuery(document).ready(function(){
        let sombra = jQuery("#envio").val();
        let shadow = [];

        console.log(sombra);

        if(sombra == 0){
            shadow = ['0', '0', '0', '0', 'transparent'];
        }else{
            shadow = sombra.split(" ");
            for(let i = 0; i < 5; i++){
                shadow[i] = shadow[i].replace("px", "");
            }
        }
        
        jQuery("#shadowx").val(shadow[0]);
        jQuery("#shadowy").val(shadow[1]);
        jQuery("#shadowz").val(shadow[2]);
        jQuery("#shadoww").val(shadow[3]);
        jQuery("#shadowc").val(shadow[4]);
        

        let shadows = ["#shadowx", "#shadowy", "#shadowz", "#shadoww", "#shadowc"];
        
        jQuery(shadows).each(function(i, e){
            jQuery(e).change(function(){
                shadow[i] = jQuery(this).val();
                jQuery("#envio").val(shadow[0] + 'px ' + shadow[1] + 'px ' + shadow[2] + 'px ' + shadow[3] + 'px ' + shadow[4]);
                jQuery("#envio").trigger('change');
            })
        })
        
    })
    </script>

    <input id="envio" type="hidden" <?php echo $this->link(); ?> 
value="jQuery("#envio").val()">
    
</div>
<?php
}
}