Utilities

Display

Control the display type of any element.

Class	CSS
`.velin-block`	`display: block`
`.velin-inline`	`display: inline`
`.velin-inline-block`	`display: inline-block`
`.velin-flex`	`display: flex`
`.velin-grid`	`display: grid`
`.velin-hidden`	`display: none`
`.velin-sr-only`	Visually hidden, accessible to screen readers

.velin-block .velin-inline .velin-inline-block

Flex child 1 Flex child 2 Flex child 3

<span class="velin-block">Block element</span>
<span class="velin-inline">Inline element</span>
<span class="velin-inline-block">Inline-block element</span>

<div class="velin-flex" style="gap:var(--velin-space-2);">
  <span>Flex child 1</span>
  <span>Flex child 2</span>
</div>

<div class="velin-hidden">This is hidden</div>

<!-- Visually hidden but accessible to screen readers -->
<span class="velin-sr-only">Skip to content</span>

Spacing

Margin and padding utilities using the spacing scale (0–12). Use shorthand or logical property variants.

Margin

Class	Property
`.velin-m-{0-12}`	margin (all sides)
`.velin-mbs-{0-12}`	margin-block-start
`.velin-mbe-{0-12}`	margin-block-end
`.velin-mis-{0-12}`	margin-inline-start
`.velin-mie-{0-12}`	margin-inline-end

Padding

Class	Property
`.velin-p-{0-12}`	padding (all sides)
`.velin-pbs-{0-12}`	padding-block-start
`.velin-pbe-{0-12}`	padding-block-end
`.velin-pis-{0-12}`	padding-inline-start
`.velin-pie-{0-12}`	padding-inline-end

.velin-p-0

.velin-p-2

.velin-p-4

.velin-p-6

.velin-p-8

<!-- All-sides margin & padding -->
<div class="velin-m-4">margin: var(--velin-space-4)</div>
<div class="velin-p-6">padding: var(--velin-space-6)</div>

<!-- Logical property variants -->
<div class="velin-mbs-2 velin-mbe-4">Block margins</div>
<div class="velin-pis-3 velin-pie-3">Inline padding</div>

Text

Font size, weight, and alignment utilities.

Font Weight

.velin-font-normal .velin-font-medium .velin-font-semibold .velin-font-bold

Text Alignment

.velin-text-start

.velin-text-center

.velin-text-end

<!-- Font sizes -->
<p class="velin-text-xs">Extra small text</p>
<p class="velin-text-sm">Small text</p>
<p class="velin-text-base">Base text</p>
<p class="velin-text-lg">Large text</p>
<p class="velin-text-xl">Extra large text</p>
<p class="velin-text-2xl">2XL text</p>
<p class="velin-text-3xl">3XL text</p>
<p class="velin-text-4xl">4XL text</p>

<!-- Font weights -->
<span class="velin-font-normal">Normal</span>
<span class="velin-font-medium">Medium</span>
<span class="velin-font-semibold">Semibold</span>
<span class="velin-font-bold">Bold</span>

<!-- Alignment -->
<p class="velin-text-start">Start-aligned</p>
<p class="velin-text-center">Centered</p>
<p class="velin-text-end">End-aligned</p>

Color

Semantic text and background color utilities.

Text Color

.velin-text-primary .velin-text-secondary .velin-text-success .velin-text-danger .velin-text-warning .velin-text-muted

Background Color

.velin-bg-primary .velin-bg-surface .velin-bg-success .velin-bg-danger .velin-bg-warning

<!-- Text colors -->
<span class="velin-text-primary">Primary</span>
<span class="velin-text-secondary">Secondary</span>
<span class="velin-text-success">Success</span>
<span class="velin-text-danger">Danger</span>
<span class="velin-text-warning">Warning</span>
<span class="velin-text-muted">Muted</span>

<!-- Background colors -->
<div class="velin-bg-primary">Primary background</div>
<div class="velin-bg-surface">Surface background</div>
<div class="velin-bg-success">Success background</div>
<div class="velin-bg-danger">Danger background</div>
<div class="velin-bg-warning">Warning background</div>

Sizing

Width and height utility classes.

Class	CSS
`.velin-w-full`	`width: 100%`
`.velin-w-auto`	`width: auto`
`.velin-w-screen`	`width: 100vw`
`.velin-h-full`	`height: 100%`
`.velin-h-auto`	`height: auto`
`.velin-h-screen`	`height: 100vh`

.velin-w-full

.velin-w-auto

<div class="velin-w-full">Full width</div>
<div class="velin-w-auto">Auto width</div>
<div class="velin-h-screen">Full viewport height</div>

