Snippets
CSS snippets library online. Ready-to-use CSS: centering tricks, text truncation, accessibility helpers. Copy CSS snippets free.
Flexbox Centering
.centered {
display: flex;
justify-content: center;
align-items: center;
} Centered
Grid Centering (Shortest)
.centered {
display: grid;
place-items: center;
} Centered
Absolute Centering
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} Centered
Features
- Collection of common CSS patterns
- One-click copy
- Categorized (Layout, UI, Utilities)
- Modern CSS practices (Flexbox, Grid)
- Responsive helpers
- Reset/Normalize snippets
Common Use Cases
- Quickly center a div
- Add a clearfix
- Reset browser styles
- Create a responsive triangle
- Implement a sticky footer
- Hide scrollbars
CSS Snippets
CSS Snippets are reusable blocks of code for solving common design problems. Instead of reinventing the wheel or searching StackOverflow every time, keep a library of trusted, modern solutions.
Modern CSS capabilities have simplified many old hacks:
- Centering: Used to be hard, now
display: grid; place-items: center;does it all. - Aspect Ratio: No more padding-top hack, use
aspect-ratio: 16/9;. - Layout: Flexbox and Grid allow complex layouts with few lines of code.
Examples
Valid - Absolute Center
display: grid;
place-items: center; Valid - Truncate Text
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; Valid - Custom Scrollbar
&::-webkit-scrollbar { width: 8px; }Frequently Asked Questions
Are these snippets compatible with all browsers?
Most are standard modern CSS supported by all evergreen browsers. Some cutting-edge snippets might need fallback for Internet Explorer, but we focus on modern web development practices.
How do I use these in SASS/SCSS?
Most valid CSS is also valid SCSS. You can copy these directly into your mixins or classes. The nesting syntax `&` used in some snippets is native to SCSS (and now native CSS too!).
💡 Tips
- Build your own utility class library based on snippets you use often.
- Understand HOW the snippet works before pasting it, so you can debug it if needed.