← All ConceptsVol.2
CSS Creative

Volume 3

Creative Toolkit

Text effects, micro-interactions, glassmorphism, blend modes, masks, scroll-snap, SVG draws. All cross-browser. All performant. Nothing blocks your content.

Scroll to begin
01

Text Effects

Typography that performs.

Every effect below is pure CSS. No canvas, no SVG, no libraries. Hover over each to see interactions.

Animated Gradientbackground-clip: text + animated background-position

Shifting spectrum

Stroke / Outline-webkit-text-stroke + fill-color transition on hover

Hover to fill

Neon GlowLayered text-shadow with oklch alpha + hover intensify

Hover for neon

Fluid Typographyclamp(1rem, 0.5rem + 3vw, 4rem) — no breakpoints

Resize your browser window

Fancy Underlinestext-underline-offset, thickness, color + background-size reveal
Styled underlineReveal on hover
Writing Modeswriting-mode: vertical-rl — for labels, accents, editorial layouts
Vertical label

Pair vertical labels with horizontal content for editorial magazine layouts.

Rotated text draws the eye and creates rhythm.

Section 01
text-wrap: balanceEven line lengths for headlines. Zero effort.

Without

Building capability across your entire workforce

With balance

Building capability across your entire workforce

02

Variable Fonts

One file. Infinite weights and widths.

Variable fonts contain a continuous range of weights, widths, and custom axes in a single file. Animate between them smoothly — something impossible with static font files.

The quick brown fox jumps over the lazy dog

EXPANDED TEXT

Hover to animate weight (CSS transition on font-weight)

DesignSystemsThatBreathe
Hover each word. It transitions from light (300) to black (900) weight smoothly. With a real variable font like Inter or Roboto Flex, this is buttery smooth on a single font axis. No font-swap flash. No layout shift.
03

Micro-Interactions

The details that make interfaces feel alive.

Spring curves, cursor-following glows, card lifts, tilt effects. All CSS transitions with cubic-bezier curves that mimic physical springs. No Framer Motion needed.

Spring button (cubic-bezier overshoot)

/* Spring: overshoots then settles */ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

Cursor-following glow (CSS custom properties)

Card interactions (lift, tilt, glow)

Lift

translateY(-4px) + shadow expansion

Tilt

perspective + rotateX/Y from cursor position

Glow

Border-color + box-shadow ambient glow

The spring curve cubic-bezier(0.34, 1.56, 0.64, 1)is the secret. The second value exceeds 1.0, causing overshoot — exactly what Framer Motion's spring physics does, but in one line of CSS.
04

Glassmorphism

Frosted glass. One CSS property.

Glass Card

backdrop-filter: blur(12px) with a semi-transparent background. Drag the slider to see it sharpen and soften.

backdrop-filter: blur()is GPU-accelerated and works in all modern browsers including Safari (which supported it first). Apple's Liquid Glass design language (2025) has made this mainstream. Set blur to 0 to see the raw background.
05

Mix-Blend-Mode

Layer colours like Photoshop. In CSS.

mix-blend-mode: normal
Click through the blend modes. "difference" creates striking inversions. "screen" brightens. "multiply" deepens. "color-dodge" creates intense highlights. These are the same blend modes from Photoshop — running live in CSS with zero performance cost.
06

CSS Masks

Reveal, erode, wipe. Pure CSS.

Before

After

Drag the slider. A CSS mask-image gradient acts as a wipe transition between two layers. Use this for before/after comparisons, progressive reveals, or dramatic section transitions. The mask is a single CSS property — works everywhere including Safari.
07

Scroll Snap

Native carousel. No library.

CSS scroll-snap gives you carousel behavior — items lock into position as you scroll. Touch-friendly. Momentum-friendly. No Swiper.js needed.

Workforce

Humans and agents filling roles

Knowledge

Tagged, reusable knowledge units

Capabilities

Skills with proficiency levels

Org Structure

Departments, roles, reporting lines

Goals

Current state to desired state

Interventions

AI-generated, human-refined plans

Swipe horizontally (or scroll on desktop). Each card snaps into position. This is scroll-snap-type: x mandatory — native CSS, touch-optimized, momentum-aware. Replace any carousel library with two lines of CSS.
08

SVG Line Draw

Paths that draw themselves.

The SVG path uses stroke-dasharray and stroke-dashoffset with a CSS transition. When the element enters the viewport, the offset animates from 1000 to 0, drawing the line. Use for logos, diagrams, signatures, or loading states.
09

CSS Filters

Brightness, saturation, hue — all animatable.

Hover each card. CSS filters transform elements without changing their markup — perfect for hover states, focus effects, and ambient mood shifts.

Brightness

filter: brightness(1.3)

Saturate

filter: saturate(1.8)

Hue Rotate

filter: hue-rotate(90deg)

Invert

filter: invert(1)

Sepia

filter: sepia(1)

Contrast

filter: contrast(1.5)

Blur + Bright

Combined filters

Grayscale

filter: grayscale(1)

Hover each card. Filters are GPU-accelerated and compositable — stack multiple filters on one element. Use grayscale → color on hover for image galleries. Use brightness for ambient lighting effects. All transitions are smooth at 60fps.

End of Volume 3

No library tax.
No performance cost.
No excuses.

Text gradients, stroke fills, neon glows, fluid type, variable fonts, spring buttons, cursor glows, card tilts, glassmorphism, blend modes, mask reveals, scroll snap, SVG draws, CSS filters. All cross-browser. All this page. All yours.

← Volume 2Volume 1All Concepts