Border

Border width and border-radius utilities.

Border Width

.velin-border-0

.velin-border

.velin-border-2

Border Radius

none

sm

md

lg

xl

full

<!-- Border width -->
<div class="velin-border-0">No border</div>
<div class="velin-border">1px border</div>
<div class="velin-border-2">2px border</div>

<!-- Border radius -->
<div class="velin-rounded-none">Sharp corners</div>
<div class="velin-rounded-sm">Small radius</div>
<div class="velin-rounded-md">Medium radius</div>
<div class="velin-rounded-lg">Large radius</div>
<div class="velin-rounded-xl">Extra large radius</div>
<div class="velin-rounded-full">Fully rounded</div>

Position

Positioning and z-index utilities.

Class	CSS
`.velin-relative`	`position: relative`
`.velin-absolute`	`position: absolute`
`.velin-fixed`	`position: fixed`
`.velin-sticky`	`position: sticky`
`.velin-z-0`	`z-index: 0`
`.velin-z-10`	`z-index: 10`
`.velin-z-20`	`z-index: 20`
`.velin-z-30`	`z-index: 30`
`.velin-z-40`	`z-index: 40`
`.velin-z-50`	`z-index: 50`

.velin-relative (parent)

.velin-absolute

<div class="velin-relative">
  <div class="velin-absolute" style="inset-block-end:0;inset-inline-end:0">
    Positioned element
  </div>
</div>

<nav class="velin-sticky" style="inset-block-start:0">
  Sticky navigation
</nav>

<div class="velin-z-10">z-index: 10</div>
<div class="velin-z-50">z-index: 50</div>

Transform

CSS transform utilities for rotation, scaling, and translation.

Rotate

45°

90°

180°

Scale

75%

90%

95%

100%

105%

110%

125%

Translate Y

baseline

translate-y-1

translate-y-2

<!-- Rotate -->
<div class="velin-rotate-45">Rotated 45°</div>
<div class="velin-rotate-90">Rotated 90°</div>
<div class="velin-rotate-180">Rotated 180°</div>

<!-- Scale -->
<div class="velin-scale-75">75%</div>
<div class="velin-scale-90">90%</div>
<div class="velin-scale-105">105%</div>
<div class="velin-scale-110">110%</div>
<div class="velin-scale-125">125%</div>

<!-- Translate -->
<div class="velin-translate-y-1">Shifted down 0.25rem</div>
<div class="velin-translate-y-2">Shifted down 0.5rem</div>

Filter / Backdrop

CSS filter and backdrop-filter utilities for blur, brightness, and grayscale effects.

Blur

No blur

blur-sm

blur-md

blur-lg

Brightness

50%

75%

100%

125%

Grayscale & Backdrop Blur

.velin-grayscale

Original

<!-- Blur -->
<div class="velin-blur-sm">Slight blur</div>
<div class="velin-blur-md">Medium blur</div>
<div class="velin-blur-lg">Heavy blur</div>

<!-- Backdrop blur (on overlays, modals, etc.) -->
<div class="velin-backdrop-blur">Frosted glass effect</div>

<!-- Brightness -->
<img class="velin-brightness-50" src="…" alt="Dimmed">
<img class="velin-brightness-75" src="…" alt="Slightly dim">
<img class="velin-brightness-125" src="…" alt="Brightened">

<!-- Grayscale -->
<img class="velin-grayscale" src="…" alt="Grayscale image">

Animation

Pre-built animation utilities that trigger on page load. Combine with speed and delay modifiers for fine control.

Base Animations

.velin-animate-fade-in

.velin-animate-slide-up

.velin-animate-slide-down

.velin-animate-scale-in

↻

Speed Modifiers

Modifier	Duration
`--fast`	150ms
(default)	300ms
`--slow`	600ms

Delay Modifiers

delay-100 delay-200 delay-300 delay-500

0.7.5 entrance & effects

Full chapter with live previews: velinstyle.info → Animations.

Class	Effect	Category
`.velin-animate-blur-in`	Fade in, blur clears	Entrance
`.velin-animate-blur-out`	Fade out with blur	Exit
`.velin-animate-rotate-in`	Rotate and scale in	Entrance
`.velin-animate-reveal-up`	Clip-path reveal upward	Entrance
`.velin-animate-reveal-down`	Clip-path reveal downward	Entrance
`.velin-animate-slide-fade-left`	Slide from right, fade in	Entrance
`.velin-animate-slide-fade-right`	Slide from left, fade in	Entrance
`.velin-animate-float`	Gentle vertical loop	Attention
`.velin-animate-glow`	Primary box-shadow pulse	Attention
`.velin-animate-flash`	Opacity flash once	Attention

