10 Amazing CSS Tricks Every Web Developer Should Know

Cascading Style Sheets (CSS) is a fundamental tool in web development. While most developers are familiar with basic properties like color, font-size, and margin, numerous CSS techniques can elevate your website design without relying on JavaScript or heavy frameworks.

In this article, we’ll explore 10 lesser-known CSS tricks that you can start using today, complete with examples, best practices, and links to trusted resources. Whether you’re a beginner or an experienced developer, these tips will make your websites look more polished and professional.

1. Smooth Scrolling with scroll-behavior

When a user clicks on an anchor link, the page usually jumps abruptly to the target section. You can improve user experience by making this transition smooth with a single CSS property:

html {
  scroll-behavior: smooth;
}

Why it matters: Smooth scrolling provides a polished, modern feel for your website. Users can easily follow the movement from one section to another without being disoriented.

Pro tip: Combine this with sticky headers to create seamless navigation experiences.

For more info, see: MDN: scroll-behavior

2. Creating Triangles with CSS Borders

CSS borders can be manipulated to create shapes like triangles, often used in tooltips, arrows, or decorative elements. Here’s a simple example:

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black;
}

How it works: By setting the width and height to zero and using transparent borders, only the colored border is visible, forming a triangle.

Applications:

• Tooltips
• Dropdown arrows
• Decorative elements in cards or banners

Learn more: CSS-Tricks: CSS Triangles

3. Centering Elements with Flexbox

Centering elements vertically and horizontally used to be a tricky task, but Flexbox simplifies it:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Why use Flexbox:

• Works for single elements or multiple children
• Adapts easily to responsive layouts
• Eliminates the need for complicated margin hacks

Example: Centering a login form on the page:

<div class="container">
  <form class="login-form">
    <!-- form elements -->
  </form>
</div>

Pro tip: Combine flex-direction: column; if stacking elements vertically.

More resources: MDN: Flexbox

4. Responsive Typography with clamp()

Creating responsive font sizes is now easier with the clamp() function:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Explanation:

• 1.5rem → minimum font size
• 5vw → scales with viewport width
• 3rem → maximum font size

Benefits:

• Text adapts to screen sizes
• Prevents overly large or tiny fonts on mobile and desktop
• Works for headings, buttons, and paragraphs

For examples and browser support: CSS-Tricks: clamp()

5. Custom Scrollbars with ::-webkit-scrollbar

Default scrollbars often look plain and don’t match your site’s style. Customize them:

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
}

Notes:

• Works on Chrome, Edge, Safari
• Firefox requires a different approach (scrollbar-width)

Custom scrollbars improve UX, especially for dashboard interfaces or custom menus.

Learn more: CSS-Tricks: Custom Scrollbars

6. Creating Responsive Layouts with CSS Grid

CSS Grid allows you to create complex layouts with minimal code:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Explanation:

• auto-fill automatically fills the row with as many columns as fit
• minmax(200px, 1fr) ensures each column is at least 200px, scaling flexibly
• gap adds spacing between items

Use cases:

• Product cards in e-commerce sites
• Image galleries
• Blog grids

Further reading: MDN: CSS Grid

7. Hover Effects with :hover Pseudo-Class

Make your site interactive with hover effects:

button:hover {
  background-color: #4CAF50;
  color: white;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

Tips:

• Use subtle transitions (transition: all 0.3s ease) for smooth effects
• Hover effects work for buttons, links, cards, and images
• Avoid excessive animations that distract users

8. Using :not() Selector for Excluding Elements

:not() is a powerful pseudo-class that applies styles selectively:

div:not(.exclude) {
  background-color: lightblue;
}

Why it’s useful:

• Avoid adding extra classes just for exclusion
• Keep CSS concise
• Works well in complex layouts with multiple elements

Example: Highlight all buttons except disabled ones:

button:not([disabled]) {
  background-color: green;
}

Reference: MDN: :not()

9. Creating Responsive Images with srcset

Ensure images look great on all devices:

<img src="image.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Responsive Image">

Benefits:

• Faster loading on mobile devices
• High-resolution images for large screens
• Reduces bandwidth usage

Learn more: MDN: Responsive Images

10. Utilizing object-fit for Responsive Media

Control how images or videos fill containers:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Use cases:

• Profile pictures in avatars
• Hero banners
• Video containers

Tip: Combine with object-position to adjust focal points:

img {
  object-fit: cover;
  object-position: center top;
}

More info: MDN: object-fit

Bonus CSS Tips

Here are a few additional CSS tricks that can make your designs even more impressive:

1. Text Shadows for Depth:

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

2. Animating Gradient Backgrounds:

@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

body {
  background: linear-gradient(270deg, #ff7e5f, #feb47b);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

3. Clip Paths for Custom Shapes:

div {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Conclusion

These 10 CSS tricks (plus a few bonuses) will help you create modern, responsive, and visually appealing websites. From responsive typography to interactive hover effects and custom layouts, CSS offers endless possibilities once you explore its advanced features.

For more tutorials and practical examples, check out these resources:

• CSS-Tricks
• MDN Web Docs – CSS
• Smashing Magazine: CSS Articles

Start implementing these tricks today and see your web designs transform!