skylence/filament5-glass-theme
A glassmorphism theme for Filament 5 admin panels, bringing frosted translucent surfaces, soft blur and subtle borders to tables, forms, widgets and dashboards. Drop-in install, light and dark mode ready, and customizable through CSS variables.
This is a presentation-layer package: a FilamentPHP panel theme that swaps Filament's default flat surfaces for translucent, blurred "glass" panels. It ships CSS (and probably a plugin class + Blade/Tailwind overrides), not business logic. Treat it as a stylesheet with an install ritual.
Preflight before you composer require anything:
composer.json → require block. Confirm the Filament constraint (^3.0, ^4.0, or a v5 dev branch). The package name says "filament5" but Filament v5 may not be what your app is running; a mismatched major will either fail to install or, worse, install and produce a visually broken panel because Filament's DOM/class names changed.README.md for the registration snippet — Filament themes come in two flavours and the difference matters:
->plugin(Skylence\GlassTheme\GlassThemePlugin::make()) in your PanelProvider.->viteTheme('resources/css/filament/admin/theme.css') and @import the package CSS yourself.resources/ and package.json: is the CSS pre-built and shipped in dist/, or do you need to compile it? If it is pre-built, you must run php artisan filament:assets (and vendor:publish if it exposes assets/config).Minimal install:
composer require skylence/filament5-glass-theme
php artisan filament:assets
php artisan optimize:clear
Then register in app/Providers/Filament/AdminPanelProvider.php and hit /admin in a private window.
Where to look first, in order: the README's install block → the panel provider registration line → the package's main CSS file (this is where every override actually lives, and where you'll debug from) → the repo's screenshots or demo link (compare against what you actually see).
First use case: apply it to the admin panel only, log in, and walk three screens: the login page, the dashboard with at least one widget, and a resource list with a table. Those three surfaces exercise nearly every override the theme makes. If all three look right in both light and dark mode, you're 80% home.
Scope it per panel. Don't register the plugin globally. Filament panels are independent, so glass on /admin and vanilla Filament on a customer-facing or tenant panel is one line of difference:
public function panel(Panel $panel): Panel
{
return $panel
->id('admin')
->plugin(GlassThemePlugin::make())
// ...
}
Keep the glass theme off any panel where operators stare at dense tables for hours, and off anything with a print/export flow.
Give the glass something to blur. Glassmorphism is backdrop-filter: blur() over a visible backdrop. Filament's default background is a near-flat gray, so a blur over it reads as "slightly muddy gray," not glass. Pair the theme with a gradient or image layer behind the app shell — Filament's brand color plus a radial/linear gradient on the body element is usually enough:
.fi-body {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent 60%),
radial-gradient(900px 500px at 110% 10%, rgba(236,72,153,.25), transparent 55%),
var(--gray-50);
}
This is the single biggest determinant of whether the theme looks good or looks broken.
Override tokens, don't fork the CSS. Re-declare the theme's CSS custom properties in a small stylesheet loaded after the package asset — blur radius, panel alpha, border color, shadow. That way a package update doesn't clobber your branding, and you keep the upgrade path clean. If the package doesn't expose variables, define your own in a @layer components block and target the same selectors with equal-or-higher specificity rather than reaching for !important.
Compose with your own theme file. The most robust integration: let the package provide the structural CSS, and add your brand tokens in your panel's Vite theme. If you're building with Tailwind v4, @import the package CSS at the top and your overrides below; with v3, add the package's view paths to content (see Gotchas).
Wire it through one internal seam. Register the plugin behind a tiny helper or your own base panel provider:
->plugin(config('ui.glass') ? GlassThemePlugin::make() : null)
Given the package's maturity signals, assume you may need to rip it out on short notice. One conditional means removal is a config flip, not a hunt through providers.
Upgrade discipline. Pin the exact version in composer.json. Filament themes break on Filament minor upgrades more often than normal packages because they depend on generated class names and internal DOM. After any composer update, re-run php artisan filament:assets and eyeball the login page — it's the fastest visual canary.
src/ and resources/ — it should be small enough to audit in twenty minutes. If it's a thin CSS wrapper, great. If it ships JS or modifies Blade views, weigh the maintenance risk harder. Have a plan: a git fork under your org, or a local copy of the CSS in resources/css/vendor/.backdrop-filter fails silently. It needs a compositing ancestor and a non-opaque background behind it. Any ancestor with transform, filter, perspective, or overflow: hidden plus border-radius can create a new stacking context that clips or kills the blur. If a panel looks flat, walk up the DOM in DevTools and toggle those properties to isolate the culprit.<body>. Those may not pick up the theme's scoped selectors, so you'll get a glass page with a solid-white modal. Test all of them explicitly; you'll likely need extra selectors for the modal container and dropdown panel classes.dark class on <html>. A package authored primarily in light mode often has an under-tuned dark palette where translucent dark panels collapse into the page background. Check contrast in both, not just the one in the screenshot.prefers-reduced-transparency and consider a user setting that flips panels to solid. Also check focus ring visibility on translucent surfaces; it's a common casualty.dist/*.css, the package's class names won't survive a production build unless its views are in your content sources. Tailwind v3: add the vendor view path to content. Tailwind v4: add @source '../../vendor/skylence/filament5-glass-theme/resources/views';. Symptom is "looks fine in dev, broken in prod" — which is also the symptom of stale assets, so clear both before panicking.php artisan filament:assets, php artisan optimize:clear, then a hard browser refresh. Cached Vite manifests and Filament's published assets both lie convincingly.@layer ordering, and matching selectors; escalate to !important only as a last resort and comment why, because the next package update will need you to re-check every one of them./admin with the plugin disabled (or a second panel without it) so you can diff the rendered DOM and computed styles side by side. That is faster than reading CSS for most layout bugs.How can I help you explore Laravel packages today?