デザイン・背景

Generative Placeholders
コードを直接貼り付けると幾何学的で抽象的なアート作品のような画像をリアルタイムで生成して利用できる。

Clippy — CSS clip-path maker
CSSの clip-path プロパティを使って、画像を自由な形（多角形や円、星型など）に切り抜くためのコードを直感的に生成できるツール

CSS Gradient – Generator, Maker, and Background
CSSグラデーションコードを直感的に作成できるツール。

CSS mesh gradients generator: Mesher Tool by CSS Hero
複雑に色が混ざり合うメッシュグラデーションをGUIで作成し、CSSコードとして生成。

タイポグラフィ

Font-size clamp() generator
レスポンシブデザインのコードをシンプルにするための便利なツール。最小のフォントサイズと画面幅および最大のフォントサイズと画面幅を入力するとそのままコピペできるコードを生成してくれる。

Type Scale Generator
デザインにおけるタイポグラフィ・スケールを数学的な比率に基づいて自動生成するツール。

アニメーション

Cubic-bezier.com
CSSアニメーションのイージング（動きの加速・減速）を視覚的に調整できるサイト。

イージング関数チートシート
アニメーションの加速・減速のパターンを視覚的に確認し、CSSやJavaScript用のコードを取得できる。

画像最適化・変換

PNG・JPEGをWebP画像に一括変換｜サルワカWebツール
PNG・JPEGをWebP画像に一括変換。

画像サイズ変更ツール｜JPEG・PNG画像を一括で縮小！
複数のJPEGやPNG画像をまとめてアップロードし、一括でサイズを変更できる。

TinyPNG – Compress AVIF, WebP, PNG and JPEG images
一度に最大20枚までの画像をまとめてドラッグ＆ドロップで圧縮できる。

Squoosh
GoogleのChromeチームが開発した高性能な画像圧縮・比較ツールで画面中央のスライダーを左右に動かして、「圧縮前」と「圧縮後」の画質の劣化具合をピクセル単位でリアルタイムに比較できる。

検証・ブラウザ互換性

Can I use... Support tables for HTML5, CSS3, etc
新しいCSSやJavaScriptの機能が、「どのブラウザで使えるか」を調べることができる。