filters

Filter utilities for Tailwind CSS

Filter Control

Control whether to apply filter styles to an element:

---

test_filters_control_examples

def test_filters_control_examples(
    
):

Test filter control utilities.

filter_none = SingleValueFactory("filter-none", "Remove all filters from an element") # Remove filters

def test_filters_control_examples():
    """Test filter control utilities."""
    assert str(filter_none) == "filter-none"
    assert str(filter_none()) == "filter-none"
    assert filter_none.build() == "filter-none"

# Run the tests
test_filters_control_examples()

Blur Filter

Apply blur filters to an element:

---

BlurScale

def BlurScale(
    name:str, pixels:str, var:str
)->None:

Represents a blur scale with name and pixel value.

---

test_filters_blur_examples

def test_filters_blur_examples(
    
):

Test blur filter utilities.

# Blur scale definitions based on Tailwind v4 docs
BLUR_SCALES = [
    BlurScale("xs", "4px", "--blur-xs"),
    BlurScale("sm", "8px", "--blur-sm"),
    BlurScale("md", "12px", "--blur-md"),
    BlurScale("lg", "16px", "--blur-lg"),
    BlurScale("xl", "24px", "--blur-xl"),
    BlurScale("2xl", "40px", "--blur-2xl"),
    BlurScale("3xl", "64px", "--blur-3xl"),
]

# Create blur factory using SimpleFactory for named scales
blur = SimpleFactory(
    {
        "none": "blur-none",
        "xs": "blur-xs",
        "sm": "blur-sm",
        "md": "blur-md",
        "lg": "blur-lg",
        "xl": "blur-xl",
        "_2xl": "blur-2xl",
        "_3xl": "blur-3xl"
    },
    "Blur filter utilities for applying blur effects to an element"
) # Blur filter factory

def test_filters_blur_examples():
    """Test blur filter utilities."""
    # Test named blur scales
    assert str(blur.none) == "blur-none"
    assert str(blur.xs) == "blur-xs"
    assert str(blur.sm) == "blur-sm"
    assert str(blur.md) == "blur-md"
    assert str(blur.lg) == "blur-lg"
    assert str(blur.xl) == "blur-xl"
    assert str(blur._2xl) == "blur-2xl"
    assert str(blur._3xl) == "blur-3xl"

# Run the tests
test_filters_blur_examples()

Brightness Filter

Control the brightness of an element:

---

test_filters_brightness_examples

def test_filters_brightness_examples(
    
):

Test brightness filter utilities.

# Brightness percentage values (common presets)
BRIGHTNESS_VALUES = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200]

# Create brightness configuration for percentage scale
brightness_config = ScaleConfig(
    numeric=True,  # Support numeric values
    decimals=False,
    fractions=False,
    named=None,
    special=None,
    negative=False
)

# Create brightness factory
brightness = ScaledFactory("brightness", brightness_config, "Brightness filter utilities for adjusting element brightness")

def test_filters_brightness_examples():
    """Test brightness filter utilities."""
    # Test common brightness values
    assert str(brightness(0)) == "brightness-0"
    assert str(brightness(50)) == "brightness-50"
    assert str(brightness(100)) == "brightness-100"
    assert str(brightness(150)) == "brightness-150"
    assert str(brightness(200)) == "brightness-200"
    
    # Test arbitrary values
    assert str(brightness("730")) == "brightness-[730]"
    assert str(brightness("125%")) == "brightness-[125%]"
    
    # Test custom properties
    assert str(brightness("--custom-brightness")) == "brightness-(--custom-brightness)"

# Run the tests
test_filters_brightness_examples()

Contrast Filter

Control the contrast of an element:

---

test_filters_contrast_examples

def test_filters_contrast_examples(
    
):

Test contrast filter utilities.

# Contrast percentage values (common presets)
CONTRAST_VALUES = [0, 50, 75, 100, 125, 150, 200]

# Create contrast factory using same config as brightness
contrast = ScaledFactory("contrast", brightness_config, "Contrast filter utilities for adjusting element contrast")

