Blobデザイン背景をCSSで作成できるWebサービス 『Gradient Blob』

Blobデザインな背景をCSSで作成できる

Web「Gradient Blob」

グラデーションなBlobデザインで

背景にオシャレな演出をCSSで実現できます。

gradientblob3

Gradient Blob リンク先はこちらから

gradientblob1

上記リンク先を開くと左側に設定パネル、

画面右側がプレビューになっています。

プリセットされた配色を選択

Random blendボタンで様々なパターンを

作ってくれます。

その下はダークモードへの切替、

テキストプレビューの表示の有無が選択できます。

blurは背景のぼかし具合を調整、

Radiusは背景のボックスの丸み度が調整できます。

gradientblob2

Blurを弱めるとかなりくっきりします。

これはこれでイイ感じです。

出来上がったらCSSコードをコピーして

要素に適用するだけで使えます。

すでに用意された要素に適用する場合には

CSSコードの最後のチェック
Include box size & Border-radiusを

外しておく方がいいと思います。

手軽にBlobデザインなオシャレな背景を

作る事ができるWebサービスです。

  • コメント: 0

マウスカーソルに流れるような描画を付けてカーソルを見失わなくなる拡張機能 『CursorTrace』前のページ

流れるグラデーション背景をCSSで実現できるWebサービス 『CSS Gradient Animator』次のページ

関連記事

  1. Web制作ツール

    サクッとロゴが作れるネットサービス Supalogo カッコ良いロゴが作れるかも

    あっという間にロゴが作成できるネットサービステキスト、フォント…

  2. Web制作ツール

    美しくすりガラスの様な背景をCSSで実装、ジェネレートできるWebサービス 『Glass UI Ge…

    美しいデザイン、すりガラスの様な背景をCSSで実装できるWebサー…

  3. Web制作ツール

    無料で見やすい!!ヒートマップ解析もできる無料アクセス解析サービス『Pt engine』

    無料で使えるアクセス解析サービス無料で月に10万PVまで、1サ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP