ブロック全体に背景色を付けるのではなく、ブロックの一部にだけ色をつけたい、という状況があったので、方法を考えてみた。 目的: こんな感じで、青い背景を灰色のブロックの全体ではなく、左側だけに表示したい。 2017/08/16追記 @oreoさんから紹介していただきましたが以下の方法で簡単に実現できました。 CSSの線形グラデーション(linear-gradient) https://codepen.io/oreo/pen/jLabE 手っ取り早く動作確認したい方はこちら やりかた 例えば、以下の図のようにブロックの左側に色をつけたい場合の指定方法。 containerというクラスの中に、background-blueという青の背景色を担当する要素とcontentsというメインのブロックがある。 背景担当のbackground-blueはabsoluteにしてcontentsと重なるようにす