HTMLとCSSのコピペでできる背景デザイン11選

PhotoshopやIllustratorは今でもデザイナーにとっては必需品に近いものですが、Webに限って言えば背景やパターンやグラデーション、シェイプなど、それらは簡単にCSSでできてしまいます。

そんなCSSを再度学び直しをしていますが、やはりめちゃめちゃ奥が深いと感じる今日この頃・・。

かかかず

CSS職人の方々には尊敬の念を抱きます。

そんな前置きがありつつも、この記事の背景デザインはHTMLとCSSで作っています。自分への備忘録的な部分が強いですが、ご覧頂き、その中でいいものがあればコピペして使ってくれると嬉しいです。

背景のアニメーション系装飾
模様やパターンの背景装飾
画像を使った背景の装飾
さいごに

背景のアニメーション系装飾

まずは、動きがあるアニメーション系の背景です。

かかかず

比較的グラデーションぽいものが多いです。

背景の色が徐々に変わる

CSSの animation プロパティで、背景色が10秒かけて変わるスニペットです。このスニペットは、@keyframes で背景色をそれぞれ定義して、徐々に色が変わっていく様子を表現します。

コードを表示する

HTML

<div class="colorchange_bg"></div>

CSS

/* 背景カラーが変化 */
.colorchange_bg {
  height: 250px;
  margin: 30px 0;
  animation: colorchange-color 10s infinite;
}

@keyframes colorchange-color {
  0%, 100% {
    background-color: #6bb6ff;
  }
  25% {
    background-color: #1abc9c;
  }
  50% {
    background-color: #9b59b6;
  }
  75% {
    background-color: #85e3ec;
  }
}

グラデーションの背景がアニメーションで変わる

グラデーションは、CSSプロパティbackground で、線形のグラデーションを表現できる linear-gradient を使います。

かかかず

この後にも linear-gradient がいっぱい出てきます。便利です。

これに animation の background-position で、infinite の左から右にループ移動をさせます。

コードを表示する

HTML

<div class="colorchangeanime_bg"></div>

CSS

