JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div class="kutu">

     <h1>CSS INSET <br>
        TEXT-SHADOW</h1> 
</div>

CSS

.kutu {
   background: #a7a8a3;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7a8a3', endColorstr='#a7a8a3');
   background: -ms-linear-gradient(top, #a7a8a3 100%, #a7a8a3 50%, #a7a8a3 51%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #a7a8a3), color-stop(50%, #a7a8a3), color-stop(51%, #a7a8a3));
   background: -moz-linear-gradient(top, #a7a8a3 100%, #a7a8a3 50%, #a7a8a3 51%);
   background: -o-linear-gradient(top, #a7a8a3 100%, #a7a8a3 50%, #a7a8a3 51%);
   background: linear-gradient(top, #a7a8a3 100%, #a7a8a3 50%, #a7a8a3 51%);
   padding: 20px 20px;
   text-align:center; 
   /* Yazı gölgesi 2px sağa ve 2px aşağıya kaydırılmış
    Gölge rengi arkaplan renginden biraz daha açık olduğu için 
    göz yanılması gibi görünüyor. */
   text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.3);
   color: #5e5e5e;
   font: bold 28px Georgia, Serif;
}