cman.jp > パーツ作成メニュー > BOXのデザイン > 背景グラデーション

背景色のグラデーション用CSS生成

CSSの「linear-gradient」や「radial-gradient」を使用するとグラデーション色を作成することが出来ます。
当ページでは、実際に見ながら2色・3色、半透明の角度を指定したグラデーションや中心円グラデーションのCSSを作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

いろいろグラデーションを試してみよう

文字は複数行（折返し）にも対応しています。

グラデーションの方向

直線方向正円楕円

横	縦	角度指定
上下		左右

文字の指定

文字
サイズ
上下		左右

BOXのサイズ

幅		高さ

文字色

他▶

透明度

グラデーション開始色

他▶

透明度

グラデーション中間色

中間色を使用する

他▶

透明度

グラデーション終了色

他▶

透明度

Gradation

使用したhtml

<div class="box" id="makeImg">
  <span>Gradation</span>
</div>

生成したCSS

.box {
  position    : relative;
  margin      : auto;                 /* サンプル用 中央寄せ     */
  box-sizing  : border-box;           /* 罫線も含む長さ          */
  border      : 1px solid #ccc;       /* サンプル用 枠線指定     */
  width       : 550px;                /* BOXの幅                 */
  height      : 250px;                /* BOXの高さ               */
  background  : linear-gradient(135deg, #000000, #6498cc, #99ff99);  /* BOXのグラデーション */
}
.box span {
  position    : absolute;             /* 親要素からの絶対位置    */
  display     : inline-block;         /* Transform用にブロック化 */
  color       : #ffffff;              /* 文字色                  */
  font-size   : 24pt;                 /* 文字サイズ              */
  top         : 50%;                  /* 文字位置（縦）          */
  left        : 50%;                  /* 文字位置（横）          */
  transform   : translateY(-50%)
                translateX(-50%);     /* 文字の高さ分ずらす      */
}

ページTOP

色々なグラデーション

球体のグラデーション

正円を利用すると、球体が飛び出ているようなグラデーションも作成することが出来ます。

Gradation

<div class="sample1">
  <span>Gradation</span>
</div>

<style type="text/css">
.sample1 {
  position    : relative;
  margin      : auto;                 /* サンプル用 中央寄せ     */
  box-sizing  : border-box;           /* 罫線も含む長さ          */
  border      : 1px solid #ccc;       /* サンプル用 枠線指定     */
  width       : 412px;                /* BOXの幅                 */
  max-width   : 100%;                 /* 最大のBOX幅             */
  height      : 210px;                /* BOXの高さ               */
  background  : radial-gradient(circle at 50% 50%, #8dff8d, #003300, rgba(0, 51, 0, 0.79));  /* BOXのグラデーション */
}
.sample1 span {
  position    : absolute;             /* 親要素からの絶対位置    */
  display     : inline-block;         /* Transform用にブロック化 */
  color       : #ffffff;              /* 文字色                  */
  font-size   : 18pt;                 /* 文字サイズ              */
  top         : 50%;                  /* 文字位置（縦）          */
  left        : 50%;                  /* 文字位置（横）          */
  transform   : translateY(-50%)
                translateX(-50%);     /* 文字の高さ分ずらす      */
}
</style>

ページTOP

画像にグラデーションを重ねる

画像に半透明にしたグラデーションを重ねることが出来ます。重ねる半透明グラデーションにより画像イメージが変わります。以下では同じ写真に違う色のグラデーションを重ねています。

<div class="sample2">
  <img src="../../image/shizen300.jpg" style="width:100%;max-width:280px;height:auto">
  <div class="c1">1</div>
</div>
<div class="sample2">
  <img src="../../image/shizen300.jpg" style="width:100%;max-width:280px;height:auto">
  <div class="c2">2</div>
</div>
<div class="sample2">
  <img src="../../image/shizen300.jpg" style="width:100%;max-width:280px;height:auto">
  <div class="c3">3</div>
</div>
<div class="sample2">
  <img src="../../image/shizen300.jpg" style="width:100%;max-width:280px;height:auto">
  <div class="c4">4</div>
</div>

<style type="text/css">
 /* --- 親要素 ------------------------------------------------- */
.sample2 {
  position    : relative;
  display     : inline-block;      /* インラインブロック化 */
  margin      : auto;              /* サンプル用 中央寄せ  */
  line-height : 1;
}
 /* --- 画像に重ねるDIV ---------------------------------------- */
.sample2 div {
  position    : absolute;          /* 親要素からの絶対位置 */
  display     : inline-block;      /* インラインブロック化 */
  box-sizing  : border-box;        /* paddingも含む長さ    */
  color       : #ffffff;           /* 文字色               */
  font-size   : 16pt;              /* 文字サイズ           */
  text-align  : right;             /* 文字を右寄せ         */
  padding     : 10px;              /* 文字の余白           */
  width       : 100%;              /* 幅を親枠と合わせる   */
  height      : 100%;              /* 高さを親枠と合わせる */
  top         : 0;                 /* 親要素の上に合わせる */
  left        : 0;                 /* 親要素に左に合わせる */
}
 /* --- 画像に重ねるDIVにグラデーションを付ける ---------- */
.sample2 .c1 {
  background  : linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(166, 255, 77, .3))
}
.sample2 .c2 {
  background  : linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(255, 77, 77, .3))
}
.sample2 .c3 {
  background  : linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(179, 89, 0, .3))
}
.sample2 .c4 {
  background  : linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(0, 127, 255, .3))
}
</style>

ページTOP

グラデーションのアニメーション

グラデーションは単純にアニメーション化することが出来ません。
次のサンプルは、親要素の枠より大きな要素を作成しグラデーションして回転させています。親要素から溢れた部分は非表示とすることで、グラデーションが回転しているように見せることが出来ます。

アニメーションについては以下をご確認ください。
animation 「アニメーション」

Animation

<div class="sample3">
  <div class="c1"></div>
  <span>Animation</span>
</div>

<style type="text/css">
 /* --- 親要素 ------------------------------------------------- */
.sample3 {
  position    : relative;
  margin      : auto;                 /* サンプル用 中央寄せ     */
  box-sizing  : border-box;           /* 罫線も含む長さ          */
  border      : 1px solid #ccc;       /* サンプル用 枠線指定     */
  width       : 100%;                 /* BOXの幅                 */
  height      : 250px;                /* BOXの高さ               */
  overflow    : hidden;               /* 枠から溢れた場合非表示  */
}
 /* --- 親要素の中心に表示する文字 ----------------------------- */
.sample3 span {
  position    : absolute;             /* 親要素からの絶対位置    */
  display     : inline-block;         /* Transform用にブロック化 */
  color       : #ffffff;              /* 文字色                  */
  font-size   : 24pt;                 /* 文字サイズ              */
  top         : 50%;                  /* 文字位置（縦）          */
  left        : 50%;                  /* 文字位置（横）          */
  transform   : translateY(-50%)
                translateX(-50%);     /* 文字の高さ分ずらす      */
}
 /* --- 回転するグラデーション（親要素より大きく定義 ----------- */
.sample3 .c1 {
  position    : absolute;             /* 親要素からの絶対位置    */
  display     : inline-block;         /* Transform用にブロック化 */
  width       : 150%;
  height      : 300%;
  top         : -100%;
  left        : -25%;
  background  : linear-gradient(135deg, #000000, #6498cc, #99ff99);  /* BOXのグラデーション */
  animation   : sample3Anime 3s linear infinite;
}
@keyframes sample3Anime{
   0%{ transform: rotate(0deg) }
 100%{ transform: rotate(360deg) }
}
</style>

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？