画像エフェクト
エンジニアのためのWebチートシート
CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
画像をアップロード
アップロードした画像で各エフェクトをプレビューし、加工後の画像をダウンロードできます
ドラッグ＆ドロップまたはクリックして画像を選択
カラー調整
Grayscale
画像をモノクロに変換
Sepia
レトロなセピア調
High Contrast
コントラストを強調
Brightness
明るさを調整
Saturate
彩度を強調して鮮やかに
Hue Rotate
色相を回転させて色味を変更
Invert
色を反転（ネガ効果）
Warm Tone
暖かみのある色調
Cool Tone
冷たい色調
Desaturate
彩度を下げた落ち着いた色
Color Pop
彩度とコントラストを強調
ブラー・フォーカス
Soft Blur
柔らかいぼかし効果
Vignette
周辺を暗くして中央に視線を集める
形状・切り抜き
Circular Crop
円形に切り抜き
Drop Shadow
影をつけて立体感を演出
オーバーレイ・合成
Duotone
2色のグラデーションで表現
Color Tint
色味を重ねて雰囲気を変える
特殊効果
Glitch
デジタルノイズ風の歪み
Pixelate
ピクセル化効果
Noise / Grain
ノイズ・粒子感を追加
Vintage
レトロ・ヴィンテージ感
Cinema
シネマティックな雰囲気
アート系
Posterize
ポスター風の色階調削減
Emboss
エンボス（浮き彫り）効果
Sketch
スケッチ・鉛筆画風
Comic
コミック・漫画風