CSS Shine Effect Generator
Create a sweeping diagonal shine animation for cards and buttons
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you adjust angle, speed, opacity, and color to design a diagonal shine sweep effect for cards or buttons, previewing it live before copying the finished CSS. It's handy for designers and front-end developers building premium-looking UI elements, and everything runs instantly in your browser with nothing sent to a server.
How to use
- Adjust the angle, duration, opacity, and shine color sliders to shape the effect.
- Watch the preview card to see the shine sweep diagonally in real time.
- Toggle continuous animation on or off, and use Replay to trigger it again.
- Copy the generated CSS and paste it onto your element's ::after pseudo-element.
FAQ
- Can I apply this CSS to any element?
- The target element needs position: relative and overflow: hidden so the shine gradient stays clipped inside its bounds.
- Can I make the shine appear only on hover?
- Yes, unchecking 'Animate Continuously' switches the CSS to a hover-triggered sweep instead of a looping one.
- Can different cards have different speeds?
- Yes, give each card a unique class name and regenerate the CSS here with a different duration for each one.