linear-gradient 線形グラデーション コピペで使えるHTML+CSS

スポンサーリンク

linear-gradient関数の概要

線形グラデーションCSS
linear-gradient()
目的backgroundなどについて、グラデーション
使用<div> <span> など背景を持つ要素について
関連background
初期
linear-gradient(to top,#ff0000 0%, #0000ff 50%)
<div style="width: 80%; height: 100px; background: linear-gradient(to top,#ff0000 0% ,#0000ff 50%); margin: auto;">
  <span style="color: #ffffff;">linear-gradient(to top,#ff0000 0%, #0000ff 50%)</span>
</div>

linear-gradient( 方向, 色 始点, 色 終点 )

#ff0000 が赤 #0000ffが青

方向

上へ向かうグラデーション
 
linear-gradient(to top,#ff0000 0%, #0000ff 50%)
右上へ向かうグラデーション
 
linear-gradient(to top right,#ff0000 0%, #0000ff 50%)
右へ向かうグラデーション
 
linear-gradient(to right,#ff0000 0%, #0000ff 50%)
右下へ向かうグラデーション
 
linear-gradient(to bottom right,#ff0000 0%, #0000ff 50%)
下へ向かうグラデーション
 
linear-gradient(to bottom,#ff0000 0%, #0000ff 50%)
左下へ向かうグラデーション
 
linear-gradient(to bottom left,#ff0000 0%, #0000ff 50%)
左へ向かうグラデーション
 
linear-gradient(to left,#ff0000 0%, #0000ff 50%)
左上へ向かうグラデーション
 
linear-gradient(to top left,#ff0000 0%, #0000ff 50%)
プラス角度を指定するグラデーション
 
linear-gradient(5deg,#ff0000 0%, #0000ff 50%)
マイナス角度を指定するグラデーション
 
linear-gradient(-5deg,#ff0000 0%, #0000ff 50%)

透過する
 
linear-gradient(to top,#ff0000 0%, transparent 50%)

始点と終点

始点終点 ※グラデーションが下から30%からスタート
 
linear-gradient(to right,#ff0000 30%, #0000ff 70%)

lienear-gradient関数を使ったデザイン

蛍光ペンでマーカーを引く

リアルな蛍光マーカーを引く コピペで使えるHTML+CSS
文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現!