---
title: "Liquid Aluminum BG — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sha · Backgrounds. Premium background for websites"
canonical: "https://framer.elliotli.dev/component/liquid-aluminum-bg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Liquid Aluminum BG

# Liquid Aluminum BG

Premium background for websites

[View on Framer](https://framer.com/marketplace/components/liquid-aluminum-bg/?via=elliot-li)

![Liquid Aluminum BG preview image 1](https://framer.elliotli.dev/og/component/liquid-aluminum-bg/51ba011e9db27125/1600x1200.jpg)

## Summary

Premium background for websites

## Description

**Uplift Your Website with Liquid Aluminum Shader**

Add a premium, industrial aesthetic to your Framer website. Liquid Aluminum uses 3D surface normals to simulate studio light vectors bouncing off moving metal, bringing a heavy yet soft machined hardware feel directly to your website.

Whether you want a calm backdrop or a powerful, high-impact focal point, this component offers a highly immersive, visually tactile experience.

**What it does**

**Aspect-Ratio Locked:** Completely immune to stretching. Automatically normalizes coordinates so your aluminum waves keep perfect proportions, whether inside a small card or stretched wide across a 4K desktop banner.

**Intelligent Throttling:** Built specifically for full screen hero backgrounds. It dynamically throttles render bounds on ultra-dense mobile and retina screens to protect your page's scrolling performance.

**Micro Refraction Fringing:** Shifts subtle light channels along the edge of every metallic wave, adding a layer of optical depth and physical weight that standard flat color loops can’t replicate.

**Zero Layout Friction:** Built with alpha channel transparency and click-through disabled (pointer-events: none), allowing it to sit quietly beneath typography, buttons, and layout grids with zero interference.

**Controls**

Adjust the structural physics directly from the Framer sidebar:

**Flow Speed:** Controls the kinetic energy of the metal, shifting from an ultra-slow industrial crawl to a steady fluid ripple.

**Wave Density:** Adjusts the frequency of the shapes, alternating between wide, sweeping panels and tight, detailed metallic crests.

**Contrast Power:** Fine tunes the lighting contrast. Dial it up to sharpen the shadows, or pull it back to push the shader into a stunning light mode territory.

**Perfect For:**

High end tech, hardware, and AI landing pages.

Sleek dark mode portfolio websites.

Immersive product presentation sections and immersive hero headers.

Modern fashion, automotive, and luxury showcases.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1146

## Details

- **Author**: Sha
- **Price**: $5.00
- **Published**: 2026-06-17
- **Updated**: 2026-06-17
- **Added**: 2026-06-17
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background