linear-gradient

使い方

background: linear-gradient(角度, 開始する色　位置, 中間の色　位置, 終了する色　位置);

金色ボタン

a {
    background: linear-gradient(45deg, #b67b03 0%, #daaf08 45%, #fee9a0 70%, #daaf08 85%, #b67b03 90% 100%);)
}

南国風ボタン

a {
    background: linear-gradient(45deg, #fa6caf 0%, #ffe140 80%, #ffe140 100%);
}

グラデーションの区切り

div {
    background: linear-gradient(0deg, #eda128 0%, #f7a500 30%, #ffe8b9 75%, #d89127 100%);
    background-size: 100% 5px;
}

方眼紙の背景

<div class='grid'>
  ここにテキストを入力する
</div>

.grid {
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
    background-size: 10px 10px;
    background-repeat: repeat;
    background-position: center center;
}

background-imageで横に1pxの1本線、縦に1pxの1本線を引きます。

background-repeatで線をリピートしてマス目にします。

background-sizeで1マスの大きさを決めます。