◆はじめに
本記事ではグラテーションのかかった円形のUIを作成します。
イメージとしては、円の中心から離れるにつれ徐々に透過される円形のグラデーションです。
HTML、CSSを使用します。
◆HTML
簡単にHTMLを作成します。
CSSを当てる予定のdivタグを1つ作成しておきます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="blur-gradient"></div>
</body>
</html>
◆CSS
-
body：widthとheightを指定し、ページ全体に対して横幅と高さを100%に設定します。
また、FlexBoxを指定して、上下中央に子要素を配置しています。 -
blur-gradient：border-radiusプロパティを用いて要素を円形にします。
backgroundプロパティで中心から外側に向かって徐々に色が変化するグラデーション（青⇒透明）をつけています。
index.css
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.blur-gradient {
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(rgb(24, 155, 255) 10%, transparent 100%);
}