def test_filters_contrast_examples():
    """Test contrast filter utilities."""
    # Test common contrast values
    assert str(contrast(0)) == "contrast-0"
    assert str(contrast(50)) == "contrast-50"
    assert str(contrast(100)) == "contrast-100"
    assert str(contrast(125)) == "contrast-125"
    assert str(contrast(200)) == "contrast-200"
    
    # Test arbitrary values
    assert str(contrast("870")) == "contrast-[870]"
    assert str(contrast("150%")) == "contrast-[150%]"
    
    # Test custom properties
    assert str(contrast("--custom-contrast")) == "contrast-(--custom-contrast)"

# Run the tests
test_filters_contrast_examples()

Drop Shadow Filter

Apply drop shadow filters to an element:

---

DropShadowScale

def DropShadowScale(
    name:str, shadow:str, var:str
)->None:

Represents a drop shadow scale with name and shadow value.

---

test_filters_drop_shadow_examples

def test_filters_drop_shadow_examples(
    
):

Test drop shadow filter utilities.

# Drop shadow scale definitions based on Tailwind v4 docs
DROP_SHADOW_SCALES = [
    DropShadowScale("xs", "0 1px 1px rgb(0 0 0 / 0.05)", "--drop-shadow-xs"),
    DropShadowScale("sm", "0 1px 2px rgb(0 0 0 / 0.15)", "--drop-shadow-sm"),
    DropShadowScale("md", "0 3px 3px rgb(0 0 0 / 0.12)", "--drop-shadow-md"),
    DropShadowScale("lg", "0 4px 4px rgb(0 0 0 / 0.15)", "--drop-shadow-lg"),
    DropShadowScale("xl", "0 9px 7px rgb(0 0 0 / 0.1)", "--drop-shadow-xl"),
    DropShadowScale("2xl", "0 25px 25px rgb(0 0 0 / 0.15)", "--drop-shadow-2xl"),
]

# Create drop shadow factory for basic shadow utilities
drop_shadow = SimpleFactory(
    {
        "none": "drop-shadow-none",
        "xs": "drop-shadow-xs",
        "sm": "drop-shadow-sm",
        "md": "drop-shadow-md",
        "lg": "drop-shadow-lg",
        "xl": "drop-shadow-xl",
        "_2xl": "drop-shadow-2xl"
    },
    "Drop shadow filter utilities for applying drop shadow effects to an element"
) # Drop shadow factory

# Create drop shadow color factory
drop_shadow_color = ColoredFactory("drop-shadow", "Drop shadow color utilities for customizing the color of drop shadows")

