CSS Snippet Library

All CSS Examples

This hub collects every published CSS example on DuskTools in a single discovery page. Use it to compare gradients, shadows, glassmorphism, text tricks, and layout snippets without hopping blindly between isolated article pages.

Each item links to a focused detail page with live preview code, copy support, related tools, and browser support notes so designers and frontend developers can move quickly from inspiration to implementation.

Example pages

Visual categories

CSS helper hubs

Pair These With Interactive Tools

CSS Property Explorer

Browse property syntax, values, and browser support by topic.

CSS Gradient Generator

Create and tweak gradients visually before copying the final CSS.

Box Shadow Generator

Build layered shadows visually, then jump back to these examples.

Shadow

Depth, elevation, and glow treatments for cards, panels, and standout UI.

3 examples

Soft Box Shadow

Subtle soft shadow for cards and containers

Shadow

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

Browser support: All modern browsers. IE9+.

View example page Open CSS Property Explorer

Elevated Box Shadow

Strong elevated shadow for floating elements

Shadow

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

Browser support: All modern browsers. IE9+.

View example page Open CSS Property Explorer

Neon Glow Shadow

Glowing neon effect using colored shadows

Shadow

box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.2);

Browser support: All modern browsers. IE9+.

View example page Open CSS Property Explorer

Gradient

Copy-ready background gradients for hero sections, buttons, and visual accents.

4 examples

Blue to Purple Gradient

Popular blue-to-purple diagonal gradient

Gradient

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Browser support: All modern browsers. IE10+ for linear-gradient.

View example page Open CSS Property Explorer

Sunset Gradient

Warm pink-to-red sunset gradient

Gradient

background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

Browser support: All modern browsers. IE10+.

View example page Open CSS Property Explorer

Ocean Gradient

Cool blue ocean-inspired gradient

Gradient

background: linear-gradient(135deg, #667eea 0%, #00d2ff 100%);

Browser support: All modern browsers. IE10+.

View example page Open CSS Property Explorer

Emerald Gradient

Fresh green emerald gradient

Gradient

background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

Browser support: All modern browsers. IE10+.

View example page Open CSS Property Explorer

Effect

Trendy visual effects that help prototype modern glassy or soft UI styles.

2 examples

Glassmorphism

Frosted glass effect trending in modern UI

Effect

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;

Browser support: backdrop-filter: Chrome 76+, Safari 9+, Firefox 103+. Not supported in IE.

View example page Open CSS Property Explorer

Neumorphism

Soft UI / neumorphic design style

Effect

background: #e0e0e0;
border-radius: 16px;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;

Browser support: All modern browsers. Best on light backgrounds.

View example page Open CSS Property Explorer

Text

Useful typography snippets for overflow handling and expressive heading treatments.

2 examples

Text Gradient

Apply gradient colors to text

Text

background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Browser support: Chrome 2+, Safari 4+, Firefox 49+. -webkit- prefix needed for older Safari.

View example page Open CSS Property Explorer

Truncate Text (Ellipsis)

Cut off text with ... when it overflows

Text

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Browser support: All browsers. text-overflow: ellipsis since IE6.

View example page Open CSS Property Explorer

Behavior

Small CSS rules that improve how interfaces feel, scroll, and respond.

1 examples

Smooth Scroll

Enable smooth scrolling for anchor links

Behavior

html {
  scroll-behavior: smooth;
}

Browser support: Chrome 61+, Firefox 36+, Safari 15.4+. scroll-behavior widely supported.

View example page Open CSS Property Explorer

Layout

Centering and positioning patterns developers reach for constantly.

3 examples

Center with Position

Center an element using absolute positioning

Layout

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Browser support: All browsers. transform since IE9.

View example page Open CSS Property Explorer

Center with Flexbox

Center content using CSS Flexbox

Layout

display: flex;
justify-content: center;
align-items: center;

Browser support: All modern browsers. Flexbox since IE10 (partial), IE11+ full.

View example page Open CSS Property Explorer

Center with Grid

Center content using CSS Grid (shortest method)

Layout

display: grid;
place-items: center;

Browser support: All modern browsers. Grid since Chrome 57+, Firefox 52+, Safari 10.1+.

View example page Open CSS Property Explorer

Continue Exploring

Keep browsing with related discovery pages for regex patterns, JavaScript snippets, developer references, and the broader DuskTools directory.

All Regex Patterns All JavaScript Snippets Developer Tools Code References All Tools Regex Tools