Liquid Metal · Backdrop

Animated WebGL shader background in the Liquid Metal style. Backdrop variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#D4D4D8, #FFFFFF, #09090B, #52525B). A drop-in, zero-dependency React component for hero sections and animated gradient/noise backgrounds.

by Paper Shaders

Open in editor

import { ShaderBackground } from "@/components/ui/liquid-metal-backdrop"

export default function ShaderBackgroundDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ShaderBackground className="h-full w-full" />
    </div>
  )
}

Source

shaders.paper.design

Published

7/23/2026

Similar components

Explore more

Animation components144 Background components365 Hero components1152 Liquid components66 Animated components16

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Liquid Metal · Backdrop

Tags

Source

Published

Similar components

Explore more