25 Actually Useful CSS Snippets (2026)

Q: Does clamp() work for everything besides font-size?

Yes — `clamp()` works with any length, percentage, or dimension value. Common uses include `width: clamp(300px, 50%, 800px)` for responsive containers and `gap: clamp(1rem, 2vw, 2rem)` for fluid spacing.

Q: What about browser prefixes?

Most modern CSS features no longer need prefixes. `backdrop-filter` and `-webkit-line-clamp` are the main exceptions. The snippets above include the necessary prefixes where relevant. For everything else, check [caniuse.com](https://caniuse.com) for your target browsers.

DodaTech Updated 2026-06-20 3 min read

In this tutorial, you'll learn about 25 actually useful css snippets (2026). We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

CSS in 2026 has features that would have required JavaScript or preprocessors a few years ago. These 25 snippets showcase modern CSS that's widely supported and solves real layout, typography, and UX problems. No CSS art, no Flexbox frogger tricks — just production-ready patterns you'll use this week.

Layout & Scrolling

Smooth scroll (entire page)

html {
  scroll-behavior: smooth;
}

Aspect ratio for embeds and images

.video-wrapper {
  aspect-ratio: 16 / 9;
}
.el {
  aspect-ratio: 1; /* perfect square */
}

Sticky footer (no hack needed)

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
footer {
  margin-top: auto;
}

Full-bleed section within a constrained layout

.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

overscroll-behavior — prevent scroll chaining

.sidebar {
  overscroll-behavior: contain;
}

Typography

Truncate text with ellipsis

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Multi-line truncate (line-clamp)

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Gradient text

.gradient-text {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Fluid typography with clamp()

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

initial-letter — drop caps

p:first-of-type::first-letter {
  initial-letter: 3;
  color: var(--brand);
}

text-wrap: balance — prevent orphaned words

h2 {
  text-wrap: balance;
}

Responsive & Container Queries

Container queries (responsive to parent, not viewport)

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

has() selector — parent based on child state

/* Style the entire card when its checkbox is checked */
.card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* Grid item that wraps to full width if it contains an image */
.grid-item:has(img) {
  grid-column: 1 / -1;
}

nth-child formulas

/* Every 3rd item starting from 2nd */
li:nth-child(3n+2) { background: #f0f0f0; }

/* First 3 items */
li:nth-child(-n+3) { font-weight: bold; }

Visual Effects

Backdrop blur (frosted glass)

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

Custom selection color

::selection {
  background: #6366f1;
  color: white;
}

Smooth shadows (layered for realism)

.smooth-shadow {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 8px rgba(0,0,0,0.06);
}

accent-color for form elements

:root {
  accent-color: #6366f1;
}

Accessibility & UX

focus-visible — keyboard-only focus ring

:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

scroll-margin for anchor links

section[id] {
  scroll-margin-top: 80px;
}

Dark mode via prefers-color-scheme

:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a2e; --text: #e0e0e0; }
}
body { background: var(--bg); color: var(--text); }

Modern Features

color-mix — blend colors in CSS

.btn-danger {
  background: color-mix(in srgb, red, black 20%);
}

Custom scrollbar styling

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

Print styles

@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: black; }
  a::after { content: " (" attr(href) ")"; }
}

size() media queries (beyond width/height)

@media (width > 768px) and (height > 500px) {
  .sidebar { position: sticky; top: 1rem; }
}

Are container queries safe to use in production?

Yes — all major browsers support container queries since 2023. They're the standard way to build reusable components that respond to their parent rather than the viewport. Pair them with :has() for component-level reactive design.

Does clamp() work for everything besides font-size?

Yes — clamp() works with any length, percentage, or dimension value. Common uses include width: clamp(300px, 50%, 800px) for responsive containers and gap: clamp(1rem, 2vw, 2rem) for fluid spacing.

What about browser prefixes?

Most modern CSS features no longer need prefixes. backdrop-filter and -webkit-line-clamp are the main exceptions. The snippets above include the necessary prefixes where relevant. For everything else, check caniuse.com for your target browsers.

← Previous 10 Actually Useful Terminal Aliases (2026) Next → 15 Actually Useful npm Packages (2026)

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Listicles