Open1

逆引き: CSS

ヒカルヒカル

グラデーション

html
<!-- グラデーションコンテナ -->
<div class="app-gradient-container">
  <img src="..." alt="" />

  <!-- グラデーション -->
  <div class="app-gradient-top"></div>
  <div class="app-gradient-left"></div>
</div>
scss
// グラデーション
.app-gradient-container {
  position    : relative;
  $SHADOW-SIZE: 50px;
  $SHADOW-BGCOLOR: #fff;

  // グラデーション: 上部
  .app-gradient-top {
    content : "";
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : $SHADOW-SIZE;
    background: linear-gradient(180deg,
      rgba($SHADOW-BGCOLOR, 1),
      rgba($SHADOW-BGCOLOR, 0)
    );
  }

  // グラデーション: 左部
  .app-gradient-left {
    content : "";
    position: absolute;
    top     : 0;
    left    : 0;
    width   : $SHADOW-SIZE;
    height  : 100%;
    background: linear-gradient(90deg,
      rgba($SHADOW-BGCOLOR, 1),
      rgba($SHADOW-BGCOLOR, 0)
    );
  }
}