吹き出し、シャドウ、グラデーションのCSSジェネレーター

Webデザイナー・htmlコーダー向けの便利なCSSジェネレーターのご紹介です。

吹き出しジェネレーター – cssarrowplease

CSS3の吹き出しを作成できます。矢印の位置やボーダーの色、大きさなどのデザインもジェネレーター上で編集できます。

Screenshot of cssarrowplease.com

CSS filter ジェネレーター – BestAgencies

filter プロパティを利用した表現を、実行結果を見ながら調整し、CSSを作成できます。
blur(ぼかし)grayscale(モノクロ)など、元画像を加工しなくても演出を加えることが可能です。

Screenshot of www.bestagencies.com

グラデーションジェネレーター – CSS Gradient

CSS3のグラデーションを作成出来ます。カラーピッカー、カラーコードどちらからでも色を入力でき、アルファ値(透明度)も設定できます。
グラデーションの画像をアップデートしてCSSに変換することもできるのが便利です。

Screenshot of cssgradient.io

変形、アニメーションジェネレーター – ENJOY CSS

変形、アニメーション、シャドウなどCSS3の様々なプロパティをプレビューを見ながら実装出来ます。
ログインが必要ですが、登録は無料です。登録すると自分が作成したスタイルを保存しておけます。

Screenshot of enjoycss.com

CSS三角形作成ツール

CSS3の三角形を作成できます。矢印アイコン代わりに使ったりします。

Screenshot of apps.eky.hk

テキストシャドウジェネレーター – bad-company.jp

text-shadowプロパティを使ったテキストシャドウのジェネレーターです。
重ねて付与できるので、濃さや幅の自由度が高い影をつけられます。

Screenshot of www.bad-company.jp

RELATED POSTS