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

CSSでドット柄(水玉模様)を作成

CSSでドット柄・水玉模様のパターンは「radial-gradient」と背景の繰り返し機能を利用することで簡単に作成することが出来ます。
当ページでは、ドットの色や大きさ、間隔などを自由に指定しながら実際のデザインを確認することが出来ます。

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

いろいろドット柄・水玉模様を試してみよう

ドット(水玉)の指定
サイズ
滑らか
間隔
グラデーション
ドット(水玉)の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
 /* --- ドット(水玉)背景のBOX定義 ---------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                      /* ドット(水玉)模様のCSS */
  background-color   : #ffffff;
  background-image   : radial-gradient(#ff7f7f 30%, transparent 33%),
                       radial-gradient(#ff7f7f 30%, transparent 33%);
  background-position: 0 0, 30px 30px;
  background-size    : 60px 60px;
}
</style>
広告
広告
広告

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

広告
ページTOP

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

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