Article

10 CSS Tricks to Elevate Your UI Instantly

D

DevNotes Team

📅 February 14, 2026

⏱️ 10 min

No frameworks, no libraries — just with pure CSS, you can create impressive UI effects. Here are 10 techniques every frontend developer should know.

1. Glassmorphism — The Frosted Glass Effect

One of the most popular design trends today:

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

2. CSS Grid — Fast Bento Layouts

Create Apple-style bento grids with just a few lines:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

3. Container Queries — Responsive by Component

Instead of media queries (responsive to viewport), container queries allow responsiveness based on the parent component size:

.card-container {
  container-type: inline-size;
  container-name: card;
}
 
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

4. :has() Selector — The Ultimate Parent Selector

CSS finally has a parent selector!

/* Card with image → horizontal layout */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

Conclusion

CSS has evolved a lot. With new features like container queries, :has(), and color-mix(), you can build complex UIs without JavaScript. Start applying them today! ✨ `