API Reference

Complete reference for all AdorableCSS rules, organized by CSS @layer cascade order. Rules are automatically assigned to layers for predictable styling without specificity hacks.

CSS @layer Cascade System

AdorableCSS uses the native CSS @layer feature to manage specificity. The cascade order is:

@layer component → @layer layout → @layer utility → @layer state

Later layers always override earlier ones, regardless of selector specificity.

Live CSS Tester

@layer component

Component Layer

Pre-built UI components and patterns (Priority: 100)

Components

Components utilities

Patterns

5 rules

Rule	CSS Output
	`.figma-frame{position:relative;border:1px dashed #5e5ad2;background:#ffffff;box-shadow:0 0 0 0.5px #e0e0e0}.figma-frame::before{content:"";position:absolute;top:-6px;left:-6px;width:6px;height:6px;background:#5e5ad2;border-radius:1px}.figma-frame::after{content:"";position:absolute;top:-6px;right:-6px;width:6px;height:6px;background:#5e5ad2;border-radius:1px}`
	`.figma-selected{position:relative;outline:2px solid #0c8ce9;outline-offset:2px}.figma-selected::before{content:"";position:absolute;inset:-8px;border:1px solid #0c8ce9;pointer-events:none}`
	`.figma-autolayout{position:relative;background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(94, 90, 210, 0.04) 10px, rgba(94, 90, 210, 0.04) 20px)}.figma-autolayout::before{content:"Auto";position:absolute;top:4px;left:4px;font-size:10px;font-weight:600;color:#5e5ad2;background:#f5f5ff;padding:2px 6px;border-radius:3px;line-height:1}`
	`.figma-component{position:relative}.figma-component::before{content:"◈";position:absolute;top:-8px;left:8px;color:#7b61ff;font-size:14px;background:white;padding:0 4px;line-height:1}`
	`.figma-layer{transition:all 0.2s ease}.figma-layer:hover{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05)}`

Features

11 rules

Rule	CSS Output
	`.glow{box-shadow:0 0 20px rgba(99, 102, 241, 0.5);filter:drop-shadow(0 0 10px rgba(99, 102, 241, 0.3))}`
	`.glow-pulse{box-shadow:0 0 20px rgba(99, 102, 241, 0.5);filter:drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));animation:glow-pulse 2s ease-in-out infinite alternate}`
	`.glow-ring{box-shadow:0 0 0 4px #6366f140;outline:none}`
	`.glass{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:rgba(255, 255, 255, 0.5);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}`
	`.glass-card{background:rgba(255, 255, 255, 0.1);backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.2);border-radius:12px;padding:24px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.1);overflow:hidden;position:relative}`
	`.glass-nav{background:rgba(255, 255, 255, 0.08);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.16);border-radius:0;border-left:none;border-right:none}`
	`.glass-dark{background:rgba(0, 0, 0, 0.1);backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:12px}`
	`.glassmorphism{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:rgba(255, 255, 255, 0.5);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}`
	`.frosted{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background-color:rgba(255, 255, 255, 0.95);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}`
	`.acrylic{backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%);background-color:rgba(252, 252, 252, 0.85);background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);border:1px solid rgba(0, 0, 0, 0.05);box-shadow:0 2px 12px rgba(0, 0, 0, 0.08)}`
	`.neu-glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:rgba(255, 255, 255, 0.6);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:inset 2px 2px 5px rgba(255, 255, 255, 0.8), inset -2px -2px 5px rgba(0, 0, 0, 0.05)}`

@layer layout

Layout Layer

Layout, spacing, and sizing utilities (Priority: 200)

Position

Position utilities

Position & Layer

12 rules

Rule	CSS Output
	`.absolute{position:absolute}`
	`.fixed{position:fixed}`
	`.relative{position:relative}`
	`.static{position:static}`
	`.sticky{position:sticky}`





	`.layer{position:absolute;top:0;right:0;bottom:0;left:0}`

Layout

Layout utilities

Auto Layout

4 rules

Rule	CSS Output
	`.hbox{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start}:where(.hbox>*){flex:0 0 auto}`
	`.vbox{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}:where(.vbox>*){flex:0 0 auto}`
	`.wrap{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start}:where(.wrap>*){flex:0 0 auto}`
	`.pack{display:flex;flex-direction:row;align-items:center;justify-content:center}`

