Hydrogen supports all available CSS properties as attributes, assuming you pass their queries standard CSS syntax. This page outlines which properties support the use of keys configured in your settings. If a property is missing from this page, it doesn't mean you can't use it, just that it isn't (yet) supported for configured values.

The following properties support colors configured in your settings file. You can learn about configuring custom colors in the configuration section and you can learn more about using configured colors in the styling section.

• accent-color
• background
• background-color
• border
• border-color
• border-top
• border-right
• border-bottom
• border-left
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• border-block
• border-block-color
• border-block-start
• border-block-end
• border-block-start-color
• border-block-end-color
• border-inline
• border-inline-color
• border-inline-start
• border-inline-end
• border-inline-start-color
• border-inline-end-color
• box-shadow
• color
• fill
• outline
• outline-color
• stroke
• text-emphasis
• text-emphasis-color
• text-decoration
• text-decoration-color
• text-shadow

The following properties support font families configured in your settings file. You can learn about configuring custom font families in the configuration section.

• font
• font-family

The following properties support font weights configured in your settings file. You can learn about configuring custom font weights in the configuration section.

• font-weight

The following properties support gradients configured in your settings file. You can learn about configuring custom gradients in the configuration section in the styling section.

• background
• background-image

The following properties support radii configured in your settings file. You can learn about configuring custom radii in the configuration section in the styling section.

• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

The following properties support shadows configured in your settings file. You can learn about configuring custom shadows in the configuration section in the styling section.

• box-shadow
• text-shadow

The following properties support Hydrogen space multipliers. You can learn about using space multipliers in the styling section.

• background
• background-position
• background-position-x
• background-position-y
• background-size
• border
• border-radius
• border-width
• border-top
• border-right
• border-bottom
• border-left
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-block
• border-block-width
• border-block-start
• border-block-end
• border-block-start-width
• border-block-end-width
• border-inline
• border-inline-width
• border-inline-start
• border-inline-end
• border-inline-start-width
• border-inline-end-width
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• box-shadow
• column-rule
• column-rule-width
• column-width
• columns
• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• flex
• flex-basis
• gap
• column-gap
• row-gap
• grid
• grid-template
• grid-template-columns
• grid-template-rows
• height
• width
• line-height
• leading
• list-style-position
• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• margin-block
• margin-block-start
• margin-block-end
• margin-inline
• margin-inline-start
• margin-inline-end
• max-inline-size
• max-block-size
• max-height
• max-width
• min-inline-size
• min-block-size
• min-height
• min-width
• offset
• outline
• outline-width
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left
• padding-block
• padding-block-start
• padding-block-end
• padding-inline
• padding-inline-start
• padding-inline-end
• position
• scroll-margin
• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-block
• scroll-margin-block-start
• scroll-margin-block-end
• scroll-margin-inline
• scroll-margin-inline-start
• scroll-margin-inline-end
• scroll-padding
• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-block
• scroll-padding-block-start
• scroll-padding-block-end
• scroll-padding-inline
• scroll-padding-inline-start
• scroll-padding-inline-end
• scrollbar-width
• shape-margin
• tab-size
• text-decoration
• text-decoration-thickness
• text-indent
• text-shadow
• top
• right
• bottom
• left
• transform

The following properties support transition values configured in your settings file. You can learn about configuring custom transition values in the configuration section in the styling section.

• transition
• transition-duration
• transition-timing-function
• transition-delay