CSSページカール効果ジェネレーター
紙が折れたようなカード角のCSS効果をすぐ生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
カードやドキュメントUIの角が紙のようにめくれた立体効果を作るツールです。4方向の角から好きな位置を選び、折り目のサイズ・影の濃さ・カードと裏面の色を調整すると結果がリアルタイムでプレビューされ、完成したCSSコードをそのままコピーしてプロジェクトに貼り付けられます。処理はすべてブラウザ内で行われ、サーバーに送信されるデータはありません。
使い方
- 右上・左上・右下・左下の4つのタブから折り目を付けたい角を選びます。
- スライダーで折り目のサイズと影の濃度を調整し、好みの立体感に仕上げます。
- カードの色と折り目裏面の色をカラーピッカーまたはテキスト入力で指定します。
- プレビューを確認したら「CSSコピー」ボタンで完成したコードをコピーして使用します。
よくある質問
- 生成されたCSSをそのままサイトに使えますか?
- はい、.curl-cardクラスと::before疑似要素のスタイルを含む純粋なCSSなので、対象要素のクラス名に合わせて貼り付けるだけで使えます。
- 複数の角に同時に折り目を付けられますか?
- このツールは一度に1つの角のコードを生成します。複数の角が必要な場合は各方向で生成したCSSを別々のクラス名にまとめて組み合わせてください。
- 画像なしでCSSだけで紙のめくれを表現できますか?
- はい、背景グラデーションで角を斜めに切り取り、疑似要素に同じグラデーションとdrop-shadowフィルターを重ねることで、画像なしに立体効果を作り出します。