The Variable Generator in Divi 5 lets you build a complete sizing system and a complete color palette automatically, without writing a single line of CSS.
You launch it from the Variable Manager inside the Visual Builder, choose what you want to generate, and Divi creates a set of reusable Global Variables that update everywhere on your site.
This article explains what the Variable Generator does, where to find it, and how to use both of its modes: the Color Palette Generator for building a relative color system, and the Fluid Sizing Variable Generator for building responsive sizing scales like font sizes, spacing, gaps, and more.
[Screenshot: Variable Manager open in the Visual Builder with both generator buttons visible.]
What the Variable Generator Does
Most design systems share two foundations: a set of brand colors that work together, and a set of sizing values (font sizes, spacing, radius, etc.) that scale consistently across screen sizes. Building those by hand takes time, and getting the math right (especially for fluid typography) requires an advanced understanding of how clamp math function works.
The Variable Generator does that work for you. It produces:
A relative color palette built from a primary color, with light-to-dark shades and transparent variants that all update together when you adjust the primary.
A fluid sizing scale built with
clamp(), so values smoothly resize between a minimum and maximum as the viewport (the visible width of the browser) changes.A fixed responsive scale that outputs separate values per breakpoint (Phone, Tablet, Desktop, etc.).
A fixed single scale that outputs one value across all screen sizes.
Whichever you generate, the output becomes a set of Global Variables in the Variable Manager. From there, every variable plugs straight into your design system. To learn more about how variables work, read Global Variables in Divi 5.
Where to Find the Variable Generator
The Variable Generator lives inside the Variable Manager.
Open any page in the Visual Builder.
In the left sidebar, click the Variable Manager
icon.Hover over the Colors group to reveal the Generate Color Palette Variables button, or hover over the Numbers group to reveal the Generate Fluid Sizing Variables button.
Click the button for the generator you want to use.
The generator opens in a full-screen modal with a configuration sidebar on the left and a live preview area on the right.
Using the Color Palette Generator
The Color Palette Generator builds a complete color system from a single primary color. It uses Divi's relative color system (a way of defining colors as variations of another color using HSL math) to create shades that stay mathematically linked. To learn more about the underlying color system, read Relative Colors & HSL in Divi 5.
Generate a Color Palette
In the Variable Manager, hover over the Colors group and click Generate Color Palette Variables.
Set your primary color. Divi uses this as the foundation for the entire palette.
Adjust the relationship to your secondary color (for example, complementary or analogous).
Choose how many shades you want for each color.
Click Add Variables To My Site to save the palette to your Variable Manager.
What the Color Palette Generator Produces
The generator updates the four base color slots in your Variable Manager (Primary, Secondary, Heading Text, Body Text, and Link) and creates a spectrum of light-to-dark shades and transparent versions of those base colors.
Because every shade is defined relative to the primary color, changing the primary later updates every linked shade automatically. You only have to maintain one source color, and the rest of your palette follows.
Using the Fluid Sizing Variable Generator
The Fluid Sizing Variable Generator builds a scale of related size values, like font sizes that step from small to large, or spacing tokens that step from tight to roomy.
You can generate scales for several different design properties (called token families) and pick how those values should respond to different screen sizes.
Step 1: Open the Generator and Pick a Token Family
In the Variable Manager, hover over the Numbers group and click Generate Fluid Sizing Variables.
From the Number variable type dropdown in the sidebar, choose what you want to generate. The available token families are:
Font Size Scale for typography
Spacing scale for padding and margin
Gap scale for the space between flex and grid items
Radius scale for border radius
Border width scale for border thickness
Width scale for element widths
Clamp (generic) for any single fluid value
Size (generic) for any single fixed value
Divi sets sensible defaults for each token family, so beginners can stop here and skip straight to step 4.
Step 2: Choose a Scale Type
Each token family supports up to three scale types. Pick one based on how you want the values to respond to screen size.
Fluid uses
clamp(), a CSS function that smoothly interpolates a value between a minimum and maximum as the viewport resizes. This is the modern way to do responsive typography and spacing without breakpoints. To learn more, read Advanced Units, CSS Functions, and Variables For Divi 5.Fixed Responsive outputs one value per enabled breakpoint (Phone, Tablet, Desktop, etc.). Use this when you want explicit control at each screen size instead of a smooth curve.
Fixed Single outputs one value that applies across all screen sizes. Use this for tokens that should not respond to screen size at all.
Step 3 (Optional): Customize the Scale
If you want to tune the defaults, the sidebar exposes every aspect of the scale.
Variable prefix - Sets the name prefix for every variable in the scale (for example,
text-produces--text-s,--text-m,--text-l).Generated CSS units - Lets you choose
remorpxfor the output.Suffix style switches between t-shirt names (xs, s, m, l, xl) and numeric names (1, 2, 3, 4, 5).
Base size - Sets which step in the scale is the baseline value.
Min. base and Max. base - Define the size of that baseline at the smallest and largest viewport widths (fluid mode only).
Min. ratio and Max. ratio - Control how aggressively each step grows or shrinks. Divi includes preset ratios like 1.125 (Major Second), 1.25 (Major Third), and 1.618 (Golden Ratio), or you can enter a custom ratio or a linear step.
You can also toggle special tokens like gap-0, space-0, border-none, radius-none, radius-full, and width-full, which are common values that sit outside the modular scale.
Step 4: Preview and Add to Your Site
The right side of the generator shows a live results table with every variable in the scale, the computed values, and a visual preview of how each one will look in practice.
Typography previews show sample text, spacing previews show padded boxes, gap previews show flex rows, and so on.
A few useful controls in the results header:
Customize Values lets you rename individual variables and override specific values without losing the rest of the scale.
Show CSS displays the generated CSS for each variable.
Close Sidebar hides the configuration panel so you can preview the scale at full width.
For fluid scales, a Resize your browser to preview fluid values section appears below the table. Drag your browser window narrower or wider to see the values respond in real time.
When you are ready, click Add Variables To My Site. If a prefix already exists in your Variable Manager, Divi will ask you to confirm before overriding the previous variables.
How the Variable Generator Fits with Presets
The Variable Generator only creates Global Variables. To turn those variables into reusable styles, you combine them with the two preset systems in Divi 5.
Element Presets control the default design for an entire module type (every Button, every Heading, every Blurb).
Option Group Presets control specific groups of settings inside a module (for example, the Border group on a Button).
Global Variables (created by the Variable Generator) hold the actual reusable values your presets reference.
A typical workflow looks like this:
Use the Variable Generator to create your sizing scale and color palette.
Build Option Group Presets that reference those variables for spacing, typography, borders, and color.
Stack those Option Group Presets inside Element Presets so each module type pulls from your generated variables by default.
When you build pages, drop in modules and let them inherit from the presets.
The result is a layered system: change a generated variable to adjust the raw value, change a preset to adjust how that value gets used, and only override on a single module when you need a one-off. To manage your presets, see Preset Manager and Preset Preview Systems in Divi 5.
Frequently Asked Questions
Will the generator overwrite my existing variables?
Will the generator overwrite my existing variables?
Only if you tell it to. If a prefix you are generating already exists in your Variable Manager, Divi prompts you to confirm before replacing the previous variables.
Can I edit values after I add them to my site?
Can I edit values after I add them to my site?
Yes. Once added, the variables become regular Global Variables. Open the Variable Manager and edit them like any other variable.
Why does the preview show px values when my unit is set to rem?
Why does the preview show px values when my unit is set to rem?
The preview always displays sizes in px for readability. The generated CSS still uses your chosen unit (rem or px).
What is the difference between Fluid and Fixed Responsive?
What is the difference between Fluid and Fixed Responsive?
Fluid outputs one clamp() value per token that scales smoothly between a minimum and maximum as the viewport resizes. Fixed Responsive outputs separate values per breakpoint, giving you explicit control at each screen size.
Can I add more variables to a scale after I generate it?
Can I add more variables to a scale after I generate it?
Yes. Use the + Add smaller variable and + Add larger variable buttons in the results table to extend the scale before you add it to your site.