デザインにこだわりたいけどあまり時間をかけたくない方、この記事で紹介する19のCSSデザインツールを使って、一味違うサイトを作りましょう。今回は、アメリカに住む私が個人的におすすめのCSSデザインツールを集めました。全部英語のサイトになりますがコピペだけで使えるものがほとんどです。

良かったら自分でホスティングしているサイトとYouTubeがあるので他の記事も見てみてください。

CSSプロパティの作成

Neumorphismはシャドウの設定を簡単に調整できるサイトです。ボタンの出っ張り方や高さを微調整したいときにとても便利ですね。

Shaddows Brummはシャドウの方向やシャドウのレイヤーを細かく設定できるCSSデザインツールです。とてもきれいなシャドウが作れますね。

Fancy Border Radiusでは、ユニークなborder-radiouを作成することができます。水のしずくの形や不思議な形が作れてしまいます。

Glow Generatorでは、Glowエフェクト（光のエフェクト）を簡単に作ることができます。ネオンライトや夕日などのイメージに使えそうです。

Clothoid Cornersでは通常のborderradiusとは違うらせんのような柔らかいカーブを作ることができます。

Clipyでは、clip-pathを使って写真をマスキングできるスタイルを作成することができます。タイトルとかに使えそうです。

CSS Filtersでは写真にキレイなフィルターを付けることができます。モノクロのポートフォリオを作りたいときとかもよさそうです。

アニメーション

Animistaでは数多くのプリセットから好きなアニメーションを選んでコピペで使うことができます。べーシックなものからポップアップの表示に使えそうなものまでいろいろありますね。

Hero Patternsでは、CSSで作成されたパターンをコピペで使えるようにしたサイトです。パターンの種類も多く、パズル、木目、壁紙のようなものまであります。

CSS Patternでは、CSSだけでつくられたパターンをコピペで使うことができます。

CSS Gradientでは、グラデーションのスタイルをカラーピックとノブで設定できるCSSデザインツールです。

Parametric Mixerでは、基準の色からカラーパレットを作例してくれます。

Grabientではぐれでーションのパターンを生成してくれます。気に入ったものがあればコピペして使いましょう。

Color Huntでは、パステルカラーとか、レトロなどのテーマをもとにカラーパレットを作成してくれます。

Palettteでは、サイトのテーマカラーを作りたい場合に、基準の色からどれくらい変化をさせるかビジュアル化されるかわかるツールです。

おつかれさまでした。