Fluid Webflow without leaving the Designer

Webflow has no build step of its own. Compile EVA CSS ahead of time, load it as Custom Code, then type var(--XX) directly into any size, spacing or color field.

What you need

A compiled stylesheet

$build-class: false

Variables only — Webflow already has its own class system, you just need the fluid var(--XX) and OKLCH color custom properties.

Somewhere to host it

CDN / repo

Custom Code can link to an external stylesheet, or you can inline it directly if it stays small.

Project Settings access

Custom Code

You need permission to edit the site-wide head code — Designer or Site plan owner.

Workflow

Step 1

Compile EVA variables

$build-class: false — a lean :root block of fluid var(--XX) and OKLCH color variables, nothing else.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128),
  $font-sizes: (14, 16, 20, 24, 32),
  $build-class: false
);

Step 2

Host or inline it

Push the compiled CSS to a CDN/repo URL, or paste it inline inside a <style> tag if it's small.

Step 3

Paste into Custom Code

Project Settings → Custom Code → Head Code. Link the stylesheet or paste the inline <style> block.

<link rel="stylesheet" href="https://cdn.example.com/eva-vars.css">

Step 4

Reference it in the Designer

Type var(--XX) directly into a width, padding, gap or font-size field instead of a fixed number.

width: var(--220)
padding: var(--32)
gap: var(--16)

Step 5

Same for colors

Reference the OKLCH color variables anywhere Webflow accepts a custom value.

background: var(--brand)
color: var(--dark)

Step 6

Drop redundant breakpoints

A field driven by a fluid var already scales — leave the other breakpoints in the Designer untouched for that property.

Important rules

Rule 1

Publish to see it

Custom Code only runs on the published or staged site, not always live inside the Designer canvas.

Rule 2

One source of truth

Keep $sizes in sync with what's actually typed into Webflow's fields.

Rule 3

Don't fight the breakpoints

For a property on a fluid var, leave other breakpoints alone instead of adding overrides on top.

Rule 4

Never hardcode

Always var(--XX), never XXpx — same rule as everywhere else in EVA.