CSS シャイン（光沢）エフェクト ジェネレーター
カードの上を斜めに走る光のCSSエフェクトを作成
カードやボタンの上を光がスッと通り過ぎるシャイン（Shine）エフェクトを、スライダーで調整しながらプレビューし、完成したCSSコードをそのままコピーできるツールです。高級感のあるカードデザインや目立たせたいボタンを作りたいデザイナー・フロントエンドエンジニアの方に役立ちます。処理はすべてブラウザ内で完結し、データがサーバーに送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 角度・スピード・シャープさ・光の色のスライダーとカラーピッカーを調整して、好みのエフェクトを作ります。
- プレビューカードで、光沢が斜めに移動する様子をリアルタイムに確認します。
- アニメーションをループさせるかどうかを切り替え、必要に応じて再生ボタンでもう一度確認します。
- できあがったCSSコードをコピーボタンでコピーし、対象の要素（::after）に貼り付けます。
よくある質問
- 生成されたCSSはどんな要素にも適用できますか？
- 適用する要素に position: relative と overflow: hidden を必ず設定してください。そうすることで、光沢のグラデーションがカードの内側だけに表示されます。
- マウスホバー時だけ光らせることはできますか？
- はい。「アニメーションをループ再生」のチェックを外すと、hover したときだけ光が走るCSSに切り替わります。
- 複数のカードにそれぞれ違うスピードで適用できますか？
- はい。カードごとに別のクラス名を付け、このツールでスピードや角度の値を変えながらそれぞれのCSSを生成して適用してください。