CSSAwwwards
+ Submit tool

CSS Snippets

27 snippets
+ Submit a snippet

Copy-paste CSS code for the patterns you search most — centering, grids, dark mode, effects, animations, and utilities. Each snippet includes an explanation and usage notes.

LayoutTypographyEffectsAnimationUtilitiesResponsive
27 snippets
layout

Center a Div in CSS

The definitive guide to centering elements in CSS — Flexbox, Grid, and absolute positioning methods.

#centering#flexbox#grid
layout

CSS Responsive Grid Layout

Auto-fill responsive grid that adapts columns without media queries using minmax() and auto-fill.

#grid#responsive#auto-fill
typography

CSS Truncate Text with Ellipsis

Truncate single-line and multi-line text with an ellipsis (…) using pure CSS.

#truncate#ellipsis#overflow
effects

CSS Gradient Text Effect

Apply a smooth gradient fill to text using background-clip and transparent color.

#gradient#text#background-clip
effects

CSS Glassmorphism Card

Frosted-glass card effect using backdrop-filter blur, semi-transparent background, and a subtle border.

#glassmorphism#backdrop-filter#blur
effects

CSS Card Hover Effect

Smooth card lift, shadow, and border-color transition on hover with transform scale.

#hover#card#transform
utilities

CSS Custom Scrollbar

Style browser scrollbars with custom colors, width, and border-radius using ::-webkit-scrollbar.

#scrollbar#webkit#custom
animation

CSS Loading Spinner

Pure CSS animated loading spinners — border spin, dots, and pulse variants with no JavaScript.

#spinner#loading#animation
layout

CSS Sticky Navigation Bar

Sticky header that stays at the top on scroll with a backdrop blur and shadow effect.

#sticky#navbar#navigation
utilities

CSS Smooth Scroll

Enable smooth scrolling for anchor links site-wide and for individual containers with scroll-behavior.

#smooth-scroll#scroll-behavior#anchor
responsive

CSS Dark Mode with prefers-color-scheme

System-aware dark mode using CSS custom properties and prefers-color-scheme media query.

#dark-mode#prefers-color-scheme#css-variables
typography

CSS Fluid Typography with clamp()

Font sizes that scale fluidly between viewport breakpoints using the CSS clamp() function.

#fluid-typography#clamp#responsive
layout

CSS Flexbox Sticky Footer

Push the footer to the bottom of the viewport on short pages using two lines of Flexbox.

#sticky-footer#flexbox#layout
animation

CSS Skeleton Loading Screen

Animated shimmer skeleton placeholders that preview content shape while data loads.

#skeleton#loading#shimmer
utilities

CSS Visually Hidden (Screen Reader Only)

Hide content visually while keeping it accessible to screen readers — the correct alternative to display: none.

#accessibility#screen-reader#a11y
utilities

CSS Focus-Visible Outline

Show keyboard focus rings only for keyboard users — not mouse users — using :focus-visible.

#focus#accessibility#keyboard
animation

CSS Fade-In & Entrance Animations

Smooth fade-in, fade-up, and fade-scale entrance animations using @keyframes and animation-fill-mode.

#fade-in#entrance#animation
animation

CSS Staggered List Animation

Make list items appear one after another with cascading delays using nth-child animation-delay.

#stagger#list#animation
animation

CSS Animated Underline on Hover

Sliding underline effect on links and nav items using CSS transform and pseudo-elements.

#underline#hover#animation
typography

CSS text-wrap: balance for Headings

Eliminate orphaned words in headings with text-wrap: balance and improve paragraph line endings with text-wrap: pretty.

#text-wrap#balance#pretty
responsive

CSS Aspect Ratio Box

Maintain a fixed aspect ratio for any element using the modern aspect-ratio property.

#aspect-ratio#responsive#image
effects

CSS clip-path Shapes

Create triangles, hexagons, stars, and custom polygon shapes using CSS clip-path.

#clip-path#shapes#polygon
responsive

CSS Scroll Snap Carousel

Touch-friendly horizontal carousel with CSS scroll-snap — no JavaScript required.

#scroll-snap#carousel#horizontal-scroll
effects

CSS Badge & Pill Components

Status badges, category pills, notification counts, and tag chips in pure CSS.

#badge#pill#chip
layout

CSS Sidebar + Main Two-Column Layout

A sticky sidebar with main content using CSS Grid — collapses to single column on mobile.

#sidebar#two-column#grid
utilities

CSS Design Tokens with Custom Properties

A complete design token system using CSS custom properties for color, spacing, typography, and motion.

#design-tokens#css-variables#custom-properties
effects

CSS Gradient Backgrounds

Linear, radial, conic, and mesh gradient backgrounds — including animated gradient effects.

#gradient#background#linear-gradient