Webflow utility reference

Helper Class Book

Reusable helper and utility classes pulled from the current global styles, with live previews and responsive overrides.

Updated from latest helper source
No helper utilities match your search.

Colors

Background, text, border and SVG-fill helpers with live previews.

Background color

25 utilities
.bg-accent
Aa
background-color: var(--_color---brand--accent, #8b6eff);
.bg-accent-muted
Aa
background-color: var(--_color---brand--accent-muted, #5f488a);
.bg-primary
Aa
background-color: var(--_color---background--primary, #121318);
.bg-surface
Aa
background-color: var(--_color---background--surface, #21242e);
.bg-line
Aa
background-color: var(--_color---border--default, #343746);
.bg-white
Aa
background-color: var(--_color---neutral--white, #ffffff);
.bg-black
Aa
background-color: var(--_color---neutral--black, #000000);
.bg-light
Aa
background-color: var(--_color---neutral--light, #ececec);
.bg-clear
Aa
background-color: var(--_color---neutral--transparent, transparent);
.bg-blue-soft
Aa
background-color: var(--_color---accent--blue-soft, #bfcce5);
.bg-blue-softer
Aa
background-color: var(--_color---accent--blue-softer, #dce3f9);
.bg-on-dark
Aa
background-color: var(--_color---text--on-dark, #ffffff);
.bg-on-light
Aa
background-color: var(--_color---text--on-light, #0a0a0a);
.bg-error
Aa
background-color: var(--_color---feedback--error, #ef3344);
.bg-notice
Aa
background-color: var(--_color---feedback--notice, #f08221);
.bg-dark-blue
Aa
background-color: var(--_color---background--dark-blue, #08031C);
.bg-notice-alt
Aa
background-color: var(--_color---feedback--notice-alt, #f18c23);
.bg-warning
Aa
background-color: var(--_color---feedback--warning, #fcd54e);
.bg-scrim-05
Aa
background-color: var(--_color---overlay--scrim-05, #1213180d);
.bg-scrim-20
Aa
background-color: var(--_color---overlay--scrim-20, #12131833);
.bg-scrim-40
Aa
background-color: var(--_color---overlay--scrim-40, #12131866);
.bg-scrim-50
Aa
background-color: var(--_color---overlay--scrim-50, #12131882);
.bg-scrim-70
Aa
background-color: var(--_color---overlay--scrim-07, rgba(18, 19, 24, 0.7));
.bg-subtle
Aa
background-color: rgba(128, 128, 128, 0.07);
.bg-green
Aa
background-color: #00D68F;

Text color

17 utilities
.tc-accent
The quick brown fox
color: var(--_color---brand--accent, #8b6eff);
.tc-accent-muted
The quick brown fox
color: var(--_color---brand--accent-muted, #5f488a);
.tc-primary
The quick brown fox
color: var(--_color---background--primary, #121318);
.tc-surface
The quick brown fox
color: var(--_color---background--surface, #21242e);
.tc-line
The quick brown fox
color: var(--_color---border--default, #343746);
.tc-white
The quick brown fox
color: var(--_color---neutral--white, #ffffff);
.tc-black
The quick brown fox
color: var(--_color---neutral--black, #000000);
.tc-light
The quick brown fox
color: var(--_color---neutral--light, #ececec);
.tc-blue-soft
The quick brown fox
color: var(--_color---accent--blue-soft, #bfcce5);
.tc-blue-softer
The quick brown fox
color: var(--_color---accent--blue-softer, #dce3f9);
.tc-on-dark
The quick brown fox
color: var(--_color---text--on-dark, #ffffff);
.tc-on-light
The quick brown fox
color: var(--_color---text--on-light, #0a0a0a);
.tc-error
The quick brown fox
color: var(--_color---feedback--error, #ef3344);
.tc-notice
The quick brown fox
color: var(--_color---feedback--notice, #f08221);
.tc-notice-alt
The quick brown fox
color: var(--_color---feedback--notice-alt, #f18c23);
.tc-warning
The quick brown fox
color: var(--_color---feedback--warning, #fcd54e);
.tc-green
The quick brown fox
color: #00D68F;

Text color — wrapper + descendants

7 utilities
.tc-accent-all
The quick brown fox
color: var(--_color---brand--accent, #8b6eff); color: var(--_color---brand--accent, #8b6eff);
.tc-white-all
The quick brown fox
color: var(--_color---neutral--white, #ffffff); color: var(--_color---neutral--white, #ffffff);
.tc-light-all
The quick brown fox
color: var(--_color---neutral--light, #ececec); color: var(--_color---neutral--light, #ececec);
.tc-blue-soft-all
The quick brown fox
color: var(--_color---accent--blue-soft, #bfcce5); color: var(--_color---accent--blue-soft, #bfcce5);
.tc-blue-softer-all
The quick brown fox
color: var(--_color---accent--blue-softer, #dce3f9); color: var(--_color---accent--blue-softer, #dce3f9);
.tc-on-dark-all
The quick brown fox
color: var(--_color---text--on-dark, #ffffff); color: var(--_color---text--on-dark, #ffffff);
.tc-on-light-all
The quick brown fox
color: var(--_color---text--on-light, #0a0a0a); color: var(--_color---text--on-light, #0a0a0a);

Border color

8 utilities
.bc-line
Border
border-color: var(--_color---border--default, #343746);
.bc-accent
Border
border-color: var(--_color---brand--accent, #8b6eff);
.bc-accent-muted
Border
border-color: var(--_color---brand--accent-muted, #5f488a);
.bc-white
Border
border-color: var(--_color---neutral--white, #ffffff);
.bc-light
Border
border-color: var(--_color---neutral--light, #ececec);
.bc-surface
Border
border-color: var(--_color---background--surface, #21242e);
.bc-error
Border
border-color: var(--_color---feedback--error, #ef3344);
.bc-clear
Border
border-color: var(--_color---neutral--transparent, transparent);

SVG fill

6 utilities
.fc-accent
fill: var(--_color---brand--accent, #8b6eff); fill: var(--_color---brand--accent, #8b6eff); fill: var(--_color---brand--accent, #8b6eff);
.fc-white
fill: var(--_color---neutral--white, #ffffff); fill: var(--_color---neutral--white, #ffffff); fill: var(--_color---neutral--white, #ffffff);
.fc-light
fill: var(--_color---neutral--light, #ececec); fill: var(--_color---neutral--light, #ececec); fill: var(--_color---neutral--light, #ececec);
.fc-on-light
fill: var(--_color---text--on-light, #0a0a0a); fill: var(--_color---text--on-light, #0a0a0a); fill: var(--_color---text--on-light, #0a0a0a);
.fc-blue-soft
fill: var(--_color---accent--blue-soft, #bfcce5); fill: var(--_color---accent--blue-soft, #bfcce5); fill: var(--_color---accent--blue-soft, #bfcce5);
.fc-error
fill: var(--_color---feedback--error, #ef3344); fill: var(--_color---feedback--error, #ef3344); fill: var(--_color---feedback--error, #ef3344);

Typography

Font families, weights and the new text-size utility scale.

Text size helpers

Mirrors the u-heading / u-text component variants. Responsive overrides are shown where present.

15 utilities
.ts-110
Aa
110px helper
font-size: 110px; line-height: 100%;
≤ 991px font-size: 60px;
.ts-72
Aa
72px helper
font-size: 72px; line-height: 110%;
.ts-64
Aa
64px helper
font-size: 64px; line-height: 110%;
≤ 991px font-size: 40px; line-height: 120%;
.ts-58
Aa
58px helper
font-size: 58px; line-height: 100%;
≤ 991px font-size: 40px; line-height: 120%;
.ts-48
Aa
48px helper
font-size: 48px; line-height: 120%;
≤ 991px font-size: 40px;
.ts-42
Aa
42px helper
font-size: 42px; line-height: 120%;
.ts-40
Aa
40px helper
font-size: 40px; line-height: 110%;
.ts-32
Aa
32px helper
font-size: 32px; line-height: 120%;
.ts-26
Aa
26px helper
font-size: 26px; line-height: 120%;
≤ 991px font-size: 19px;
.ts-24
Aa
24px helper
font-size: 24px; line-height: 150%;
≤ 991px font-size: 18px;
.ts-20
Aa
20px helper
font-size: 20px; line-height: 150%;
.ts-18
Aa
18px helper
font-size: 18px; line-height: 150%;
.ts-16
Aa
16px helper
font-size: 16px; line-height: 162.5%;
.ts-14
Aa
14px helper
font-size: 14px; line-height: 162.5%;
.ts-12
Aa
12px helper
font-size: 12px; line-height: 162.5%;

Spacing

The spacing scale and reusable padding / margin utility patterns.

Spacing scale

px → rem
0px0rem
2px0.125rem
4px0.25rem
8px0.5rem
12px0.75rem
16px1rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem
48px3rem
56px3.5rem
64px4rem
72px4.5rem
80px5rem
96px6rem
120px7.5rem
160px10rem
200px12.5rem

Utility patterns

Click any class to copy
p-*padding
≤991
pt-*padding-top
≤991
pr-*padding-right
≤991
pb-*padding-bottom
≤991
pl-*padding-left
≤991
plr-*padding-left + right
≤991
ptb-*padding-top + bottom
≤991
m-*margin
≤991
mt-*margin-top
≤991
mr-*margin-right
≤991
mb-*margin-bottom
≤991
ml-*margin-left
≤991
mlr-*margin-left + right
≤991
mtb-*margin-top + bottom
≤991

Global helpers

Reusable layout, type, sizing, object-fit and ordering utilities.

Object fit

5 utilities
.object-fit-fill
object-fit: fill;
.object-fit-contain
object-fit: contain;
.object-fit-cover
object-fit: cover;
.object-fit-none
object-fit: none;
.object-fit-scale-down
object-fit: scale-down;

Object position

9 utilities
.object-position-center
object-position: center;
.object-position-top
object-position: top;
.object-position-right
object-position: right;
.object-position-bottom
object-position: bottom;
.object-position-left
object-position: left;
.object-position-top-left
object-position: left top;
.object-position-top-right
object-position: right top;
.object-position-bottom-left
object-position: left bottom;
.object-position-bottom-right
object-position: right bottom;

Fonts & weights

8 utilities
.aeonik-light
Aa Utility
font-family: "Aeonik Light", Arial, sans-serif; font-weight: 300;
.aeonik
Aa Utility
font-family: "Aeonik", Arial, sans-serif; font-weight: 400;
.aeonik-mono
Aa Utility
font-family: "Aeonik Mono", Arial, sans-serif; font-weight: 700;
.fw-300
Aa Utility
font-weight: 300;
.fw-400
Aa Utility
font-weight: 400;
.fw-500
Aa Utility
font-weight: 500;
.fw-600
Aa Utility
font-weight: 600;
.fw-700
Aa Utility
font-weight: 700;

Images

7 utilities
.full-absolute-img
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.full-absolute-image
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.img-absolute-full
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.image-absolute-full
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.img-full-absolute
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.image-full-absolute
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;
.image-full
width: 100%; height: 100%;

Size & positioning

14 utilities
.w-auto
width: auto
width: auto;
.absolute-full
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
.full-absolute
relative parent
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
.h-full
height: 100%;
.w-full
width: 100%;
.minh-10svh
10svh
min-height: 10svh;
.minh-20svh
20svh
min-height: 20svh;
.minh-30svh
30svh
min-height: 30svh;
.minh-33svh
33svh
min-height: 33svh;
.minh-50svh
50svh
min-height: 50svh;
.minh-60svh
60svh
min-height: 60svh;
.minh-66svh
66svh
min-height: 66svh;
.h-full-m
height: 100%;
≤ 991px height: 100%;
Tablet and below
.w-full-m
width: 100%;
≤ 991px width: 100%;
Tablet and below

Flex

32 utilities
.f-flex
123
display: flex;
.f-row
123
display: flex; flex-direction: row;
.f-col
123
display: flex; flex-direction: column;
.f-wrap
123
flex-wrap: wrap;
.f-nowrap
123
flex-wrap: nowrap;
.f-align-start
123
align-items: flex-start;
.f-align-center
123
align-items: center;
.f-align-end
123
align-items: flex-end;
.f-align-stretch
123
align-items: stretch;
.f-align-baseline
123
align-items: baseline;
.f-justify-content-start
123
justify-content: flex-start;
.f-justify-content-center
123
justify-content: center;
.f-justify-content-end
123
justify-content: flex-end;
.f-justify-content-between
123
justify-content: space-between;
.f-justify-content-around
123
justify-content: space-around;
.f-justify-content-evenly
123
justify-content: space-evenly;
.f-flex-m
123
display: flex;
≤ 991px display: flex;
Tablet and below
.f-row-m
123
display: flex; flex-direction: row;
≤ 991px display: flex; flex-direction: row;
Tablet and below
.f-col-m
123
display: flex; flex-direction: column;
≤ 991px display: flex; flex-direction: column;
Tablet and below
.f-wrap-m
123
flex-wrap: wrap;
≤ 991px flex-wrap: wrap;
Tablet and below
.f-nowrap-m
123
flex-wrap: nowrap;
≤ 991px flex-wrap: nowrap;
Tablet and below
.f-align-start-m
123
align-items: flex-start;
≤ 991px align-items: flex-start;
Tablet and below
.f-align-center-m
123
align-items: center;
≤ 991px align-items: center;
Tablet and below
.f-align-end-m
123
align-items: flex-end;
≤ 991px align-items: flex-end;
Tablet and below
.f-align-stretch-m
123
align-items: stretch;
≤ 991px align-items: stretch;
Tablet and below
.f-align-baseline-m
123
align-items: baseline;
≤ 991px align-items: baseline;
Tablet and below
.f-justify-content-start-m
123
justify-content: flex-start;
≤ 991px justify-content: flex-start;
Tablet and below
.f-justify-content-center-m
123
justify-content: center;
≤ 991px justify-content: center;
Tablet and below
.f-justify-content-end-m
123
justify-content: flex-end;
≤ 991px justify-content: flex-end;
Tablet and below
.f-justify-content-between-m
123
justify-content: space-between;
≤ 991px justify-content: space-between;
Tablet and below
.f-justify-content-around-m
123
justify-content: space-around;
≤ 991px justify-content: space-around;
Tablet and below
.f-justify-content-evenly-m
123
justify-content: space-evenly;
≤ 991px justify-content: space-evenly;
Tablet and below

Grid alignment

16 utilities
.g-align-start
123
align-items: start;
.g-align-center
123
align-items: center;
.g-align-end
123
align-items: end;
.g-align-stretch
123
align-items: stretch;
.g-justify-items-start
123
justify-items: start;
.g-justify-items-center
123
justify-items: center;
.g-justify-items-end
123
justify-items: end;
.g-justify-items-stretch
123
justify-items: stretch;
.g-align-start-m
123
align-items: start;
≤ 991px align-items: start;
Tablet and below
.g-align-center-m
123
align-items: center;
≤ 991px align-items: center;
Tablet and below
.g-align-end-m
123
align-items: end;
≤ 991px align-items: end;
Tablet and below
.g-align-stretch-m
123
align-items: stretch;
≤ 991px align-items: stretch;
Tablet and below
.g-justify-items-start-m
123
justify-items: start;
≤ 991px justify-items: start;
Tablet and below
.g-justify-items-center-m
123
justify-items: center;
≤ 991px justify-items: center;
Tablet and below
.g-justify-items-end-m
123
justify-items: end;
≤ 991px justify-items: end;
Tablet and below
.g-justify-items-stretch-m
123
justify-items: stretch;
≤ 991px justify-items: stretch;
Tablet and below

Text alignment & line-height

7 utilities
.t-left
Utility text
text-align: left;
.t-center
Utility text
text-align: center;
.t-right
Utility text
text-align: right;
.t-lh-150
Utility text
line-height: 150%;
.t-left-m
Utility text
text-align: left;
≤ 991px text-align: left;
Tablet and below
.t-center-m
Utility text
text-align: center;
≤ 991px text-align: center;
Tablet and below
.t-right-m
Utility text
text-align: right;
≤ 991px text-align: right;
Tablet and below

Order

18 utilities
.o-first
ABC
order: -1;
.o-last
ABC
order: 999;
.o-0
ABC
order: 0;
.o-1
ABC
order: 1;
.o-2
ABC
order: 2;
.o-3
ABC
order: 3;
.o-4
ABC
order: 4;
.o-5
ABC
order: 5;
.o-6
ABC
order: 6;
.o-first-m
ABC
order: -1;
≤ 991px order: -1;
Tablet and below
.o-last-m
ABC
order: 999;
≤ 991px order: 999;
Tablet and below
.o-0-m
ABC
order: 0;
≤ 991px order: 0;
Tablet and below
.o-1-m
ABC
order: 1;
≤ 991px order: 1;
Tablet and below
.o-2-m
ABC
order: 2;
≤ 991px order: 2;
Tablet and below
.o-3-m
ABC
order: 3;
≤ 991px order: 3;
Tablet and below
.o-4-m
ABC
order: 4;
≤ 991px order: 4;
Tablet and below
.o-5-m
ABC
order: 5;
≤ 991px order: 5;
Tablet and below
.o-6-m
ABC
order: 6;
≤ 991px order: 6;
Tablet and below

Grid system

The reusable .g_grid helper and its current layout presets.

.g_grid

Creates the grid container. Desktop columns are controlled with data-layout.

data-mobile="…"

At ≤991px the mobile template can override the desktop layout.

data-layout="1"
1
data-layout="2"
12
data-layout="3"
123
data-layout="4"
1234
data-layout="5"
12345
data-layout="6"
123456
data-layout="7"
1234567
data-layout="9"
1234567
data-layout="1-2"
12
data-layout="2-1"
12
data-layout="57-43"
12
data-layout="4-1"
12

Mobile presets

≤ 991px

Backgrounds & gradients

Reusable background presentation helpers.

Background helpers

10 utilities
.gradient-bg
.gradient-bg
background-color:#000; background-image:radial-gradient(at 50% 0%, rgb(139, 110, 255) 0%, rgb(10, 10, 10) 100%); background-color: #0A0A0A; content:""; width:100%; height:100%; top:0; left:0; position:absolute; mix-blend-mode: initial; opacity: 0.8;
.gradient-gray
.gradient-gray
linear-gradient(90deg, #121318 0%, #21242E 100%);
.accent-gradient-bg
.accent-gradient-bg
background-color: transparent; background-image: linear-gradient(180deg, var(--_color---brand--accent) 0%, var(--_color---brand--accent-muted) 100%);
.accent-gradient-bg-2
.accent-gradient-bg-2
background-color: transparent; background-image: linear-gradient(150deg, var(--_color---text--on-light) 20%, var(--_color---brand--accent) 100%);
.u-bg-layer
layer
position: absolute; inset: 0; z-index: 0; pointer-events: none;
.u-bg-glow-accent
.u-bg-glow-accent
background-image: radial-gradient(ellipse 70.71% 141.42% at 50% 0%, #241e3b 0%, var(--_color---background--ink) 100%);
.u-bg-glow-accent-tight
.u-bg-glow-accent-tight
background-color: var(--_color---background--ink); background-image: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(139, 110, 255, 0.22) 0%, rgba(139, 110, 255, 0) 70%);
.u-bg-sweep-primary-surface
.u-bg-sweep-primary-surface
background-image: linear-gradient(90deg, var(--_color---background--primary) 0%, var(--_color---background--surface) 100%);
.u-bg-sweep-accent-accentmuted
.u-bg-sweep-accent-accentmuted
background-image: linear-gradient(180deg, var(--_color---brand--accent) 0%, var(--_color---brand--accent-muted) 100%);
.u-bg-sweep-ink-accent
.u-bg-sweep-ink-accent
background-image: linear-gradient(150deg, var(--_color---background--ink) 20%, var(--_color---brand--accent) 100%);