blur-in rotate-in reveal-up reveal-down slide-fade-left slide-fade-right float glow (hover) flash blur-out

Hover trigger

Add .velin-animate-hover so the animation stays paused until hover on fine pointers (animation-play-state).

Reduced motion (0.7.5)

Under prefers-reduced-motion: reduce, entrance classes use animation: none and reset opacity, filter, transform, and clip-path; float, glow, and flash are disabled.

Infinite Loop

↻

.velin-animate-spin.--infinite

<!-- Base animations -->
<div class="velin-animate-fade-in">Fade in</div>
<div class="velin-animate-slide-up">Slide up</div>
<div class="velin-animate-slide-down">Slide down</div>
<div class="velin-animate-scale-in">Scale in</div>
<div class="velin-animate-spin">Spinning</div>

<!-- Speed modifiers -->
<div class="velin-animate-fade-in --fast">Fast fade</div>
<div class="velin-animate-slide-up --slow">Slow slide</div>

<!-- Delay modifiers -->
<div class="velin-animate-fade-in --delay-100">100ms delay</div>
<div class="velin-animate-fade-in --delay-200">200ms delay</div>
<div class="velin-animate-fade-in --delay-300">300ms delay</div>
<div class="velin-animate-fade-in --delay-500">500ms delay</div>

<!-- Infinite loop -->
<div class="velin-animate-spin --infinite">Loading…</div>

Gradient

Pre-built gradient backgrounds and gradient text effects. Use direction modifiers to control gradient flow.

Background Gradients

.velin-gradient-primary

.velin-gradient-secondary

.velin-gradient-surface

.velin-gradient-hero

.velin-gradient-sunset

.velin-gradient-ocean

Gradient Text

.velin-gradient-text

Direction Modifiers

Modifier	Direction
(default)	135deg (top-left to bottom-right)
`--to-r`	to right (90deg)
`--to-b`	to bottom (180deg)
`--to-br`	to bottom-right (135deg)

<!-- Background gradients -->
<div class="velin-gradient-primary">Primary gradient</div>
<div class="velin-gradient-secondary">Secondary gradient</div>
<div class="velin-gradient-surface">Surface gradient</div>
<div class="velin-gradient-hero">Hero gradient</div>
<div class="velin-gradient-sunset">Sunset gradient</div>
<div class="velin-gradient-ocean">Ocean gradient</div>

<!-- Gradient text -->
<h1 class="velin-gradient-text">Gradient heading</h1>

<!-- Direction modifiers -->
<div class="velin-gradient-primary --to-r">Left to right</div>
<div class="velin-gradient-sunset --to-b">Top to bottom</div>

Print

Control element visibility and page breaks when printing. These classes only take effect inside @media print.

Class	Behavior
`.velin-print-only`	Hidden on screen, visible in print
`.velin-no-print`	Visible on screen, hidden in print
`.velin-print-break-before`	Forces a page break before the element
`.velin-print-break-after`	Forces a page break after the element
`.velin-print-break-avoid`	Prevents a page break inside the element

.velin-no-print — hidden when printing .velin-print-only — this is hidden on screen

Try Ctrl+P / Cmd+P to preview print behavior.

<!-- Only visible when printing -->
<p class="velin-print-only">Printed on: 2026-01-01</p>

<!-- Hidden from print -->
<nav class="velin-no-print">Site navigation</nav>

<!-- Page break control -->
<section class="velin-print-break-before">New page starts here</section>
<section class="velin-print-break-after">Page break follows this</section>
<table class="velin-print-break-avoid">Keep table intact</table>

Transition

Apply smooth CSS transitions to elements. Hover over the demos to see them in action.

Class	Properties
`.velin-transition`	all properties
`.velin-transition-colors`	color, background-color, border-color
`.velin-transition-opacity`	opacity
`.velin-transition-transform`	transform
`.velin-transition-shadow`	box-shadow
`.velin-transition-none`	transition: none

Hover: colors

Hover: opacity

Hover: transform

Hover: shadow

<!-- Smooth transition on all properties -->
<div class="velin-transition">All transitions</div>

<!-- Scoped transitions -->
<div class="velin-transition-colors">Color changes only</div>
<div class="velin-transition-opacity">Opacity changes only</div>
<div class="velin-transition-transform">Transform changes only</div>
<div class="velin-transition-shadow">Shadow changes only</div>

