JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" placeholder="text-shadow value" value="-4px 11px 8px rgba(30, 43, 2, 0.5)">
    <button>
        Submit!
    </button>
</div>
<br>
<div id="element">
Bacon ipsum.
</div>
<br>
<div id="result">

</div>

CSS

input {
    width: 250px;
}

#element {
    text-shadow : rgba(30, 43, 2, 0.5) -4px 11px 8px;
}

.visible {
    color : red;
}
.notVisible {
    color : green;
}

JavaScript

$('button').click(function(){
	$('#element').css('text-shadow', $('input').val());
  	var test = $('#element').css('text-shadow') == 'none';
    if (!test)
    {
        var text_shadow = $('div#element').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))|(rgba\(.+\))/g);
        test = (text_shadow[3] === undefined);
    }

    $('div#result').html(test ? "Text shadow is hidden" : "Text shadow is visible").removeClass("notVisible", "visible").addClass(test ? "notVisible" : "visible");
});

$('button').click();