def test_filters_drop_shadow_examples():
    """Test drop shadow filter utilities."""
    # Test named drop shadow scales
    assert str(drop_shadow.none) == "drop-shadow-none"
    assert str(drop_shadow.xs) == "drop-shadow-xs"
    assert str(drop_shadow.sm) == "drop-shadow-sm"
    assert str(drop_shadow.md) == "drop-shadow-md"
    assert str(drop_shadow.lg) == "drop-shadow-lg"
    assert str(drop_shadow.xl) == "drop-shadow-xl"
    assert str(drop_shadow._2xl) == "drop-shadow-2xl"
    
    # Test drop shadow colors - all 22 Tailwind color families
    assert str(drop_shadow_color.red._500) == "drop-shadow-red-500"
    assert str(drop_shadow_color.orange._500) == "drop-shadow-orange-500"
    assert str(drop_shadow_color.amber._500) == "drop-shadow-amber-500"
    assert str(drop_shadow_color.yellow._500) == "drop-shadow-yellow-500"
    assert str(drop_shadow_color.lime._500) == "drop-shadow-lime-500"
    assert str(drop_shadow_color.green._500) == "drop-shadow-green-500"
    assert str(drop_shadow_color.emerald._500) == "drop-shadow-emerald-500"
    assert str(drop_shadow_color.teal._500) == "drop-shadow-teal-500"
    assert str(drop_shadow_color.cyan._500) == "drop-shadow-cyan-500"
    assert str(drop_shadow_color.sky._500) == "drop-shadow-sky-500"
    assert str(drop_shadow_color.blue._500) == "drop-shadow-blue-500"
    assert str(drop_shadow_color.indigo._500) == "drop-shadow-indigo-500"
    assert str(drop_shadow_color.violet._500) == "drop-shadow-violet-500"
    assert str(drop_shadow_color.purple._500) == "drop-shadow-purple-500"
    assert str(drop_shadow_color.fuchsia._500) == "drop-shadow-fuchsia-500"
    assert str(drop_shadow_color.pink._500) == "drop-shadow-pink-500"
    assert str(drop_shadow_color.rose._500) == "drop-shadow-rose-500"
    assert str(drop_shadow_color.slate._500) == "drop-shadow-slate-500"
    assert str(drop_shadow_color.gray._500) == "drop-shadow-gray-500"
    assert str(drop_shadow_color.zinc._500) == "drop-shadow-zinc-500"
    assert str(drop_shadow_color.neutral._500) == "drop-shadow-neutral-500"
    assert str(drop_shadow_color.stone._500) == "drop-shadow-stone-500"
    
    # Test different shades
    assert str(drop_shadow_color.blue._300) == "drop-shadow-blue-300"
    assert str(drop_shadow_color.green._950) == "drop-shadow-green-950"
    
    # Test special colors
    assert str(drop_shadow_color.transparent) == "drop-shadow-transparent"
    assert str(drop_shadow_color.black) == "drop-shadow-black"
    assert str(drop_shadow_color.white) == "drop-shadow-white"
    assert str(drop_shadow_color.current) == "drop-shadow-current"
    assert str(drop_shadow_color.inherit) == "drop-shadow-inherit"
    
    # Test arbitrary drop shadow color values
    assert str(drop_shadow_color("#ff0000")) == "drop-shadow-[#ff0000]"
    assert str(drop_shadow_color("--custom-shadow-color")) == "drop-shadow-(--custom-shadow-color)"

# Run the tests
test_filters_drop_shadow_examples()

Grayscale Filter

Convert an element to grayscale:

---

test_filters_grayscale_examples

def test_filters_grayscale_examples(
    
):

Test grayscale filter utilities.

# Create grayscale factory with percentage support
grayscale = ScaledFactory("grayscale", brightness_config, "Grayscale filter utilities for converting elements to grayscale")

# Add convenience for full grayscale
grayscale.full = SingleValueFactory("grayscale", "Apply 100% grayscale filter")

def test_filters_grayscale_examples():
    """Test grayscale filter utilities."""
    # Test full grayscale (default)
    assert str(grayscale.full) == "grayscale"
    
    # Test percentage grayscale values
    assert str(grayscale(0)) == "grayscale-0"
    assert str(grayscale(50)) == "grayscale-50"
    assert str(grayscale(100)) == "grayscale-100"
    
    # Test arbitrary values
    assert str(grayscale("250")) == "grayscale-[250]"
    assert str(grayscale("75%")) == "grayscale-[75%]"
    
    # Test custom properties
    assert str(grayscale("--custom-grayscale")) == "grayscale-(--custom-grayscale)"

# Run the tests
test_filters_grayscale_examples()

Hue Rotate Filter

Apply hue rotation to an element:

---

test_filters_hue_rotate_examples

def test_filters_hue_rotate_examples(
    
):

Test hue rotate filter utilities.

# Common hue rotation angles
HUE_ROTATE_VALUES = [0, 15, 30, 60, 90, 180]

# Create hue rotate configuration with negative support
hue_rotate_config = ScaleConfig(
    numeric=True,  # Support numeric values (angles)
    decimals=False,
    fractions=False,
    named=None,
    special=None,
    negative=True  # Support negative angles
)

# Create hue rotate factory
hue_rotate = ScaledFactory("hue-rotate", hue_rotate_config, "Hue rotate filter utilities for rotating element colors")

