Search the Community

I'm trying to create drop-shadow effect using CSS for a Unipanel or HTMLFrame. Even though I align it with margins, the shadow effect is somehow cropped. You can see at the bottom right corner of the image below. Border and gradient works ok. But the shadow looks like masked by some kind of border. I have tried to place this HTMLFrame inside a TUniContainerPanel with margins but it is still the same. What is the trick to do this? Any help will be really really appreciated. I spent my last four hours on this. Here is my CSS : '.panel_graph_parent { ' + ' border-radius: 14px !important; ' + ' padding: 20px !important; ' + ' border: 2px solid #e5e5e5 !important; ' + ' opacity: 0.95; ' + ' background:#ffffff; ' + ' background: ' + ' -moz-linear-gradient(top, #ffffff 0%, #fefefe 100%); ' + ' background: ' + ' -webkit-gradient(linear, left top, left bottom, ' + ' color-stop(0%,#ffffff), color-stop(100%,#fefefe)); ' + ' background: ' + ' -webkit-linear-gradient(top, #ffffff 0%,#fefefe 100%); ' + ' background: ' + ' -o-linear-gradient(top, #ffffff 0%,#fefefe 100%); ' + ' background: ' + ' -ms-linear-gradient(top, #ffffff 0%,#fefefe 100%); ' + ' background: ' + ' linear-gradient(to bottom, #ffffff 0%,#fefefe 100%); ' + ' filter: progid:DXImageTransform.Microsoft.gradient( ' + ' startColorstr="#ffffff", endColorstr="#fefefe", ' + ' GradientType=0 ); ' + ' -webkit-box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85); ' + ' -moz-box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85); ' + ' box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85); ' + '}