文字の画像(イメージ)化
cman.jp 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

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

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

1
2
3
4
<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>
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン