【HTML/CSS】テキストの装飾でグラデーションと境界線を併用したい

Question

PhotpShopでスタイルした下記の画像のようなテキストの装飾をcssで実現したいです。

現在は下記の通り実装しています。

<h1 class="test">test</h1>

.test {
    background: linear-gradient(0deg, rgba(120, 92, 0, 1) 0%, rgba(250, 252, 8, 1) 50%, rgba(120, 92, 0, 1) 100%);
    -webkit-background-clip: text;    
    color: transparent;
    -webkit-text-stroke: 2px #000;
    text-shadow:
        4px 4px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
    -webkit-text-stroke: 2px #FFF;
}

こうすると、グラデーションの部分よりもtext-shadowが上部に表示されてしまい、グラデーションが隠れてしまいます。
グラデーションを適用させつつ境界線を２本（白と黒）装飾したい場合はどうすればいいのでしょうか。

Answer 1

回答

text-shadowの代わりにfilter: drop-shadow()を使用することができます。

.test {
    background: linear-gradient(0deg, rgba(120, 92, 0, 1) 0%, rgba(250, 252, 8, 1) 50%, rgba(120, 92, 0, 1) 100%);
    -webkit-background-clip: text;    
    color: transparent;
    -webkit-text-stroke: 2px #000;
    filter: drop-shadow(4px 4px #000) drop-shadow(-2px 2px #000)
        drop-shadow(2px -2px #000) drop-shadow(-2px -2px #000);
    -webkit-text-stroke: 2px #FFF;
}

もっとも、background-clip: textやtext-stroke、filterと言ったプロパティはレガシーなブラウザ（古いブラウザ）ではサポートされていないため、外部のソフトウェアで装飾した文字をpng、またはsvg形式で出力し、画像として埋め込むことをお勧めします。縁取りも影で擬似的に表現したものより綺麗になります。

デモ

JSFiddleで見る

Comments

[退会済みユーザー]

具体的な解決案や実践的なアドバイスも頂き、とても参考になりました。
ありがとうございます。