def test_filters_hue_rotate_examples():
    """Test hue rotate filter utilities."""
    # Test positive angles
    assert str(hue_rotate(0)) == "hue-rotate-0"
    assert str(hue_rotate(15)) == "hue-rotate-15"
    assert str(hue_rotate(30)) == "hue-rotate-30"
    assert str(hue_rotate(60)) == "hue-rotate-60"
    assert str(hue_rotate(90)) == "hue-rotate-90"
    assert str(hue_rotate(180)) == "hue-rotate-180"
    
    # Test negative angles
    assert str(hue_rotate(30, negative=True)) == "-hue-rotate-30"
    assert str(hue_rotate.negative(60)) == "-hue-rotate-60"
    assert str(hue_rotate.negative(180)) == "-hue-rotate-180"
    
    # Test arbitrary values
    assert str(hue_rotate("45deg")) == "hue-rotate-[45deg]"
    
    # Test custom properties
    assert str(hue_rotate("--custom-rotation")) == "hue-rotate-(--custom-rotation)"

# Run the tests
test_filters_hue_rotate_examples()

Invert Filter

Invert the colors of an element:

---

test_filters_invert_examples

def test_filters_invert_examples(
    
):

Test invert filter utilities.

# Create invert factory with percentage support
invert = ScaledFactory("invert", brightness_config, "Invert filter utilities for inverting element colors")

# Add convenience for full invert
invert.full = SingleValueFactory("invert", "Apply 100% invert filter")

def test_filters_invert_examples():
    """Test invert filter utilities."""
    # Test full invert (default)
    assert str(invert.full) == "invert"
    
    # Test percentage invert values
    assert str(invert(0)) == "invert-0"
    assert str(invert(50)) == "invert-50"
    assert str(invert(100)) == "invert-100"
    
    # Test arbitrary values
    assert str(invert("250")) == "invert-[250]"
    assert str(invert("75%")) == "invert-[75%]"
    
    # Test custom properties
    assert str(invert("--custom-invert")) == "invert-(--custom-invert)"

# Run the tests
test_filters_invert_examples()

Saturate Filter

Control the saturation of an element:

---

test_filters_saturate_examples

def test_filters_saturate_examples(
    
):

Test saturate filter utilities.

# Common saturation values
SATURATE_VALUES = [0, 50, 100, 150, 200]

# Create saturate factory
saturate = ScaledFactory("saturate", brightness_config, "Saturate filter utilities for adjusting element color saturation")

def test_filters_saturate_examples():
    """Test saturate filter utilities."""
    # Test common saturate values
    assert str(saturate(0)) == "saturate-0"
    assert str(saturate(50)) == "saturate-50"
    assert str(saturate(100)) == "saturate-100"
    assert str(saturate(150)) == "saturate-150"
    assert str(saturate(200)) == "saturate-200"
    
    # Test arbitrary values
    assert str(saturate("750")) == "saturate-[750]"
    assert str(saturate("125%")) == "saturate-[125%]"
    
    # Test custom properties
    assert str(saturate("--custom-saturate")) == "saturate-(--custom-saturate)"

# Run the tests
test_filters_saturate_examples()

Sepia Filter

Apply a sepia tone to an element:

---

test_filters_sepia_examples

def test_filters_sepia_examples(
    
):

Test sepia filter utilities.

# Create sepia factory with percentage support
sepia = ScaledFactory("sepia", brightness_config, "Sepia filter utilities for applying sepia tone effects")

# Add convenience for full sepia
sepia.full = SingleValueFactory("sepia", "Apply 100% sepia filter")

def test_filters_sepia_examples():
    """Test sepia filter utilities."""
    # Test full sepia (default)
    assert str(sepia.full) == "sepia"
    
    # Test percentage sepia values
    assert str(sepia(0)) == "sepia-0"
    assert str(sepia(50)) == "sepia-50"
    assert str(sepia(100)) == "sepia-100"
    
    # Test arbitrary values
    assert str(sepia("250")) == "sepia-[250]"
    assert str(sepia("75%")) == "sepia-[75%]"
    
    # Test custom properties
    assert str(sepia("--custom-sepia")) == "sepia-(--custom-sepia)"