<!-- Disable transitions -->
<div class="velin-transition-none">No transition</div>

Cursor

Override the mouse cursor style on any element.

Class	CSS
`.velin-cursor-pointer`	`cursor: pointer`
`.velin-cursor-default`	`cursor: default`
`.velin-cursor-not-allowed`	`cursor: not-allowed`

cursor-pointer

cursor-default

cursor-not-allowed

<button class="velin-cursor-pointer">Clickable</button>
<div class="velin-cursor-default">Default cursor</div>
<button class="velin-cursor-not-allowed" disabled>Disabled</button>

Anchor Positioning

Native CSS Anchor Positioning utilities for tooltips and dropdowns without JavaScript calculations.

Class	Description
`.velin-anchor`	Set as anchor element (`anchor-name`)
`.velin-anchored`	Position relative to anchor
`.velin-anchor-top`	Place above anchor
`.velin-anchor-bottom`	Place below anchor
`.velin-anchor-start`	Place at start
`.velin-anchor-end`	Place at end
`.velin-anchor-flip`	Auto-flip fallback when out of viewport

<button class="velin-anchor">Anchor</button>
<div class="velin-anchored velin-anchor-bottom">Positioned content</div>

Color Mix / Auto-Text

Utilities based on color-mix() and automatic text color selection.

Class	Description
`.velin-opacity-10` to `.velin-opacity-90`	Color opacity via `color-mix(in oklch)`
`.velin-tint-10` to `.velin-tint-90`	Lighten color by mixing with white
`.velin-shade-10` to `.velin-shade-90`	Darken color by mixing with black
`.velin-auto-text`	Automatic white/black text based on background luminance

Auto Text

Container Style Queries

Adaptive component styling based on container CSS variables, not just width.

Variable / Class	Description
`--velin-density: compact`	Reduces spacing in children
`--velin-density: comfortable`	Increases spacing in children
`--velin-style: professional`	Sharper radii, subdued colors
`--velin-style: playful`	Larger radii, vibrant colors

<div style="--velin-density: compact; container-type: inline-size;">
  <!-- Children auto-adapt spacing -->
</div>

Divide

Add borders between children automatically (like Tailwind divide-y).

Class	Description
`.velin-divide-y`	Horizontal dividers between vertical children
`.velin-divide-x`	Vertical dividers between horizontal children

Item 1

Item 2

Item 3

Responsive Utilities

Show/hide elements at specific breakpoints.

Class	Description
`.velin-hidden-sm`	Hidden on small screens (<36rem)
`.velin-hidden-md`	Hidden on medium screens
`.velin-hidden-lg`	Hidden on large screens
`.velin-visible-sm`	Visible only on small screens
`.velin-visible-md`	Visible only on medium screens
`.velin-visible-lg`	Visible only on large screens

CSS @scope

Scoped styling to isolate component styles without Shadow DOM.

Class	Description
`.velin-scope`	Scoped container -- inner styles won't leak out
`.velin-scope-island`	Island scope -- completely isolated subtree

<div class="velin-scope">
  <!-- Styles scoped here only affect descendants -->
</div>

Scroll Utilities

Class	Description
`.velin-scroll-smooth`	`scroll-behavior: smooth`
`.velin-scroll-snap-x`	Horizontal scroll snapping container
`.velin-scroll-snap-y`	Vertical scroll snapping container
`.velin-scroll-snap-start`	Snap to start of child
`.velin-scroll-snap-center`	Snap to center of child
`.velin-overscroll-none`	Prevent scroll chaining

Scroll-Driven Animations

Animate elements as they scroll into view using animation-timeline.

Class	Description
`.velin-scroll-reveal`	Fade + slide in on scroll
`.velin-scroll-progress`	Horizontal progress bar tied to scroll position
`.velin-scroll-parallax`	Parallax scroll effect

State Utilities

Visual state indicators with auto-generated pseudo-element icons.

Class	Description
`.velin-is-loading`	Loading overlay with spinner
`.velin-is-empty`	Empty state with placeholder icon
`.velin-is-error`	Error state with red indicator
`.velin-is-success`	Success state with check indicator
`.velin-is-disabled`	Disabled state with reduced opacity and no interaction

View Transitions

CSS View Transitions API utilities for smooth page/component morphing.

Class	Description
`.velin-vt-fade`	Fade transition
`.velin-vt-slide`	Slide transition
`.velin-morph-source`	Element that "morphs" into another
`.velin-morph-target`	Target element of the morph

<img class="velin-morph-source" style="view-transition-name: hero">
<!-- On navigation, target element with same name morphs smoothly -->