Gradient Stop Utilities

For Tailwind CSS gradient utilities, daisyUI extends the from, via, and to utilities with semantic color support:

---

source

GradientStopFactoryDaisyUI

 GradientStopFactoryDaisyUI (stop_type:str, doc:Optional[str]=None)

Enhanced factory for gradient color stops with semantic color support.

	Type	Default	Details
stop_type	str		Type of stop (from, via, to)
doc	Optional	None	Documentation

---

source

test_semantic_gradients_basic_examples

 test_semantic_gradients_basic_examples ()

Test gradient utilities with semantic colors.

# Create gradient stop factories with semantic color support
from_dui = GradientStopFactoryDaisyUI("from", "Gradient from color utilities for defining the starting color of a gradient with semantic colors") # Semantic gradient from color factory
via_dui = GradientStopFactoryDaisyUI("via", "Gradient via color utilities for defining the middle color of a gradient with semantic colors") # Semantic gradient via color factory
to_dui = GradientStopFactoryDaisyUI("to", "Gradient to color utilities for defining the ending color of a gradient with semantic colors") # Semantic gradient to color factory

def test_semantic_gradients_basic_examples():
    """Test gradient utilities with semantic colors."""
    # Test gradient from colors
    assert str(from_dui.primary) == "from-primary"
    assert str(from_dui.secondary) == "from-secondary"
    assert str(from_dui.base_100) == "from-base-100"
    assert str(from_dui.error) == "from-error"
    
    # Test gradient via colors
    assert str(via_dui.accent) == "via-accent"
    assert str(via_dui.neutral) == "via-neutral"
    assert str(via_dui.info) == "via-info"
    
    # Test gradient to colors
    assert str(to_dui.success) == "to-success"
    assert str(to_dui.warning) == "to-warning"
    assert str(to_dui.base_content) == "to-base-content"
    
    # Test with opacity
    assert str(from_dui.primary.opacity(50)) == "from-primary/50"
    assert str(via_dui.secondary.opacity(75)) == "via-secondary/75"
    assert str(to_dui.base_content.opacity(30)) == "to-base-content/30"

     # Test with percentages
    assert str(from_dui._0) == "from-0%"
    assert str(from_dui._50) == "from-50%"
    assert str(from_dui._100) == "from-100%"
    assert str(from_dui(25)) == "from-25%"
    assert str(from_dui("33%")) == "from-33%"
    assert str(via_dui._50) == "via-50%"
    assert str(via_dui(75)) == "via-75%"
    assert str(to_dui._100) == "to-100%"
    assert str(to_dui(90)) == "to-90%"
    
    # Test with modifiers
    assert str(from_dui.primary.hover) == "hover:from-primary"
    assert str(to_dui.error.dark) == "dark:to-error"

# Run the test
test_semantic_gradients_basic_examples()

Practical Examples

Test with FastHTML components to show practical usage:

---

source

test_semantic_gradients_fasthtml_examples

 test_semantic_gradients_fasthtml_examples ()

Test practical usage patterns with FastHTML components.

def test_semantic_gradients_fasthtml_examples():
    """Test practical usage patterns with FastHTML components."""
    from fasthtml.common import Div, Button, H1, P, Span
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg_linear
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.data_display.card import card
    from cjm_fasthtml_daisyui.utilities.semantic_colors import text_dui
    
    # Create a gradient header with semantic colors
    gradient_header = Div(
        H1("Gradient Header", cls=str(text_dui.primary_content)),
        cls=combine_classes(
            bg_linear.to_r,
            from_dui.primary,
            to_dui.secondary,
            p(8)
        )
    )
    assert "from-primary" in gradient_header.attrs['class']
    assert "to-secondary" in gradient_header.attrs['class']

    return Div(
        gradient_header
    )

# Run the test
test_semantic_gradients_fasthtml_examples()

<div>
  <div class="bg-linear-to-r from-primary to-secondary p-8">
    <h1 class="text-primary-content">Gradient Header</h1>
  </div>
</div>

test_func = test_semantic_gradients_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

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