CSS Shine Effect Generator
Create a glossy light sweep that glides diagonally across your cards
Build a shine effect that sweeps a band of light across a card or button, tuning it with sliders and previewing the result live before copying the finished CSS. It's built for designers and front-end developers who want premium-looking cards or attention-grabbing buttons. Everything is rendered instantly in your browser, so no data ever leaves your machine.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Adjust the angle, speed, sharpness, and shine color sliders along with the color picker to dial in the look you want.
- Watch the preview card to see the shine travel diagonally in real time.
- Toggle continuous animation on or off, and hit the play button to replay the effect whenever you need.
- Copy the generated CSS with the copy button and paste it onto the ::after pseudo-element of your target element.
FAQ
- Can I apply the generated CSS to any element?
- The target element needs both position: relative and overflow: hidden so the shine gradient stays clipped inside the card.
- Can I make it shine only on hover?
- Yes. Uncheck "Animate continuously" and the output switches to CSS that runs the light sweep only on hover.
- Can I use different speeds on multiple cards?
- Yes. Give each card its own class name, then use this tool to generate a separate block of CSS with the speed and angle values you want for each one.