Pure Glass Gradient
A clean, flat, and minimalist animated gradient background with a frosted glass effect. Designed without borders or shadows to give your design a modern, spacious feel.
Make it with Workshop
Build your own component with AI
A clean, flat, and minimalist animated gradient background with a frosted glass effect. Designed without borders or shadows to give your design a modern, spacious feel.
Make it with Workshop
Build your own component with AI
Elevate your website's aesthetics with Pure Glass Gradient. This component is the evolution of classic Glassmorphism—reimagined to be Cleaner, Flatter, and free from visual clutter like thick borders or heavy shadows.
Perfect for designers who love the airy, lightweight 'Apple-style' Modern UI.
✨ Key Features:
Clean & Flat: Designed with Zero Radius, No Borders, and No Shadows. It focuses entirely on the smooth blend of colors and glass texture.
Soft Motion: Features a slow, soothing gradient animation (adjustable to Horizontal, Vertical, or Diagonal) that brings life to your page without being distracting.
High-Key Aesthetic: Optimized for white-dominant and pastel palettes, delivering a professional and pristine look.
Backdrop Blur: Utilizes native CSS backdrop-filter for high performance and creamy blur effects.
Auto-Fill Layout: The component automatically fills 100% of the width and height of its parent container. No sizing headaches.
Perfect for: Full Page Backgrounds, Minimalist Hero Sections, or as a subtle layer behind UI content.
Customization (Right Panel):
Colors: Customize the 4 gradient color points. Tip: Use adjacent colors (e.g., White, Light Grey, Pale Blue) for the smoothest look.
Blur Amount: Adjust how blurry the elements behind the glass appear.
Opacity: Control the transparency of the white glass layer (Default is 0.7).
Animation: Tweak the Speed and Direction to match the mood of your website.
