CSSフィルタージェネレーター
スライダーを動かすと、プレビューとfilterのコードが一緒に変わります。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
ファイルをドロップするか、クリックして選んでください
CSSコード
使い方
- 最初はサンプル画像が表示されています。自分の画像を使うときは下の枠にドラッグ＆ドロップします。
- スライダーを動かすかプリセットを選ぶと、すぐに反映されます。初期値のままの項目はコードに含まれません。
- 「押している間は元画像」を長押しすると、適用前と見比べられます。
- CSSコードをコピーして使うか、対応ブラウザーなら「ダウンロード」でフィルターをかけたPNGを保存します。
よくある質問
filter関数の順番は関係ありますか？
はい。前から順に適用されるので、順番が変わると結果も変わります。このツールは常に同じ順番でコードを作ります。
drop-shadowとbox-shadowの違いは？
box-shadowは要素の四角い枠に影を付け、drop-shadowは透明部分を除いた実際の形に沿って影を付けます。背景が透明なPNGやアイコンに向いています。
ダウンロードボタンが表示されません。
キャンバスのフィルター機能に対応していないブラウザー（一部のSafariなど）では非表示にしています。その場合もCSSコードはそのまま使えます。