ブロブは、不規則でありながら滑らかなエッジを持つ柔らかいオーガニック形状で、2020年以降の無数のヒーロー背景、アバター、セクション装飾の背後にあるデザイントレンドです。定番のCSSテクニックは、8値のborder-radiusで普通の長方形をオーガニックな形に曲げます。
「ランダム生成」で新しい形を作り、曲率スライダーでエッジを丸くまたは個性的にし、色を選びます。border-radiusコードをCSSにそのままコピー——画像なし、SVGファイルなし、完全レスポンシブ。
Frequently Asked Questions
Q: border-radiusのブロブテクニックの仕組みは？
border-radiusのブロブテクニックの仕組みは？8値構文 border-radius: a b c d / e f g h は各コーナーに異なる水平・垂直半径を設定します。非対称な値が長方形を滑らかなオーガニック形状に歪めます。
Q: ブロブはアニメーションできますか？
ブロブはアニメーションできますか？はい。@keyframesやtransitionで2つのオーガニック値セットの間でborder-radiusをアニメーションすると、形が滑らかに変形します——特徴的な「モーフィングブロブ」効果です。
Q: ブロブは2026年もトレンドですか？
ブロブは2026年もトレンドですか？はい。オーガニック形状は2020年のトレンドから現代デザインの定番へと進化しました。StripeやVercel、無数のSaaSヒーローで見られます。グラスモーフィズムやグラデーションと完璧に調和します。
Q: ブロブにはSVGとCSSのどちら？
ブロブにはSVGとCSSのどちら？CSSのborder-radiusは軽量で編集しやすく、装飾背景に最適です。SVGパスはロゴやイラスト向けに正確な制御ができますが、複雑さのコストがあります。
Q: ブロブを背景として使うには？
ブロブを背景として使うには？ブロブのborder-radiusを持つposition指定のdivを作り、低いz-indexを設定し、グラデーション塗りと任意のぼかしを加え、コンテンツをその上に配置します。ゆっくりアニメーションさせて「生きた背景」に。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。