Utilities
Effects
Generated from the registry, so this page can't drift from the compiler.
shadow
Adds a box shadow.
Syntax
shadow(value)
shadow[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | shadows token | sm md lg |
| keyword | none | |
| var(--name) | See type |
Examples and generated CSS
shadow(md)
shadow(none)
shadow[0_0_40px_#c8fd12].shadow\(md\) {
box-shadow: var(--croff-shadow-md);
}
.shadow\(none\) {
box-shadow: none;
}
.shadow\[0_0_40px_\#c8fd12\] {
box-shadow: 0 0 40px #c8fd12;
}Theme behavior
Reads tokens from shadows. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:shadow(md)
hover:shadow(md)
lg:focus:shadow(md)opacity
Sets opacity as a percentage.
Syntax
opacity(value)
opacity[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | percentage, 0–100 | See type |
Examples and generated CSS
opacity(50)
disabled:opacity(50)
opacity[0.125].opacity\(50\) {
opacity: 0.5;
}
.opacity\[0\.125\] {
opacity: 0.125;
}
.disabled\:opacity\(50\):disabled {
opacity: 0.5;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:opacity(50)
hover:opacity(50)
lg:focus:opacity(50)cursor
Sets the mouse cursor.
Syntax
cursor(value)
cursor[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto default pointer wait text move help not-allowed none grab grabbing |
Examples and generated CSS
cursor(pointer)
disabled:cursor(not-allowed)
cursor[url(/c.png),auto].cursor\(pointer\) {
cursor: pointer;
}
.cursor\[url\(\/c\.png\)\,auto\] {
cursor: url(/c.png),auto;
}
.disabled\:cursor\(not-allowed\):disabled {
cursor: not-allowed;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:cursor(pointer)
hover:cursor(pointer)
lg:focus:cursor(pointer)transition
Animates changes to a group of properties, using the normal duration.
Syntax
transition(properties)
transition[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
properties | keyword | none all colors opacity shadow transform |
Examples and generated CSS
transition(colors)
transition(all)
transition(none)
transition[width_1s_linear].transition\(all\) {
transition-property: all;
transition-duration: var(--croff-duration-normal);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition\(colors\) {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-duration: var(--croff-duration-normal);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition\(none\) {
transition-property: none;
}
.transition\[width_1s_linear\] {
transition: width 1s linear;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:transition(colors)
hover:transition(colors)
lg:focus:transition(colors)duration
Sets the transition duration from a token, or a whole number of milliseconds.
Syntax
duration(value)
duration[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | durations token | fast normal slow |
| milliseconds | See type | |
| var(--name) | See type |
Examples and generated CSS
duration(fast)
duration(350)
duration[1.5s].duration\(350\) {
transition-duration: 350ms;
}
.duration\(fast\) {
transition-duration: var(--croff-duration-fast);
}
.duration\[1\.5s\] {
transition-duration: 1.5s;
}Theme behavior
Reads tokens from durations. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:duration(fast)
hover:duration(fast)
lg:focus:duration(fast)transform
Applies one or more transform functions.
Syntax
transform(functions,…)
transform[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
functions… | keyword | none |
| transform function | translate(…) translate-x(…) translate-y(…) scale(…) scale-x(…) scale-y(…) rotate(…) skew(…) skew-x(…) skew-y(…) | |
| var(--name) | See type |
Examples and generated CSS
transform(rotate(45deg))
hover:transform(translate-y(-2px),scale(1.02))
transform(none)
transform[perspective(100px)_rotateX(5deg)].transform\(none\) {
transform: none;
}
.transform\(rotate\(45deg\)\) {
transform: rotate(45deg);
}
.transform\[perspective\(100px\)_rotateX\(5deg\)\] {
transform: perspective(100px) rotateX(5deg);
}
.hover\:transform\(translate-y\(-2px\)\,scale\(1\.02\)\):hover {
transform: translateY(-2px) scale(1.02);
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme. Transform functions in the call form are limited to literal numbers. Use brackets for anything else. To scale and nothing else, scale is shorter.
Responsive and state usage
md:transform(rotate(45deg))
hover:transform(rotate(45deg))
lg:focus:transform(rotate(45deg))scale
Scales an element, as a percentage: scale(105) is 1.05 times its size.
Syntax
scale(percent)
scale[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
percent | percentage, -1000–1000 | See type |
| var(--name) | See type |
Examples and generated CSS
scale(105)
scale(95)
hover:scale(105)
md:hover:scale(110)
scale(var(--zoom))
scale[1.05]
scale[1.2,0.8].scale\(105\) {
transform: scale(1.05);
}
.scale\(95\) {
transform: scale(0.95);
}
.scale\(var\(--zoom\)\) {
transform: scale(var(--zoom));
}
.scale\[1\.05\] {
transform: scale(1.05);
}
.scale\[1\.2\,0\.8\] {
transform: scale(1.2,0.8);
}
.hover\:scale\(105\):hover {
transform: scale(1.05);
}
@media (min-width: 768px) {
.md\:hover\:scale\(110\):hover {
transform: scale(1.1);
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme. scale and transform both set the transform property, so they don't combine. If both apply, scale wins. To scale and rotate together, use transform(scale(1.05),rotate(5deg)). Inside transform, the scale function takes a factor, not a percentage.
Responsive and state usage
md:scale(105)
hover:scale(105)
lg:focus:scale(105)