機能別にまとめたCSS3ジェネレーター28選

スマートフォンサイトでCSS3を使うことが多くなりますが、今までのCSSに比べブラウザごとにベンダープレフィックスを記述するなど作業量が増えてしまいます。そこで少しでも作業量を減らすためにジェネレーターを活用することをおすすめします。今回は簡単にCSS3を適用できるジェネレーターを機能別にまとめてみました。

多機能型：6個

日本語対応。Photoshopのようなジェネレーター

CSS3プロパティジェネレーター | CSS-EBLOG

シンプルなジェネレーター

CSS3 Generator

10種類も設定ができるジェネレーター

CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator

リアルタイムプレビューが可能なジェネレーター

CSS3 Playground by Mike Plate

Photoshopのレイヤースタイルと同様のUIを持つジェネレーター

Layer Styles

大きめのボタンで操作しやすいジェネレーター

CSS3 Generator - By Peter Funk & Eric Hoffman

グラデーション特化型：4個

国産のグラデーションジェネレーター

Grad3

Photoshopライクなグラデーションジェネレーター

Ultimate CSS Gradient Generator - ColorZilla.com

シンプルなグラデーションジェネレーター

CSS3 Gradient Generator

IE9でもグラデーションを表現できるグラデーションジェネレーター

SVG Gradient Background Maker

ボックスシャドウ特化型：1個

Css3 drop shadow generator

角丸特化型：2個

CSS Border Radius Generator

CSS3 Rounded Corner Generator - CSS Portal

テキストシャドウ特化型：2個

Text Shadow Generator | CSS3 Generator | CSS3Gen

Text Properties

トランジション特化型：2個

codefuture.co.uk - Fun with Cross Browser CSS 3 Transform Generator

Transforms

ボタン特化型：7個

CSS Button Generator for your pleasure

Css Gradient Button - create css button

On/Off Flipswitch HTML5/CSS3 Generator - Proto.io

CSS3 Button Generator

Button Maker

CSS3 Button Generator - CSS Portal

CSS3 Button Generator

その他：4個

吹き出しを簡単に作れるジェネレーター

cssarrowplease

写真にぼかし効果などを加えることができるジェネレーター。

Testing -webkit-filter : playgruond for css filters

ボーダーイメージジェネレーター

border-image-generator

リボンジェネレーター

3D Ribbon Generator - CSS3d.net