Inner text shadow with CSS

后端 未结 22 1375
情深已故
情深已故 2020-11-28 18:07

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):

22条回答
  •  野性不改
    2020-11-28 18:27

    Try this example for inset text shadow. Here's the HTML

    Inset text shadow trick

    and the CSS

    body {
        background: #f8f8f8;
    }
    h1 {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 6em;
        line-height: 1em;
    }
    .inset-text-shadow {
        /* Shadows are visible under slightly transparent text color */
        color: rgba(0,0,0,0.6);
        text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
    
    }
    

    Demo on Jsfiddle

提交回复
热议问题