# Run the tests
test_filters_sepia_examples()

Backdrop Filters

Apply filter effects to the area behind an element. All backdrop filters use the same scale values as their regular filter counterparts:

Backdrop Filter Control

backdrop_filter_none = SingleValueFactory("backdrop-filter-none", "Remove all backdrop filters from an element") # Remove backdrop filters

Backdrop Blur

# Create backdrop blur factory using same scales as regular blur
backdrop_blur = SimpleFactory(
    {
        "none": "backdrop-blur-none",
        "xs": "backdrop-blur-xs",
        "sm": "backdrop-blur-sm",
        "md": "backdrop-blur-md",
        "lg": "backdrop-blur-lg",
        "xl": "backdrop-blur-xl",
        "_2xl": "backdrop-blur-2xl",
        "_3xl": "backdrop-blur-3xl"
    },
    "Backdrop blur filter utilities for applying blur effects to the backdrop"
) # Backdrop blur factory

Backdrop Brightness, Contrast, and Other Percentage-based Filters

# Create backdrop filter factories using same configurations as regular filters
backdrop_brightness = ScaledFactory("backdrop-brightness", brightness_config, "Backdrop brightness filter utilities")
backdrop_contrast = ScaledFactory("backdrop-contrast", brightness_config, "Backdrop contrast filter utilities")
backdrop_saturate = ScaledFactory("backdrop-saturate", brightness_config, "Backdrop saturate filter utilities")
backdrop_opacity = ScaledFactory("backdrop-opacity", brightness_config, "Backdrop opacity filter utilities")

# Grayscale with full convenience
backdrop_grayscale = ScaledFactory("backdrop-grayscale", brightness_config, "Backdrop grayscale filter utilities")
backdrop_grayscale.full = SingleValueFactory("backdrop-grayscale", "Apply 100% backdrop grayscale filter")

# Sepia with full convenience
backdrop_sepia = ScaledFactory("backdrop-sepia", brightness_config, "Backdrop sepia filter utilities")
backdrop_sepia.full = SingleValueFactory("backdrop-sepia", "Apply 100% backdrop sepia filter")

Backdrop Hue Rotate

---

test_filters_backdrop_examples

def test_filters_backdrop_examples(
    
):

Test backdrop filter utilities.

# Create backdrop hue rotate with negative support
backdrop_hue_rotate = ScaledFactory("backdrop-hue-rotate", hue_rotate_config, "Backdrop hue rotate filter utilities")

def test_filters_backdrop_examples():
    """Test backdrop filter utilities."""
    # Test backdrop filter control
    assert str(backdrop_filter_none) == "backdrop-filter-none"
    
    # Test backdrop blur
    assert str(backdrop_blur.none) == "backdrop-blur-none"
    assert str(backdrop_blur.sm) == "backdrop-blur-sm"
    assert str(backdrop_blur.lg) == "backdrop-blur-lg"
    assert str(backdrop_blur._2xl) == "backdrop-blur-2xl"
    
    # Test backdrop brightness
    assert str(backdrop_brightness(50)) == "backdrop-brightness-50"
    assert str(backdrop_brightness(100)) == "backdrop-brightness-100"
    assert str(backdrop_brightness(150)) == "backdrop-brightness-150"
    
    # Test backdrop contrast
    assert str(backdrop_contrast(0)) == "backdrop-contrast-0"
    assert str(backdrop_contrast(100)) == "backdrop-contrast-100"
    assert str(backdrop_contrast(200)) == "backdrop-contrast-200"
    
    # Test backdrop grayscale
    assert str(backdrop_grayscale.full) == "backdrop-grayscale"
    assert str(backdrop_grayscale(0)) == "backdrop-grayscale-0"
    assert str(backdrop_grayscale(50)) == "backdrop-grayscale-50"
    
    # Test backdrop hue rotate with negative
    assert str(backdrop_hue_rotate(90)) == "backdrop-hue-rotate-90"
    assert str(backdrop_hue_rotate.negative(60)) == "-backdrop-hue-rotate-60"
    
    # Test backdrop opacity
    assert str(backdrop_opacity(25)) == "backdrop-opacity-25"
    assert str(backdrop_opacity(50)) == "backdrop-opacity-50"
    assert str(backdrop_opacity(75)) == "backdrop-opacity-75"
    
    # Test backdrop saturate
    assert str(backdrop_saturate(0)) == "backdrop-saturate-0"
    assert str(backdrop_saturate(150)) == "backdrop-saturate-150"
    
    # Test backdrop sepia
    assert str(backdrop_sepia.full) == "backdrop-sepia"
    assert str(backdrop_sepia(50)) == "backdrop-sepia-50"

