AshFormBuilder.Themes.Glassmorphism (AshFormBuilder v0.2.3)

View Source

Premium Glassmorphism theme for AshFormBuilder.

Aesthetic

Creates a modern, premium look with smooth glass-like surfaces, subtle blurs, and elegant micro-interactions. Perfect for applications wanting a sophisticated, contemporary appearance.

Configuration

Add to your config/config.exs:

config :ash_form_builder,
  theme: AshFormBuilder.Themes.Glassmorphism,
  theme_opts: [
    # Background variant: :light (default) or :dark
    variant: :light,

    # Primary accent color for focus states
    accent_color: "blue",

    # Glass intensity: :subtle, :medium (default), :strong
    glass_intensity: :medium
  ]

Visual Characteristics

  • Glass Surfaces - Semi-transparent backgrounds with backdrop blur
  • Soft Borders - Subtle white/dark borders for depth
  • Smooth Animations - 300ms transitions on focus and hover
  • Floating Effect - Inputs appear to float on glass panels
  • Shadow Depth - Layered shadows for 3D effect

Example Screenshot

Imagine form fields that look like frosted glass panels floating on a gradient background, with smooth transitions when focused.

Usage

No additional setup required beyond configuration. The theme automatically applies glassmorphism styling to all form fields.

# In your LiveView
def render(assigns) do
  ~H"""
  <.live_component
    module={AshFormBuilder.FormComponent}
    id="my-form"
    resource={MyApp.Resource}
    form={@form}
  />
  """
end

Dark Mode Support

Configure dark variant for dark backgrounds:

config :ash_form_builder,
  theme: AshFormBuilder.Themes.Glassmorphism,
  theme_opts: [variant: :dark]

Browser Support

Requires support for:

  • backdrop-filter (CSS backdrop blur)
  • rgba() colors (transparency)
  • CSS transitions

Works in all modern browsers (Chrome, Firefox, Safari, Edge).