CSS Glassmorphism Button
.glass-button {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}DevSnips – Frontend Snippet Library
A curated collection of reusable HTML, CSS, and JavaScript snippets to help you build faster, cleaner, and more efficient frontend interfaces.
Featured Snippets
Responsive Navbar
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>JS Dark Mode Toggle
const toggle = () => {
document.body.classList.toggle('dark-mode');
};Features
Clean, reusable code snippets
Human-friendly, production-ready patterns you can copy and adapt.
Organized by language
HTML, CSS, and JS categories with examples and variations.
Lightweight, no dependencies
Vanilla-first approach. Works anywhere, fast to integrate.
Great for learning
Use as a reference, for prototyping, or for teaching.
Open for contributions
Issues and PRs welcome — help the library grow.
Snippet Examples
A collection of handcrafted, production-ready snippets.
Glassmorphism Card
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}Gradient Button
.gradient-button {
background: linear-gradient(135deg, #6B47DC, #B429E4);
border: none;
color: white;
padding: 12px 24px;
border-radius: 8px;
}Typewriter Effect
function type(el, text, speed = 90) {
let i = 0;
const interval = setInterval(() => {
el.textContent += text.charAt(i);
i++;
if (i === text.length) {
clearInterval(interval);
}
}, speed);
}Responsive Navbar
<nav class="navbar">
<a href="#" class="logo">Logo</a>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>Contribute
1. Fork & Branch
Fork the repository and create a new branch for your feature.
2. Add Snippet
Add your code snippet with clear comments and a descriptive name.
3. Submit PR
Submit a pull request with a concise description of your changes.
Who is this for? & How to use
Developers
- Quickly scaffold UI components
- Consistent, readable patterns
Students
- Learn HTML/CSS/JS by examples
- Copy, tweak, and experiment
Teams
- Share internal snippet standards
- Prototype faster in sprints
