My Favorite CSS Tricks

🚀 Flexbox Layout Magic

I love how Flexbox makes it easy to center elements, create responsive layouts, and manage spacing without writing complex media queries.

💻 CSS Grid for Clean Layouts

CSS Grid is a game-changer for creating clean, symmetrical layouts. I use it to build both full pages and smaller components like cards or galleries.

🎨 Custom Scrollbars

Styling scrollbars adds a unique feel to websites. With ::-webkit-scrollbar and friends, I can make scrollbars match the site's branding.

🌐 Glassmorphism Effects

Using backdrop-filter and transparency gives sections a frosty, modern UI look. I use it on cards, modals, and navigation bars.

📢 Hover & Focus Animations

Interactive elements come alive with smooth transitions and scale/opacity effects. I also add keyboard focus effects for accessibility.

💡 Responsive Typography

• Using clamp() for font size adapts to screen width
• Rem/em units help maintain scalability
• Good type hierarchy = better UX

🎯 Center Anything with Flex

Just use display: flex; justify-content: center; align-items: center; and boom! Your content is perfectly centered.

🪄 Auto Margins for Alignment

Using margin-left: auto; or margin-right: auto; inside flex layouts is a magic trick to push elements to one side.

🎨 Gradient Borders Without Images

Use border-image: linear-gradient(...) or use a pseudo-element to fake a gradient border — no images needed!

🧠 Clamp for Smart Font Sizes

With font-size: clamp(1rem, 2vw, 2rem);, your text scales beautifully on all screens. No media queries required!

🌀 Infinite Animation Loop

Add a subtle loop with @keyframes and animation: spin 5s linear infinite; for attention-grabbing effects.

🧲 Sticky Headers Made Easy

Use position: sticky; top: 0; to make headers stick at the top while scrolling — super handy for navigation bars!