Gap

1 rules

Rule	CSS Output
	`.gap{gap:var(--spacing-md)}`

Padding

7 rules

Rule	CSS Output
	`.p{padding:var(--spacing-md)}`
	`.px{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}`
	`.py{padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}`
	`.pt{padding-top:var(--spacing-md)}`
	`.pb{padding-bottom:var(--spacing-md)}`
	`.pl{padding-left:var(--spacing-md)}`
	`.pr{padding-right:var(--spacing-md)}`

Sizing

7 rules

Rule	CSS Output

@layer utility

Utility Layer

Visual styling and typography utilities (Priority: 300)

Text

Text utilities

Typography

30 rules

Rule	CSS Output





	`.bold{font-weight:700}`
	`.italic{font-style:italic}`
	`.overline{text-decoration:overline}`
	`.underline{text-decoration:underline}`
	`.line-through{text-decoration:line-through}`
	`.strike{text-decoration:line-through}`
	`.decoration{text-decoration:underline}`
	`.sans-serif{font-family:sans-serif}`
	`.serif{font-family:serif}`
	`.monospace{font-family:menlo, monospace}`
	`.cursive{font-family:cursive}`
	`.fantasy{font-family:fantasy}`
	`.system-ui{font-family:system-ui}`
	`.small-caps{font-variant:small-caps}`
	`.lowercase{text-transform:lowercase}`
	`.uppercase{text-transform:uppercase}`
	`.capitalize{text-transform:capitalize}`

	`.list{list-style:none}`
	`.list-style{list-style:none}`
	`.list-position{list-style-position:outside}`

Text Layout

1 rules

Rule	CSS Output

Visual

Visual utilities

Fill

8 rules

Rule	CSS Output


	`.bg{background-color:var(--gray-900)}`

Borders & Radius

35 rules

Rule	CSS Output
	`.bg{background-color:var(--gray-900)}`


	`.b{border:1px solid currentColor}`
	`.r{border-radius:var(--radius-md)}`
	`.border{border:1px solid currentColor}`



















	`.blur{filter:blur()}`
	`.brightness{filter:brightness()}`
	`.contrast{filter:contrast()}`
	`.saturate{filter:saturate()}`
	`.sepia{filter:sepia()}`

Radius

1 rules

Rule	CSS Output
	`.r{border-radius:var(--radius-md)}`

Effects

22 rules

Rule	CSS Output
	`.backdrop-blur{backdrop-filter:blur(8px)}`
	`.backdrop-saturate{backdrop-filter:saturate(1)}`
	`.backdrop-brightness{backdrop-filter:brightness(1)}`
	`.backdrop-contrast{backdrop-filter:contrast(1)}`
	`.backdrop-grayscale{backdrop-filter:grayscale(1)}`
	`.backdrop-hue-rotate{backdrop-filter:hue-rotate(0deg)}`
	`.backdrop-invert{backdrop-filter:invert(1)}`
	`.backdrop-opacity{backdrop-filter:opacity(1)}`
	`.backdrop-sepia{backdrop-filter:sepia(1)}`
	`.perspective{perspective:1000px}`
	`.transform-style{transform-style:preserve-3d}`
	`.perspective-origin{perspective-origin:center}`
	`.backface{backface-visibility:hidden}`
	`.transform{transform:none}`
	`.transform-origin{transform-origin:center}`
	`.scale{transform:scale()}`
	`.rotate{transform:rotate(0deg)}`




	`.elevation{box-shadow:none}`

CSS

CSS utilities

Margin

7 rules

Rule	CSS Output
	`.m{margin:var(--spacing-md)}`
	`.mx{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}`
	`.my{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}`
	`.mt{margin-top:var(--spacing-md)}`
	`.mb{margin-bottom:var(--spacing-md)}`
	`.ml{margin-left:var(--spacing-md)}`
	`.mr{margin-right:var(--spacing-md)}`

Display

6 rules

Rule	CSS Output
	`.block{display:block}`
	`.inline{display:inline}`
	`.inline-block{display:inline-block}`
	`.inline-flex{display:inline-flex}`
	`.none{display:none}`
	`.hidden{display:none}`

