Adjust
CSS filter adjustment wrapper for brightness, contrast, saturation, and hue shifts
Original
Reference surface
Unfiltered card
This is the same composition with no filter adjustment applied.
Adjusted
High-impact preset
Hue-shifted output
This one should read instantly: hue rotation remaps the palette while brightness, contrast, and saturation push the result harder.
`brightness(1.28) contrast(1.45) saturate(2.3) hue-rotate(160deg)`
Contrast Boost
Monochrome
Sepia Tint
Accessibility
- Treat the effect as decorative and keep underlying content understandable without color, blur, or motion alone.
- Respect reduced-motion and contrast requirements when animation or filtering is enabled.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
Import options
Root package
ts
import { Adjust } from '@dryui/ui'Per-component subpath
ts
import { Adjust } from '@dryui/ui/adjust'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| brightness | number | — | — | — | — |
| contrast | number | — | — | — | — |
| saturate | number | — | — | — | — |
| hueRotate | number | — | — | — | — |
| grayscale | number | — | — | — | — |
| sepia | number | — | — | — | — |
| invert | number | — | — | — | — |
| blur | number | — | — | — | — |
| blendMode | BlendMode | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |