Build UDim2 with scale and offset, set the anchor point and see the position live
Positioning GUIs in Roblox is confusing because UDim2 mixes two things on each axis: a Scale, which is a fraction of the container's size (0.5 = half of it), and an Offset, which is a fixed pixel value added on top. The signature is UDim2.new(xScale, xOffset, yScale, yOffset), and the final pixel result is Scale × Parent.AbsoluteSize + Offset. Add the AnchorPoint, which decides which point of the element itself is anchored at that position, and mistakes are easy. This calculator shows a grid and moves a dot in real time as you tweak the values, respecting the chosen anchor, so you instantly see where the element lands. Enter the real size of your container so the math matches your game, and use the pixel-to-scale converter when you already know a pixel position and want the responsive equivalent. When it's right, copy the UDim2.new, or the UDim2.fromScale and UDim2.fromOffset shortcuts, and the AnchorPoint.
UDim2.new(xScale, xOffset, yScale, yOffset) holds two UDim values, one per axis, each with a fraction (Scale) and an absolute pixel value (Offset). To turn that into an actual position or size on screen, the Roblox engine applies Scale × Parent.AbsoluteSize + Offset on each axis, that's why the same Scale produces different results in containers of different sizes, while Offset is always the same number of pixels.
AnchorPoint, a Vector2 with components from 0 to 1, comes in afterward: it shifts the element itself based on its own size, defining which point of it lines up with the computed position. With the default AnchorPoint (0, 0), the element's top-left corner goes there; with (0.5, 0.5), it's the center.
This calculator's preview is a fixed grid just for visualizing proportions; what decides the real numbers is the container size you enter (the AbsoluteSize of the Frame, ScreenGui or any other parent GuiObject). A Scale of 0.5 in a 1280×720 container turns into a very different value than 0.5 in a 375×667 container on a mobile screen, adjusting the size here to the real one avoids copying a UDim2 that looks right in the calculator but lands out of place in the game.
When you already know where you want the element in pixels, for example you looked in Studio and saw it sitting at (640, 360) inside a 1280×720 container, the pixel-to-scale converter computes the equivalent pure Scale (0.5 on each axis, in this example) so you can adopt a responsive layout instead of a fixed value that breaks at another resolution.
The most common mistake is forgetting the AnchorPoint: without adjusting it, Position always places the element's top-left corner, so a centered Position (0.5, 0.5) without an AnchorPoint of (0.5, 0.5) leaves the element visibly shifted down and to the right of center. Another is mixing Scale and Offset without meaning to, UDim2.new(0.5, 50, 0.5, 50) is valid and sometimes exactly what you want (a fixed inset from a proportional center), but if you only meant one of the two, the result behaves unexpectedly when the screen resizes.
Finally, Size and Position use the same UDim2 type but mean different things: in Size, Scale is a fraction of the parent's size and Offset is extra width/height in pixels; in Position, the two together decide where the element's AnchorPoint lands inside the parent. Mixing up the two contexts is a common source of UIs that look right on the developer's screen and wrong on another resolution.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/roblox-udim2-calculator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Roblox UDim2 Calculator"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Scale is relative: a fraction of the container's size on that axis, so 0.5 means half and follows screen resizing. Offset is absolute: a fixed number of pixels added after the scale. UDim2.new(0.5, 10, 0, 0) sits at the horizontal middle of the container, plus 10 pixels, exactly the Scale × Parent.AbsoluteSize + Offset formula Roblox uses to resolve the final position.
Enter the real AbsoluteSize of the Frame/ScreenGui the element will live in; the preview above is just an illustrative scaled grid, the scale values and pixel position use this size.
If you already know the position in pixels inside the container (for example, from looking in Studio), enter it here to find the equivalent pure Scale, with offset zeroed.
UDim2.new(0.5, 0, 0.5, 0)UDim2.fromScale(0.5, 0.5)UDim2.fromOffset(0, 0)Vector2.new(0.5, 0.5)Scale is a fraction of the container (0.5 = half); offset is a fixed pixel value added on top. The anchor point sets which point of the element lands at that position.
Calculation and preview run locally in your browser; nothing is sent to any server.