Flexbox

6 rules

Rule	CSS Output


	`.flex{flex:1 1 0%}`


	`.flex-wrap{flex-wrap:wrap}`

Grid

8 rules

Rule	CSS Output
	`.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:var(--spacing-lg, 1rem)}`

Overflow

6 rules

Rule	CSS Output
	`.overflow{overflow:auto}`
	`.overflow-x{overflow-x:auto}`
	`.overflow-y{overflow-y:auto}`
	`.scroll{overflow:auto}`
	`.clip{overflow:hidden}`
	`.overscroll-behavior{overscroll-behavior:auto}`

Positioning

8 rules

Rule	CSS Output
	`.inset{inset:0}`
	`.inset-x{left:0;right:0}`
	`.inset-y{top:0;bottom:0}`

Container

1 rules

Rule	CSS Output
	`.container{width:100%;max-width:980px;margin-left:auto;margin-right:auto;padding-left:max(22px, env(safe-area-inset-left));padding-right:max(22px, env(safe-area-inset-right))}@media (min-width: 735px){padding-left:24px;padding-right:24px}@media (min-width: 1069px){padding-left:32px;padding-right:32px}`

Interaction

Interaction utilities

States

19 rules

Rule	CSS Output


	`.grab{cursor:grab}`
	`.grabbing{cursor:grabbing}`


	`.resize{resize:both}`

	`.no-select{user-select:none}`
	`.no-pointer{pointer-events:none}`





	`.hoverable{transition:all 0.2s ease;cursor:pointer}.hoverable:hover{opacity:0.8}`
	`.clickable{transition:all 0.2s ease;cursor:pointer;user-select:none}.clickable:hover{opacity:0.8}.clickable:active{transform:scale(0.95)}`
	`.focusable:focus-visible{outline:2px solid var(--primary, oklch(62.7% 0.233 303.9));outline-offset:2px}`
	`.pressable{transition:all 0.1s ease;cursor:pointer;user-select:none}.pressable:active{transform:scale(0.95)}`

Animation

18 rules

Rule	CSS Output
	`.fade-up{opacity:0;animation:fade-up 0.8s ease-out 0s 1 normal forwards}`
	`.fade-down{opacity:0;animation:fade-down 0.8s ease-out 0s 1 normal forwards}`
	`.fade-left{opacity:0;animation:fade-left 0.8s ease-out 0s 1 normal forwards}`
	`.fade-right{opacity:0;animation:fade-right 0.8s ease-out 0s 1 normal forwards}`
	`.fade-in{opacity:0;animation:fade-in 0.8s ease-out 0s 1 normal forwards}`
	`.scale-up{opacity:0;animation:scale-up 0.8s ease-out 0s 1 normal forwards}`
	`.scale-down{opacity:0;animation:scale-down 0.8s ease-out 0s 1 normal forwards}`
	`.bounce-in{opacity:0;animation:bounce-in 0.8s ease-out 0s 1 normal forwards}`
	`.slide-up{animation:slide-up 0.8s ease-out 0s 1 normal forwards}`
	`.slide-down{animation:slide-down 0.8s ease-out 0s 1 normal forwards}`
	`.float{animation:float 25s ease-in-out 0s infinite normal forwards}`
	`.float-slow{animation:float-slow 40s ease-in-out 0s infinite normal forwards}`
	`.float-reverse{animation:float-reverse 35s ease-in-out 0s infinite normal forwards}`
	`.pulse{animation:pulse 2s ease-in-out 0s infinite normal forwards}`
	`.slide-in{animation:slide-in 0.3s ease-out 0s 1 normal forwards}`
	`.fade-in-up{opacity:0;animation:fade-in-up 0.6s ease-out 0s 1 normal forwards}`

Utilities

Utilities utilities

Miscellaneous

17 rules

Rule	CSS Output

	`.select-none{user-select:none}`

	`.transition{transition:all 0.2s ease}`


	`.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}`
	`.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}`
	`.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}`




	`.transform{transform:none}`
	`.transform-origin{transform-origin:center}`
	`.scale{transform:scale()}`
	`.rotate{transform:rotate(0deg)}`