どうも7noteです。CSSで水玉模様を作ります。

背景パターンを画像で作るのもいいですが、CSSで再現することもできます。

規則性のある水玉模様の背景

style.css

body {
  background-image:
    radial-gradient(#7bded9 20%, transparent 20%),
    radial-gradient(#7bded9 20%, transparent 20%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

結果

ランダム風に見える水玉模様の背景

style.css

body {
        background-image:
            radial-gradient(290px 300px , rgba(123,222,217, 0.5) 20%, transparent 20%),
            radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%),
            radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%),
            radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
            radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%),
            radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%);
        background-size: 
            1230px 1280px,
            810px 910px,
            1470px 990px,
            1200px 1700px,
            1520px 1200px,
            1100px 1300px;
        background-position: 
            -300px -550px,
            -200px 100px,
            50px 510px,
            -200px -550px,
            -180px -250px,
            130px -150px;
}