Effects and Transforms

Add depth and motion with Flutterwind visual utilities.

Shadow and filter utilities

TypeExamples
Shadowshadow-sm, shadow, shadow-md, shadow-lg
Blurblur-none, blur-sm, blur-md, blur-lg
Brightnessbrightness-75, brightness-100, brightness-125
Contrastcontrast-75, contrast-100, contrast-150
Drop shadowdrop-shadow-sm, drop-shadow-md, drop-shadow-lg
Container(
  width: 200,
  height: 100,
  color: Colors.white,
).className('rounded-xl shadow-md drop-shadow-sm')

Transform utilities

TypeExamples
Scalescale-95, scale-100, scale-105, scale-125
Rotaterotate-3, rotate-6, rotate-12
Translatetranslate-x-2, translate-y-1, -translate-y-1
Skewskew-x-3, skew-y-3
Container(
  width: 120,
  height: 120,
  color: Colors.indigo,
).className('rounded-lg scale-105 rotate-3')

Practical interaction pattern

Use subtle transforms and shadows on hover/focus states for interactive elements:

ElevatedButton(
  onPressed: () {},
  child: const Text('Continue'),
).className('bg-indigo-600 text-white shadow-sm hover:shadow-md hover:scale-105')
Edit this page
Typography and Colors
Apply text, color, and visual styling utilities.
Transform Cheatsheet
Quick reference for scale, rotate, translate, skew, and origin utilities.