オーガニック CSS Blob Shape Generator
CSS の境界線の半径を視覚的にデザインします。ピクセルまたはパーセント単位の 4 つの独立したコーナー スライダー、インスタント サークルと錠剤のリンクオールコーナー ショートカット、さらにランダム化された形状の有機ブロブ モードを備えています。
処理中...
0%
結果
このページでは、すでにロードされている有機的なシェイプを使用して、境界線半径ジェネレーターをブロブ モードで直接開きます。四角い角や完全な円はなく、CSS のみから構築された柔らかい不規則なアウトラインだけです。いつでも「ランダム化」をクリックして、新鮮なバリエーションを作りましょう。
すべての CSS BLOB の背後にあるトリックは、8 値のスラッシュ構文です。border-radius は、スラッシュで区切られた 4 つのパーセンテージのセットを 2 つ受け入れます。最初のセットは水平方向の半径を曲線にし、2 番目のセットは垂直方向の半径を曲線にします。 2 つのセットの不一致は、まさに単純な角丸長方形の対称性を壊して有機的な輪郭を形成することになります。
このような BLOB は、無数の最新のランディング ページのヒーロー画像、アバター、イラストの背後の空きスペースを埋めます。これはまさに、ライブラリや SVG エクスポートが必要なく、CSS が 4 行あるためです。現在の形状をコピーするか、レイアウトに適した形状になるまでランダム化を続けます。