Opacity

• Opacity: A CSS property that sets the transparency level of an element.

• Value Range: Values range from 0 (fully transparent) to 1 (fully opaque).

• Usage: opacity: 0.5; makes an element 50% transparent.

• Inheritance: Applies to both the element and its children.

• Use Cases: Used for effects like overlays, hover animations, and more.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

UI Controls

The Opacity setting includes multiple input methods for convenience and precision:

• Stepper Buttons (+ and –): Increase or decrease the opacity in small increments.

• Numeric Input Field: Users can directly type a specific value (e.g., 0.75, 0.3) into the field for exact control.

• Real-Time Preview: As the value is adjusted (via typing or clicking), the element updates immediately to reflect the new opacity level.

✅ Tip: Typing allows for faster, more accurate adjustments—especially useful when setting exact design specs.