Cool CSS 3D Text Hover Effect | CSS Animation Effect

 

HTML

<h2>convivial</h2>


CSS 

body { margin: 0; padding: 0; background: deepskyblue; } h2 { text-align: center; font-size: 150px; color: deepskyblue; font-family: arial; font-weight: bold; transition: .5s; text-transform: uppercase; margin-top: 5%; text-rendering: optimizeLegibility; -webkit-text-stroke: 1px #f1f1f1; padding-top: 14%; } h2:hover{ text-shadow: -1px -1px 1px #ddd, 0px 1px 0 #ddd, 0px 2px 0 #ddd, 0px 3px 0 #ddd, 0px 4px 0 #ddd, 0px 5px 0 #ddd, 0px 6px 0 #ddd, 0px 7px 0 #ddd, 0px 8px 0 #ddd, 0px 9px 0 #ddd, 0px 10px 0 #ddd, 0px 11px 0 #ddd, 0px 12px 0 #ddd, 0px 13px 0 #ddd, 0px 14px 0 #ddd, 0px 15px 0 #ddd, 10px 25px 35px rgba(0, 0, 0, 0.9); }