CSS Guide

Live guide for gradients, shadows, and motion

Documentation page with copyable snippets and live previews so you can see how gradients, shadow stacks, and keyframes work. Quick links jump into focused subpages for each effect type.

Gradient guideShadow guideAnimation guide
Interactive examplesCopy-paste CSSChecklist + practice

Subpages

Topics with live demos

Each subpage is a concise how-to: a checklist, visual examples, and minimal code you can copy into CSS-Zone.

color + depth

Gradients

Linear, radial, and conic mixes with angles and stop tips.

Layered blend

  • Palette through light/shadow balance
  • Stop grids with transparency
  • Dual-layer backgrounds for clarity
Open subpage5 examples + checklist
depth

Shadows

Multi-shadow stacks without murky edges.

Layered shadow

  • Soft shadow + border glow
  • Hover/active separation
  • Glassmorphism friendly presets
Open subpageMulti-shadow recipes
motion

Animations

Keyframes with easing, delays, and stagger notes.

Micro-motion

  • Delay hooks and pauses
  • Marquee and loaders styling
  • Best easing curves
Open subpageCopyable keyframes

Basics

CSS mini documentation

Key reminders for clean, predictable styles in production.

Layout

Keep flow stable and avoid layout shifts.

  • Use logical properties (margin-inline, padding-block) to simplify RTL.
  • Reserve space for async content with min-height or aspect-ratio.
  • Prefer grid/flex gaps over margin stacks to avoid collapsing surprises.

Colors & contrast

Readable UI on light/dark themes.

  • Use foreground-on-background contrast of at least 4.5:1 for text.
  • Pair gradients with solid overlays for text legibility.
  • Test both light/dark themes for the same component before shipping.

Performance

Ship smooth motion and avoid layout trashing.

  • Animate transform/opacity only; avoid box-shadow/height transitions.
  • Cap animation duration for loops (under 1.4s for loaders).
  • Use will-change sparingly and only on elements that truly animate.

Practice

Mini playbook

Ready patterns — use as-is or tweak nearby in the generator.

Gradient card

Contrast background + soft multi-shadow and subtle depth.

background: linear-gradient(135deg, #6ee7ff, #7c3aed);
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.28),
            0 8px 24px rgba(10, 10, 10, 0.25);
animate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadow

Marquee ticker

TranslateX with seamless repeat and adjustable speed.

.marquee {
  display: flex;
  gap: 2rem;
  animation: ticker 14s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

CTA pulse

Two layers (scale + blur) for a soft focus highlight.

@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.pulse::after { animation-delay: .6s; }