CSS Snippets Library

Essential CSS code snippets for common UI patterns. Copy-paste ready with explanations.

Text Selection Styling

Typography

Style the background and text color when users select text on your page

Select this text to see the custom selection colors in action!

::selection {
  background: #667eea;
  color: #ffffff;
}

::-moz-selection {
  background: #667eea;
  color: #ffffff;
}
selectionhighlighttypography

Custom Scrollbar (Webkit)

UI Elements

Style scrollbars for Chrome, Safari, and Edge browsers

Scroll this area to see the custom scrollbar. The scrollbar is styled with a thin width, light track, and rounded thumb that darkens on hover.

Keep scrolling to see more...

The custom styling makes scrollbars feel more polished and match your brand.

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
scrollbarwebkitui

Modern Focus States

Accessibility

Accessible focus styles that only show for keyboard navigation

Tab to this button to see the focus ring. Click won't show it (focus-visible)

*:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  border-radius: 4px;
}

*:focus:not(:focus-visible) {
  outline: none;
}
focusaccessibilitya11ykeyboard

Smooth Scrolling

Behavior

Enable smooth scroll behavior for anchor links and programmatic scrolling

Enables smooth scrolling for anchor links and programmatic scroll. Respects user's motion preferences.

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
scrollsmoothanimationaccessibility

Text Truncation (Single Line)

Typography

Truncate text with ellipsis when it overflows (single line)

This is a very long line of text that will be truncated with an ellipsis when it exceeds the container width. You won't see the end of this sentence...

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

Multi-line Text Clamp

Typography

Limit text to a specific number of lines with ellipsis

This is a multi-line paragraph that demonstrates the line-clamp property. It will show exactly 3 lines of text and then cut off with an ellipsis. This is particularly useful for card layouts where you want to preview content but maintain a consistent height. The text continues but gets cut off after three lines...

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

Hide Scrollbar (Keep Functionality)

UI Elements

Hide scrollbar visually but keep scroll functionality intact

This area is scrollable but the scrollbar is hidden. Try scrolling with your mouse wheel or trackpad.

The scroll functionality works perfectly, but the visual scrollbar is hidden for a cleaner look.

Great for custom UI designs.

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
scrollbarhideoverflow

Hide Scrollbars on Specific Element

UI Elements

Hide both horizontal and vertical scrollbars on a centered scrollable element

.scroll-container {
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* Optional: Center content inside */
.scroll-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
scrollbarhideoverflowcenter

Backdrop Blur (Glass Effect)

Effects

Create frosted glass effect with backdrop blur

Glass effect with backdrop blur

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
blurglassbackdropeffect

Aspect Ratio Container

Layout

Maintain aspect ratio for responsive media containers

16:9 Aspect Ratio
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}
aspect-ratioresponsivelayout

Center with Position Absolute

Layout

Center an element using absolute positioning

Perfectly Centered
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
centerabsolutepositionlayout

Gradient Text

Typography

Apply gradient color to text

Gradient Text Effect

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
gradienttextcolortypography

Placeholder Styling

Forms

Style placeholder text in form inputs

::placeholder {
  color: #9ca3af;
  opacity: 1;
}

::-moz-placeholder {
  color: #9ca3af;
  opacity: 1;
}
placeholderinputforms

Dark Mode (Auto)

Theming

Enable automatic dark mode based on user preference

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { background: #0b0b0f; color: #e5e7eb; }
}
dark-modethemingprefers-color-scheme

Fluid Type with clamp()

Typography

Responsive font sizes that scale between min and max

:root { --step: clamp(1rem, 0.9rem + 1vw, 1.25rem); }
h1 { font-size: clamp(1.75rem, 1.2rem + 3.2vw, 3rem); }
body { font-size: var(--step); }
typographyresponsiveclamp

Theme Tokens (CSS Variables)

Theming

Define light/dark tokens for colors and reuse across UI

:root {
  --bg: #ffffff; --fg: #111111; --brand: #667eea; --muted: #9ca3af;
}
[data-theme="dark"] {
  --bg: #0b0b0f; --fg: #e5e7eb; --muted: #6b7280;
}
body { background: var(--bg); color: var(--fg); }
css-variablestokenstheming

Container Queries (Card Adaptation)

Layout

Make components adapt based on their own width with container queries

.card { container: card/inline-size; }
@container card (min-width: 420px) {
  .card__meta { display: grid; grid-template-columns: 1fr auto; }
}
container-querieslayoutresponsive

Parent Styles with :has()

Forms

Style a parent when a child input matches a state

.form-row:has(input:focus) {
  outline: 2px solid #667eea; border-radius: 6px;
}
hasformsparent-selector

Scroll Snap (Horizontal Carousel)

Interaction

Create a smooth snapping carousel with pure CSS

.snap-x { scroll-snap-type: x mandatory; overflow-x: auto; }
.snap-x > * { scroll-snap-align: start; }
scroll-snapcarouselinteraction

