CSSシャイン(光沢)エフェクト生成ツール
カードやボタンに斜めに流れる光のアニメーションを作成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
角度・速度・不透明度・色をスライダーで調整しながら、カードやボタンに斜めに流れる光沢(シャイン)エフェクトをプレビューし、完成したCSSコードをそのままコピーできるツールです。高級感のあるカードデザインや強調ボタンを作りたいデザイナーやフロントエンド開発者に便利で、処理はすべてブラウザ内で完結しサーバーに送信されません。
使い方
- 角度・速度・不透明度・光の色のスライダーとカラーピッカーで効果を調整します。
- プレビューカードで光が斜めに流れる様子をリアルタイムで確認します。
- ループ再生のオン/オフを切り替え、必要なら再生ボタンでもう一度確認します。
- 生成されたCSSをコピーし、対象要素の::after疑似要素に貼り付けます。
よくある質問
- 生成したCSSはどの要素にも使えますか?
- 適用する要素にposition: relativeとoverflow: hiddenを設定する必要があります。これがないと光沢がカード外にはみ出して表示されます。
- ホバー時だけ光らせることはできますか?
- はい、「ループ再生」のチェックを外すと、ホバー時にだけ光が流れるCSSに切り替わります。
- 複数のカードで速度を変えて使えますか?
- はい、カードごとに別のクラス名を付け、このツールで速度や角度を変えてそれぞれのCSSを生成・適用してください。