linear-gradientを重ねたい

Question

リンク内容

↑この画像のように文字に青いグラデーションをかけたうえで、文字に下線のように黄色い線を背景につけたいです。
↓このようなｃｓｓを書いたのですが、うまくいきません。
ｈｔｍｌ↓

<p class="storage-p3">
　　屋外地上タンク貯蔵所が
　　<br>
　　カンタンに設置できます！
</p>
コード

ｃｓｓ↓
```
.storage-p3{
font-size:35px;
line-height:35px;
letter-spacing:1px;
background: -webkit-linear-gradient(top, #35C5FF 0%, #3A60F5 100%);　←青色のグラデーション
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent 60%,#ff0 40%);　←黄色の下線（背景）
background: linear-gradient(transparent 60%,#ff0 40%);
}
コード

青色のグラデーションも黄色い背景の下線もこの書き方で、linear-gradientで、どちらか一方ならうまくいきます。

両方のlinear-gradientを同時に同じテキストに反映させることはできないでしょうか。

ちなみに上記のようではなく、backgroundプロパティの背景複数指定ではできなかったです。
そもそも青色のグラデーションはbackground-clip:textでテキストに反映させるようにしたくて、黄色の方はテキストに反映させるのではない場合、linear-gradientを複数指定した場合、一方にだけテキストに反映ということはできるのでしょうか。

Comments

[m.ts10806]

画像添付したいのでしたらなるべくteratailの画像添付機能を利用してください。

[shunsaku87]

すみません。リンクにしました

[hatena19]

HTMLも提示してください。
また、HTMLコード、CSSコードは、コードタグで囲んでください。
コード部分を選択して、ツールバーの <code> をクリックすればOKです。

[shunsaku87]

すみません。修正しました。

Answer 1

グラデーションは重ねがけ出来ますが、-webkit-background-clip: text;が優先されますので、
それをはみ出して表示はできませんね。

下線は ::before疑似要素 を使って表示させてはどうでしょうか。

<p class="storage-p3">
　　<span>屋外地上タンク貯蔵所が</span>
　　<br>
　　<span>カンタンに設置できます！</span>
</p>

.storage-p3 > span {  
  font-size:35px;
  line-height:35px;
  letter-spacing:1px;
  background: -webkit-linear-gradient(top, #35C5FF 0%, #3A60F5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.storage-p3 > span::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 60%;
  bottom: 20%;
  width: 100%;
  background-color: yellow;
  z-index: -1;
}

Comments

[shunsaku87]

ありがとうございます。希望通りにできました！