fantiaはじめました!無料素材やAI、PSDを配布中です。

【2020年度版】おすすめCSSジェネレーターサイト17選 シャドウ、フキダシ、グラデーション等をコピペで作成

この記事を読むのに必要な時間は約 15 分です。

サイト制作を行う際に便利なCSSジェネレーターやオンラインツールをまとめました。

box-shadowとかlinear-gradientとか三角形とか、ゼロからコーディングするのは地味に面倒ですよね。
ドロップシャドウ、フキダシ、グラデーション面倒くさい系のcssはジェネレーターを使って楽に作ってしまいましょう!

では早速紹介していきます!

CSSトータルジェネレーター

border-radius、box-shadow、text-shadow、@font-face、column-count、box-resize、linear-gradient…等、よく使う基本的なCSSプロパティのジェネレーターは下記3サイトがあれば大体事足りるかと思います。

CSS3.0 MAKER

CSS3 Generatorと同様に数多くのCSSプロパティに対応したCSSジェネレーターサイトです。
このサイト一つあれば数多くの面倒なプロパティのCSSを簡単に自動生成できます。
使いやすくてオススメのサイトです。

CSS 3.0 MAKER

CSS3 Generator

border-radius、box-shadow、text-shadow…多くのCSSジェネレータがー揃った万能系ジェネレーター生成サイトです。超便利ですよ!

CSS3 Generator

{CSS}Portal

{CSS}Portalも多くのCSSプロパティをサポートしたトータルCSSジェネレーターサイトです。
グラデーションやボックスシャドウだけでなく、ツールチップの吹き出しやリボン、多角形等の図形やボタンデザイン等、デザイン系に特化したジェネレーターがあるのが嬉しいですね。

{CSS}Portal

テーブルタグなら「Table Tag Generator

ベースとなるテーブルHTMLを簡単に作れるテーブルジェネレーターサイトです。セルの結合や分割、クラスの付与等を簡単に行えます。
colspanとrowspanを複数絡めた複雑なテーブルを作るのは結構面倒ですよね。
そんな時はTable Tag Generatorを使ってサクッと作ってしまいましょう。

Table Tag Generator

三角形なら「CSS Triangle Generator

三角形をCSSで記述するのは割と面倒です。
「頂点はえ~っと…」ってな感じで無駄な思考をする暇があればCSS Triangle Generatorを利用した方が良いでしょう。
三角形の向きを決めて幅と高さを入力したらはいおしまい。楽ですね。

CSS Triangle Generator

グラデーションに特化した「CSS Gradient」

linear-gradientを簡単に設定できる「CSS Gradient」です。
グラデーションの色を簡単に追加でき、複数の色を含んだグラデーションを簡単に作れます。
インターフェースがPhotoshop(フォトショップ)みたいで非常に分かりやすいです。

CSS Gradient

ボックスシャドウ、テキストシャドウなら「CSS3 Generator」

ボックスシャドウやテキストシャドウの「影のかかり具合」は数値だけ見ても良く分かりません。
CSS3 Generatorだとプレビューで確認しながらシャドウの設定ができるので非常に分かりやすいです。そしてコードは自動生成、最高ですね。

CSS3 Generator

ストライプなら「CSS STRIPE GENERATOR」

ストライプ柄をCSSで設定する際に便利な「CSS STRIPE GENERATOR」です。
角度、幅、余白を設定して簡単にストライプ柄が作れます。

CSS STRIPE GENERATOR

アニメーションのボタンなら「CSSeffectsSnippets.」

CSSで作られたボタンやアニメーションアイコン等を簡単にコピペできます。サイトのちょっとしたアクセントに使えそうな素材です。

CSSeffectsSnippets.

CSSだけで作られたアイコン「CSS Shapes and Icons Generator」

CSSだけで作られたアイコンの「CSS Shapes and Icons Generator」です。
FontAwsomeではなく、完全にCSSだけでアイコンを作りたい場合にオススメです。

CSS Shapes and Icons Generator

好きな形で画像をマスクできる「CSS clip-path maker」

clip-pathを使ったクリッピングマスクを生成できるサイトです。数多くの図形が登録されており、尚且つ図形を好きな形へ簡単にカスタマイズできます。

CSS clip-path maker

ボタンのジェネレーター

Button Generator

数多くのCSSで作られたボタンがプリセットで登録してあり、選択後に色やサイズ等を細かく設定できます。ボタンはこのサイトがあれば大体事足りるかと思います。

Button Generator

Button Maker

Button Makerも細かくボタンのデザインをカスタマイズできるボタンジェネレーターサイトです。
画像と違ってCSSで作られているので調整が楽なのが良いですね。

Button Maker

フキダシなら「CSS ARROW PLEASE!」

CSSを使ったフキダシを楽に作るなら「CSS ARROW PLEASE!」がオススメです。フキダシはbeforeとafterを使って意外と面倒なんですよね。
矢印の向きを設定し、サイズや色を設定するだけで思い通りのフキダシが作れます。

CSS ARROW PLEASE!

リボンの帯なら「Ribbon Generator」

Ribbon Generatorはデザインのワンポイントによく使うリボンの帯を自動生成できるサイトです。
リボンをCSSで作ると意外と面倒なのでジェネレーターを使ってさっくり作っちゃいましょう。

Ribbon Generator

ボーダーなら「BorderImage」

BorderImageではスライダーを調整するだけで簡単にborder-imageを自動生成することが出来ます。
線一つでデザインはガラッと変わるので、上手く活用すると便利ですよ。

BorderImage

日本語で分かりやすい「CSS3プロパティジェネレーター」

英語は分かりずらい、日本語がいい、という方にオススメのCSS3プロパティジェネレーターです。
言語は日本語、母国語なので翻訳しなくても読めます。基本的なCSSのプロパティは押さえられています。

CSS3プロパティジェネレーター

その他

CSSをSASS/SCSSに変換できる「css2sass」

CSSをワンクリックでSASS/SCSSに変換してくれるサイトです。SASSは効率的にCSSを管理するのに欠かせないので重宝します。

css2sass

CSSのソース整理に便利な「CSS Formatter and Beautifier」

ぐっちゃぐちゃのCSSのソースを見ると気が狂いそうになりますよね。そんな時はCSS Formatter and Beautifierでキレイに整形しちゃいましょう。
美しいソースは美しいデザインを生み出します。

CSS Formatter and Beautifier

以上、WEB開発の効率化に繋がるCSSジェネレーターやオンラインツールでした。
ではまた!