Generator Skali Odstępów
Spacing Scale Generator
Podaj rozmiar bazowy i współczynnik skali — dostaniesz spójną drabinkę wartości odstępów, gotową do skopiowania jako zmienne CSS.
Give a base size and a scale ratio — get a consistent ladder of spacing values, ready to copy as CSS variables.
Wpisz PX lub VW — drugie pole przeliczy się automatycznie względem podanej szerokości viewportu.
Enter PX or VW — the other field recalculates automatically relative to the given viewport width.
Proporcja uproszczona przez największy wspólny dzielnik.
Ratio simplified using the greatest common divisor.
To zakres orientacyjny, nie sztywna reguła — dostosuj do konkretnego kroju pisma.
This is a rough range, not a strict rule — adjust for the specific typeface.
Wpisz wartość
Enter a value
Ustaw rozmiar bazowy, wybierz współczynnik skali (liniowy albo jeden z muzycznych/proporcjonalnych) i liczbę kroków.
Set the base size, pick a scale ratio (linear or one of the musical/proportional ones), and the number of steps.
Odczytaj wynik
Read the result
Skopiuj gotowy blok zmiennych CSS :root i wklej go na start swojego arkusza stylów.
Copy the ready :root CSS variable block and paste it at the start of your stylesheet.
Sprawdź pozostałe zakładki
Check the other tabs
Ten sam widget mieści 7 kalkulatorów — przełącz zakładkę, żeby użyć innego bez opuszczania strony.
The same widget holds 7 calculators — switch tabs to use another one without leaving the page.
Po co używać skali zamiast dowolnych wartości odstępów?
Why use a scale instead of arbitrary spacing values?
Spójna skala eliminuje przypadkowe wartości typu 13px czy 22px, które nigdzie indziej się nie powtarzają. Cały interfejs zaczyna wyglądać bardziej uporządkowanie, bo wszystkie odstępy pochodzą z tego samego, przewidywalnego zestawu.
A consistent scale eliminates random values like 13px or 22px that don't repeat anywhere else. The whole interface starts looking more orderly, because every spacing value comes from the same, predictable set.
Który współczynnik skali wybrać?
Which scale ratio should I pick?
Liniowy (+8px na krok) daje przewidywalne, równe skoki — dobry dla prostych interfejsów. Współczynniki proporcjonalne (1.25, 1.333, 1.5, 1.618) dają mniejsze różnice przy małych wartościach i większe przy dużych, co często lepiej oddaje naturalną hierarchię wizualną.
Linear (+8px per step) gives predictable, even jumps — good for simple interfaces. Proportional ratios (1.25, 1.333, 1.5, 1.618) give smaller differences at low values and bigger ones at high values, which often better reflects natural visual hierarchy.
Jak wdrożyć skopiowany kod?
How do I implement the copied code?
Wklej blok :root { --space-1: ...; } na początku arkusza stylów, a potem używaj var(--space-3) zamiast wpisywać konkretne piksele w każdym miejscu z osobna.
Paste the :root { --space-1: ...; } block at the start of your stylesheet, then use var(--space-3) instead of typing specific pixels in each spot separately.
Czym jest skala odstępów
To uporządkowany zestaw wartości (np. 8px, 12px, 16px, 24px, 32px...), z których czerpie się przy każdej decyzji o marginesie czy paddingu — zamiast wymyślać nową liczbę za każdym razem.
Dlaczego symetryczny rozkład wokół bazy
Ten generator liczy skalę symetrycznie wokół rozmiaru bazowego — połowa kroków mniejsza, połowa większa — żeby baza (najczęściej używana wartość) zawsze była w naturalnym środku skali, nie na jej krańcu.
Wdrożenie w praktyce
Po skopiowaniu zmiennych CSS, zespół projektowy i deweloperski mówi tym samym językiem — "--space-3" znaczy dokładnie to samo wszędzie, zamiast każdorazowego wpisywania osobnej wartości w pikselach.
What a spacing scale is
It's an orderly set of values (e.g. 8px, 12px, 16px, 24px, 32px...) that you draw from for every margin or padding decision — instead of inventing a new number every time.
Why a symmetric spread around the base
This generator calculates the scale symmetrically around the base size — half the steps smaller, half larger — so the base (the most commonly used value) always sits naturally in the middle of the scale, not at its edge.
Using it in practice
Once the CSS variables are copied, the design and development team speak the same language — "--space-3" means exactly the same thing everywhere, instead of typing a separate pixel value each time.
Zobacz wszystkie kalkulatory naraz.
See all calculators at once.
Jedna strona zbierająca 7 narzędzi web designera w jednym miejscu.
One page collecting 7 web designer tools in one place.