文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > CSSで虹色

CSSで虹色グラデーションを作成

CSSで虹色のグラデーションパターンを作成するには「linear-gradient」や「radial-gradient」利用することで簡単に作成することが出来ます。
当ページでは、虹色のぼかしやグラデーションの濃さ、向きなどを自由に指定しながら実際のデザインを確認することが出来ます。

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

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

虹色の色調整
ぼかし
濃さ
虹色の向き
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
 /* --- 虹色グラデーション --------------------------------- */
.box {
  max-width  : 250px;
  height     : 150px;
  margin     : auto;
                              /* 虹色グラデーション編集CSS  */
  background : linear-gradient(to right,
                               red,
                               orange,
                               yellow,
                               green,
                               aqua,
                               blue,
                               purple);
}
</style>
広告
広告
広告

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

広告
ページTOP

当サイト内の関連するページ

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