# Run the tests
test_filters_backdrop_examples()

Practical Examples

Let’s see how to use these filter utilities in real FastHTML components:

---

test_filters_fasthtml_examples

def test_filters_fasthtml_examples(
    
):

Test filter utilities in practical FastHTML component examples.

def test_filters_fasthtml_examples():
    """Test filter utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Img, P, H1, Section
    from cjm_fasthtml_tailwind.utilities.transitions_and_animation import transition, duration
    from cjm_fasthtml_tailwind.utilities.interactivity import cursor, pointer_events
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_tailwind.utilities.layout import position, inset, display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Image with hover blur effect
    image_hover = Img(
        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp",
        alt="Hoverable image",
        cls=combine_classes(
            transition.all,
            blur.sm.hover,
            cursor.pointer
        )
    )
    assert "hover:blur-sm" in image_hover.attrs['class']
    
    # Grayscale image that becomes colored on hover
    grayscale_img = Img(
        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp",
        alt="Grayscale photo",
        cls=combine_classes(
            grayscale.full,
            grayscale(0).hover,
            transition.all,
            duration(300)
        )
    )
    assert "grayscale" in grayscale_img.attrs['class']
    assert "hover:grayscale-0" in grayscale_img.attrs['class']
    
    # Card with drop shadow
    card_shadow = Div(
        H1("Card Title"),
        P("Card content"),
        cls=combine_classes(
            drop_shadow.lg,
            drop_shadow_color.blue._500,
            p(6),
            bg.white,
            rounded.lg
        )
    )
    assert "drop-shadow-lg" in card_shadow.attrs['class']
    assert "drop-shadow-blue-500" in card_shadow.attrs['class']
    
    # Frosted glass effect with backdrop blur
    frosted_glass = Div(
        P("Frosted glass content"),
        cls=combine_classes(
            backdrop_blur.md,
            backdrop_saturate(150),
            bg.white.opacity(30),
            p(8),
            rounded.xl
        )
    )
    assert "backdrop-blur-md" in frosted_glass.attrs['class']
    assert "backdrop-saturate-150" in frosted_glass.attrs['class']
    
    # Image with multiple filters
    artistic_img = Img(
        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp",
        alt="Artistic image",
        cls=combine_classes(
            brightness(110),
            contrast(125),
            saturate(150),
            hue_rotate(15)
        )
    )
    assert "brightness-110" in artistic_img.attrs['class']
    assert "contrast-125" in artistic_img.attrs['class']
    assert "saturate-150" in artistic_img.attrs['class']
    assert "hue-rotate-15" in artistic_img.attrs['class']
    
    # Dark mode overlay with filters
    dark_overlay = Div(
        cls=combine_classes(
            invert.full,
            hue_rotate(180),
            position.fixed,
            inset(0),
            pointer_events.none
        )
    )
    assert "invert" in dark_overlay.attrs['class']
    assert "hue-rotate-180" in dark_overlay.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        image_hover,
        grayscale_img,
        card_shadow,
        frosted_glass,
        artistic_img,
        dark_overlay,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_filters_fasthtml_examples()

Card Title

Card content

Frosted glass content

test_func = test_filters_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Export