Anchor Offset for Sticky Headers

Behavior

Prevent content from hiding behind a fixed/sticky header when linking in-page

:root { scroll-padding-top: 80px; }
anchorscrollsticky-header

Stable Layout with Scrollbars

Layout

Reserve space for scrollbars to avoid layout shift

html { scrollbar-gutter: stable both-edges; }
scrollbarlayout-shiftstability

Safe-Area Insets (iOS)

Layout

Respect device notches and home indicators with env() insets

.header { padding-top: calc(16px + env(safe-area-inset-top)); }
safe-areaioslayout

Sticky Footer Grid

Layout

Keep footer at the bottom on short pages without JS

html, body { height: 100%; }
.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
footergridlayout

Full-Bleed Section in Centered Layout

Layout

Let a section extend edge-to-edge inside a centered wrapper

.full-bleed {
  width: 100vw; margin-left: 50%; left: 50%; position: relative;
  transform: translateX(-50%);
}
full-bleedlayoutvw

Elegant Underlines

Typography

Readable, offset underlines using text-decoration properties

a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
}
underlinelinkstypography

Balanced Headlines & Hyphenation

Typography

Improve rag and wrapping for headings and paragraphs

h1, h2 { text-wrap: balance; }
p { overflow-wrap: anywhere; hyphens: auto; }
text-wraphyphenstypography

Tabular Numbers

Typography

Align digits cleanly for prices, timers, and data tables

.num { font-variant-numeric: tabular-nums lining-nums; }
numberstypographydata

Accent Color for Inputs

Forms

Set a brand color for native form controls

input[type="checkbox"],
input[type="radio"],
progress { accent-color: #667eea; }
formsaccent-colorinputs

Caret & Selection Tint

Forms

Pair caret color with brand selection styles

input, textarea { caret-color: #667eea; }
caretformsbrand

Autofill Styling (WebKit)

Forms

Neutralize bright yellow autofill backgrounds

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #0f172a inset; 
  -webkit-text-fill-color: #e5e7eb;
}
autofillwebkitforms

Custom File Input Button

Forms

Style the file selector button without extra markup

input[type="file"]::file-selector-button {
  padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem;
  background: #fff; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #f9fafb; }
file-inputformsui

:focus-within Group Highlight

Accessibility

Highlight a field group when any child is focused

.field:focus-within { border-color: #667eea; box-shadow: 0 0 0 4px #667eea22; }
focus-withina11yforms

Reduced Motion Fallbacks

Accessibility

Respect user motion preferences by disabling animations

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
reduced-motionaccessibilitya11y

Overscroll Control (Modals)

Behavior

Prevent background scrolling and contain overscroll in dialogs

.modal-open { overflow: hidden; }
.dialog { overscroll-behavior: contain; }
overscrollmodalbehavior

Per-Section Scroll Margin

Behavior

Give anchor targets breathing room under sticky headers

.section { scroll-margin-top: 96px; }
scrollanchorssticky

Scroll Shadows (Edge Hints)

Effects

Subtle shadows to indicate scrollable areas

.scroller { overflow: auto; position: relative; }
.scroller::before,
.scroller::after {
  content: ""; position: sticky; display: block; height: 16px; pointer-events: none;
}
.scroller::before { top: 0; box-shadow: inset 0 8px 8px -8px rgba(0,0,0,.2); }
.scroller::after  { bottom: 0; box-shadow: inset 0 -8px 8px -8px rgba(0,0,0,.2); }
scrollshadowsux

Skeleton Loading (Shimmer)

Effects

Lightweight shimmer placeholder for loading states

.skeleton { position: relative; background: #e5e7eb; overflow: hidden; }
.skeleton::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, #ffffff80, transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
skeletonloadingshimmer

CSS Nesting (Modern Syntax)

Syntax

Organize component styles with native CSS nesting

.card {
  padding: 1rem; border: 1px solid #e5e7eb; border-radius: .75rem;
  & a { text-decoration: none; }
  & a:hover { text-decoration: underline; }
}
nestingsyntaxcomponents

Masonry-ish Columns

Layout

Simple Pinterest-style columns without JS

.masonry { column-count: 3; column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
masonrycolumnsgallery

Print Styles for Links

Print

Append URLs after links and hide unwanted elements in print

@media print {
  a::after { content: " (" attr(href) ")"; font-size: .875em; }
  .no-print { display: none !important; }
}
printlinksmedia-query

Pointer & Hover Media Queries

Interaction

Tweak UI for touch devices that lack hover

@media (hover: none) and (pointer: coarse) {
  .hover-only { display: none; }
}
hoverpointerresponsive

Keyboard-Safe Viewport Units

Layout

Use dynamic viewport height to avoid mobile browser UI jumps

.hero { min-height: 100dvh; }
viewportdvhmobile
Webrenew

Ready to build something custom?

Connect with us