rbx-css maps standard CSS properties to their Roblox equivalents. Properties that require UI modifier instances (like UICorner, UIStroke) are covered in Pseudo-instances.
Colors
Background color
.card {
background-color: #335fff;
background-color: rgb(51, 95, 255);
background-color: rgba(51, 95, 255, 0.8);
}
rule:SetProperty("BackgroundColor3", Color3.fromRGB(51, 95, 255))
rule:SetProperty("BackgroundTransparency", 0.2) -- from alpha
| CSS Property | Roblox Property | Notes |
|---|
background-color | BackgroundColor3 | Alpha channel maps to BackgroundTransparency |
background: transparent | BackgroundTransparency | Sets to 1 |
Text color
.text {
color: white;
color: rgba(255, 255, 255, 0.7);
}
rule:SetProperty("TextColor3", Color3.fromRGB(255, 255, 255))
rule:SetProperty("TextTransparency", 0.3) -- from alpha
| CSS Property | Roblox Property | Notes |
|---|
color | TextColor3 | For text elements |
color (with alpha) | TextColor3 + TextTransparency | Alpha inverted to transparency |
Opacity
.element {
opacity: 0.8;
}
rule:SetProperty("BackgroundTransparency", 0.2) -- inverted
CSS opacity values are inverted when mapping to Roblox Transparency properties. CSS opacity: 1 (fully opaque) becomes Roblox Transparency = 0, and CSS opacity: 0 (fully transparent) becomes Transparency = 1.
Sizing
Width and height
.box {
width: 100%;
height: 200px;
}
rule:SetProperty("Size", UDim2.new(1, 0, 0, 200))
| CSS Property | Roblox Property | Transform |
|---|
width + height | Size (UDim2) | Combined into single UDim2 |
width: auto | AutomaticSize | Enum.AutomaticSize.X or XY |
height: auto | AutomaticSize | Enum.AutomaticSize.Y or XY |
Auto sizing
.auto-width {
width: auto;
height: 48px;
}
.auto-both {
width: auto;
height: auto;
}
rule1:SetProperty("AutomaticSize", Enum.AutomaticSize.X)
rule1:SetProperty("Size", UDim2.new(0, 0, 0, 48))
rule2:SetProperty("AutomaticSize", Enum.AutomaticSize.XY)
Size constraints
See Pseudo-instances - UISizeConstraint for min-width, max-width, min-height, max-height.
Position
Left and top
.positioned {
left: 50%;
top: 100px;
}
rule:SetProperty("Position", UDim2.new(0.5, 0, 0, 100))
| CSS Property | Roblox Property | Notes |
|---|
left + top | Position (UDim2) | Combined into single UDim2 |
position: absolute | (default) | All Roblox UI is absolute by default |
CSS properties right and bottom are not supported. Roblox uses anchor points and position instead.
.centered {
transform-origin: center center;
}
.top-left {
transform-origin: left top;
}
.custom {
transform-origin: 25% 75%;
}
rule1:SetProperty("AnchorPoint", Vector2.new(0.5, 0.5))
rule2:SetProperty("AnchorPoint", Vector2.new(0, 0))
rule3:SetProperty("AnchorPoint", Vector2.new(0.25, 0.75))
Z-index
.layer-top {
z-index: 10;
}
rule:SetProperty("ZIndex", 10)
Typography
Font size
.text {
font-size: 18px;
font-size: 1.125rem; /* 18px */
font-size: 1.125em; /* approximated as rem */
}
rule:SetProperty("TextSize", 18)
rule:SetProperty("TextSize", 18) -- rem * 16
rule:SetProperty("TextSize", 18) -- em * 16 (approximation)
| CSS Property | Roblox Property | Supported Units |
|---|
font-size | TextSize | px, rem, em |
Font family, weight, and style
See Fonts for detailed font mapping.
.text {
font-family: 'Gotham', sans-serif;
font-weight: 700;
font-style: italic;
}
rule:SetProperty("FontFace", Font.new(
"rbxasset://fonts/families/GothamSSm.json",
Enum.FontWeight.Bold,
Enum.FontStyle.Italic
))
Text alignment
.text {
text-align: center;
vertical-align: middle;
}
rule:SetProperty("TextXAlignment", Enum.TextXAlignment.Center)
rule:SetProperty("TextYAlignment", Enum.TextYAlignment.Center)
| CSS Property | Roblox Property | Values |
|---|
text-align | TextXAlignment | left → Left, center → Center, right → Right |
vertical-align | TextYAlignment | top → Top, center/middle → Center, bottom → Bottom |
Line height
.text {
line-height: 1.5;
}
rule:SetProperty("LineHeight", 1.5)
Text wrapping and overflow
.wrap {
word-wrap: break-word;
overflow-wrap: break-word;
}
.truncate {
text-overflow: ellipsis;
}
rule1:SetProperty("TextWrapped", true)
rule2:SetProperty("TextTruncate", Enum.TextTruncate.AtEnd)
CSS properties letter-spacing, text-transform, text-decoration, and text-shadow are not supported in Roblox.
Visibility
Display and visibility
.hidden {
display: none;
/* or */
visibility: hidden;
}
rule:SetProperty("Visible", false)
Overflow
.clip {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
rule1:SetProperty("ClipsDescendants", true)
-- rule2: Element upgraded to ScrollingFrame (see manifest)
When overflow: scroll is detected, rbx-css emits a manifest entry. Tools like rbx-tsx use this to upgrade Frame → ScrollingFrame during element creation.
Images
Background image
.image {
background-image: url('rbxassetid://123456');
}
rule:SetProperty("Image", "rbxassetid://123456")
Object fit
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}
.fill {
object-fit: fill;
}
rule1:SetProperty("ScaleType", Enum.ScaleType.Crop)
rule2:SetProperty("ScaleType", Enum.ScaleType.Fit)
rule3:SetProperty("ScaleType", Enum.ScaleType.Stretch)
Scale
See Pseudo-instances - UIScale for transform: scale().
Rotation
.rotated {
transform: rotate(45deg);
transform: rotate(0.785rad);
transform: rotate(0.125turn);
}
rule:SetProperty("Rotation", 45)
rule:SetProperty("Rotation", 45) -- converted from radians
rule:SetProperty("Rotation", 45) -- converted from turns
CSS transform functions like translate(), translateX(), skew(), matrix() are not supported. Only scale() (via UIScale) and rotate() are available.
Aspect ratio
See Pseudo-instances - UIAspectRatioConstraint.
Layout order
rule:SetProperty("LayoutOrder", 2)
| CSS Property | Roblox Property | Notes |
|---|
order | LayoutOrder | Used by UIListLayout and UIGridLayout for sorting |
Unsupported properties
These CSS properties have no Roblox equivalent:
Silently ignored
Common browser and framework properties are silently ignored to avoid noise:
box-sizing, pointer-events, cursor, user-selecttransition-*, animation-*filter, backdrop-filter, mask, clip-pathtext-shadow, text-decoration, text-transform- All table-related properties (
border-collapse, table-layout, etc.)
- Browser-specific prefixed properties
Emit warnings
These properties emit warnings because they may indicate unexpected behavior:
margin-* (Roblox has no margin; use gap on parent flex container instead)min-width, max-width, min-height, max-height (handled by UISizeConstraint pseudo-instance)- Unknown or custom properties not in the ignore list
CSS variables (tokens)
CSS custom properties can be used with var() and map to StyleSheet attributes:
:root {
--primary: #335fff;
--spacing: 16px;
}
.card {
background-color: var(--primary);
padding: var(--spacing);
}
sheet:SetAttribute("primary", Color3.fromRGB(51, 95, 255))
sheet:SetAttribute("spacing", UDim.new(0, 16))
rule:SetProperty("BackgroundColor3", "$primary")
-- padding creates UIPadding pseudo-instance with $spacing reference