JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/805914/kinetic.js"></script>
<div id="canvasDiv"></div>

JavaScript

window.stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 400,
    height: 400,
    draggable: false,
    pixelRatio : 1
});

window.layer = new Kinetic.Layer();    

var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 80,
    height: 80,
    
    fillPriority: 'radial-graident',
    fillRadialGradientStartPoint: 0,
    fillRadialGradientStartRadius: 0,
    fillRadialGradientEndPoint: 0,
    fillRadialGradientEndRadius: Math.sqrt(2) * 80 / 2,
    fillRadialGradientColorStops: [0, 'white', 1, 'silver'],
    
    shadowBlur: 2,
    shadowColor: 'grey',
    shadowOpacity: 0.5,
    shadowOffset: 5,
    shadowEnabled: false,
    
    stroke: 'grey',
    strokeWidth: 1.1,
    cornerRadius: 10
});

rect.on('mouseover', function(e) {
    e.targetNode.enableShadow();
    window.layer.draw();
});

rect.on('mouseout', function(e) {
    e.targetNode.disableShadow();
    window.layer.draw();
});

window.layer.add(rect);
window.stage.add(window.layer);