A gallery of handcrafted, pure CSS visual effects — laid out in a clean, responsive grid. Each tile shows off a unique animation or design trick using only HTML and CSS. Perfect for frontend devs looking to learn, flex, or contribute their styling wizardry.
Check out the live demo 👉 css-masterpieces.netlify.app
- HTML5
- CSS3 (Grid, Animations, Effects)
- Minimal Vanilla JS
- ✅ Aesthetic login page
- ✅ Responsive CSS Grid layout
- ✅ 12+ animated visual effect tiles
- ✅ Hover, transition, transform, and keyframe effects
- ✅ Clean structure for easy contribution
1.Add new animated tiles to the grid
2.Improve responsiveness on mobile
3.Add dark/light mode toggle
4.Add titles or tooltips to tiles
5.Refactor grid into reusable components
6.Animate grid items on scroll
1.Add a new CSS tile with hover/animation
2.Improve the login page’s UI/UX
3.Refactor the CSS into modular files
4.Add keyboard navigation support
5.Improve mobile layout
🚀 We 💖 community contributions! Whether it's your first PR or you're a seasoned dev, you’re welcome here.
1.Fork this repo and clone it to your local machine.
2.Create a new branch for your feature: git checkout -b feat/your-feature-name 3.Add your effect: Edit index.html to include your new CSS tile.
Optionally, create a new CSS file inside /effects/ and link it
4.Stage and commit your changes: git add . git commit -m "Add: new css effect tile" 5.Push your branch to GitHub: git push origin feat/your-feature-name 6.Open a Pull Request: Go to your forked repo Click "Compare & Pull Request"
💬 Need Help? Open an issue, or join the discussion tab to ask questions.
Let’s build something awesome together 🌟
Check the Issues tab to see what's open or suggest your own idea.
Made with 💚 by Vaishnavi Manne (https://github.com/Vaishnavi-Manne) .
This project is licensed under the MIT License.