/* グラデーションをアニメーションで切り替え */
.colorchangeanime_bg {
  height: 250px;
  margin: 30px 0;
  background: linear-gradient(45deg, #6bb6ff 0%, #2b52ff 50%, #85e3ec 100%) 0 0 / 200% 100% repeat;
  animation: colorchangeanimation-bg 5s infinite alternate;
}

@keyframes colorchangeanimation-bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

放射状のグラデーションが左右に動く

上記の線型グラデーションの linear-gradient を、円形で放射状のグラデーション radial-gradient にしたアニメーションです。ちなみにグラデーションの色味を作る時、フェーダーで簡単に調整ができる以下のサイトが便利です。

外部リンク CSS Gradient

コードを表示する

HTML

<div class="colorchangeanime2_bg"></div>

CSS

/* 放射状が左右に動く */
.colorchangeanime2_bg {
  height: 250px;
  margin: 30px 0;
  background: rgb(0,112,217);
background: radial-gradient(circle, rgba(0,112,217,1) 0%, rgba(62,252,248,1) 100%) 0 0 / 200% 100% repeat;
  animation: colorchangeanimation-bg2 5s infinite alternate;
}

@keyframes colorchangeanimation-bg2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

模様やパターンの背景装飾

ここからは、模様やパターンを利用した背景です。

ここまでのアニメーション系のものとは異なり、動きはないのでエレメントを重ねてのせるにはこっちの方が汎用性は高いです。

左右ツートーンカラーの背景

中央で色が分かれるツートーンカラーも、線型グラデーションの linear-gradient を使って、それぞれの色を50％・50％で指定します。そして、90deg で傾ければツートーンの背景が出来上がります。

コードを表示する

HTML

<div class="twotonecolor"></div>

CSS

/* ツートーン */
.twotonecolor {
  height: 250px;
  margin: 30px 0;
  background: linear-gradient(90deg, #6bb6ff 50%, #7cf1ff 50%);
}

縦ツートーンカラーの背景

上記のlinear-gradient の傾きをつけずに、そのまま縦方向にツートーンにした背景です。

コードを表示する

HTML

<div class="twotonecolor_vertical"></div>

CSS

/* 縦ツートーン */
.twotonecolor_vertical {
  height: 250px;
  margin: 30px 0;
  background: linear-gradient(0deg, #6bb6ff 50%, #7cf1ff 50%);
}

斜めストライプ

斜めのストライプは、繰り返しグラデーションの repeating-linear-gradient を使います。基本的な書き方は、repeating-linear-gradient(方向・色位置・色位置)で書きます。

コードを表示する

HTML

<div class="nanamestripe"></div>

CSS

/* 斜めストライプ */
.nanamestripe {
  height: 250px;
  margin: 30px 0;
  background: repeating-linear-gradient(-45deg, #ddd 0, #ddd 2px, #FFF 4px, #FFF 6px);
}

ジグザグの背景

ジグザグは、線型グラデーションの linear-gradient を4つ書いてジグザグにします。CSSにlinear-gradient が4つ並んでいますが、上から順にジグザグを形取る左上→右上→右下→左下の要素を指定します。

かかかず

ちなみにジグザグの線を細くするには、25％の箇所を35%までの範疇でいじると太さが変わります。

コードを表示する

HTML

<div class="zigzag_bg"></div>

CSS

/* ジグザグの背景 */
.zigzag_bg {
  height: 250px;
  margin: 30px 0;
  background: linear-gradient(135deg, #6bb6ff 25%, transparent 25%) -50px 0,
  linear-gradient(225deg, #6bb6ff 25%, transparent 25%) -50px 0,
  linear-gradient(315deg, #6bb6ff 25%, transparent 25%),
  linear-gradient(45deg, #6bb6ff 25%, transparent 25%);	
  background-size: 2em 2em;
  background-color: #8dc7ff;
}

チェッカーフラッグ柄の背景

チェッカーフラッグ柄の背景は、repeating-linear-gradient の繰り返しを使います。一個一個のブロックの大きさは、background-position と background-size で調整できます。

コードを表示する

HTML

<div class="checkerflag_bg"></div>

CSS

/* チェッカーフラッグ */
.checkerflag_bg {
    height: 250px;
    margin: 30px 0;
    background-image: repeating-linear-gradient(45deg, #313131 25%, transparent 25%, transparent 75%, #313131 75%, #313131),
   repeating-linear-gradient(45deg, #313131 25%, #FFF 25%, #FFF 75%, #313131 75%, #313131);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
}

それ以外のデザイン・パターン

それ以外に、シンプルで汎用性の高い背景を以下の記事にまとめています。

困った人

そんなにゴリゴリの背景はいらないよ・・・

そんな方は、シンプルめな背景が多い以下記事をご覧ください。

2021年1月21日コピペでできるHTMLとCSSの背景と基本のデザインテンプレ

画像を使った背景の装飾

画像を使った背景の装飾です。

背景画像にグラデーションオーバーレイ

背景画像へ linear-gradient の横方向グラデーションも、beforeなどの擬似要素を使わず少ないコードで書くことができます。

コードを表示する

HTML

<div class="colorchangeimg_bg"></div>

CSS

/* 背景画像にグラデオーバーレイ */
.colorchangeimg_bg {
  height: 250px;
  margin: 30px 0;
  background: linear-gradient(270deg, rgba(0,112,217,0.3) 0%, rgba(62,252,248,0.3) 100%),
  url(https://dubdesign.net/wp-content/uploads/2021/08/serverpage_eyecatch.jpg);
  background-size: cover;
  background-position: center;
}

スクロールして縦に流れる背景

背景は、movingbg のclassで画像を指定して、それをループアニメーションが可能なCSSのanimation プロパティで動かしています。動きの方向は、@keyframes の background-position で指定します。

コードを表示する

HTML

<div class="movingbg vertical"></div>

CSS

/* 背景動き縦 */
.movingbg {
  height: 250px;
  margin: 30px 0;
  background-image: url(https://dubdesign.net/wp-content/uploads/2021/11/1298bg.jpg);
}
.vertical {
  animation: vertical 6s linear infinite;
}
@keyframes vertical {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 250px;
  }
}

スクロールして横に流れる背景

上記の縦スクロールを横方向に変えた背景です。横方向へのスクロールは、@keyframes で指定します。

コードを表示する

HTML

<div class="movingbg horizon"></div>

CSS

/* 背景動き横 */
.movingbg {
  height: 250px;
  margin: 30px 0;
  background-image: url(https://dubdesign.net/wp-content/uploads/2021/11/1298bg.jpg);
}

.horizon {
  animation: horizon 6s linear infinite;
}
@keyframes horizon {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 315px 0;
  }
}