グラデーションの上にグラデーションを重ねたい

Question

前提・実現したいこと

background:linear-gradient(to right, #ff8177 0%, #b12a5b 100%);

background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #rgba(255,255,255,.5) 100%);

両方同じ要素に使いたいです。
色の付いたグラデーションを、下にいくほど薄くしたいのですが、画像を使わずCSSのみで可能でしょうか？

<div class="box">
	<div class="box2">
	省略
	</div>
</div>

.box{
	background:linear-gradient(to right, #ff8177 0%, #b12a5b 100%);
	width:100%;
	padding:50px 0;
}
.box2{
	background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #rgba(255,255,255,.5) 100%);
}

こうしてみましたが、paddingのせいか、box2の中身の部分だけしかできませんでした。

Answer 1

試しにbackgroundの複数指定をしてみよう.

.box2{
    background-image:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%), linear-gradient(to right, #ff8177 0%, #b12a5b 100%);
    background-size: 100% 100%, 100% 100%;
}

Answer 2

paddingのせいか、box2の中身の部分だけしかできませんでした。

親と子の高さが違うので、重なりません。

親の「box1」padding:50px 0;によって、「box2」のコンテンツの高さが、テキスト分しかありませんので、グラデーションを親要素全体に被せるには、「box2」のコンテンツの高さを、親の「box1」と揃える必要があります。

親でなく子にpaddingを設定すると良いと思います。

.box{
  background:linear-gradient(to right, #ff8177 0%, #b12a5b 100%);
  width:100%;
}

.box2{
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
  padding: 50px 0; 
}

※ご提示のコードには、色指定の誤りがありましたので、rgbaの前の#は省いています。

Comments

[sakura__]

本当にありがとうございます！
思い通りにできました！

[yoshinavi]

解決されて何よりです。
(^^)

「親でpadding設定すると、子の高さをheight: 100%;にしていても、親と同じ高さにならない」
･･･これは実は私も結構「見落とし」ていて、「あれっ？」と思う部分です。･･･
(^^;)