GlassMorphism Website
Prompt
Make a BEAUTIFUL glassmorphism website. But not just simple borders and blurs, make sure to use advanced techniques such where you change the color or thickness or shadows of just various sides of the element for true glassmorphism all in one massive HTML code block.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced Glassmorphism Showcase</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"/>
<style>
/* ====== GLOBAL RESET & UTILITIES ====== */
*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
:root{
--glass-bg:rgba(255,255,255,0.18);
--glass-border-light:rgba(255,255,255,0.6);
--glass-border-dark:rgba(255,255,255,0.02);
--glass-shadow:rgba(0,0,0,0.25);
--transition: .45s cubic-bezier(.25,.46,.45,.94);
}
html,body{
height:100%;
font-family:'Poppins',sans-serif;
color:#fff;
}
body{
background:
linear-gradient(115deg,#0f2027 0%,#203a43 25%,#2c5364 50%,#1f2a36 75%,#131e25 100%)
fixed;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}
/* ====== AWESOME GLASSMORPHIC CONTAINER ====== */
.glass{
position:relative;
width:min(90vw,1100px);
padding:60px 40px 100px;
border-radius:24px;
background:var(--glass-bg);
backdrop-filter:blur(28px) saturate(170%);
-webkit-backdrop-filter:blur(28px) saturate(170%);
overflow:hidden;
transition:var(--transition);
/* Asymmetric borders for extra depth */
border-top:2.5px solid var(--glass-border-light);
border-left:2.5px solid var(--glass-border-light);
border-right:5px solid var(--glass-border-dark);
border-bottom:5px solid var(--glass-border-dark);
/* Multiple shadows for floating effect */
box-shadow:
0 8px 14px -4px var(--glass-shadow),
0 18px 30px -10px var(--glass-shadow);
}
/* Light streak + subtle inner edge */
.glass::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
/* top-left gleam */
background:linear-gradient(135deg,
rgba(255,255,255,0.65) 0%,
rgba(255,255,255,0.25) 25%,
transparent 70%);
mix-blend-mode:overlay;
pointer-events:none;
}
/* rainbow edge on one side only */
.glass::after{
content:"";
position:absolute;
top:-2px; right:-2px; bottom:-2px; width:6px; /* only RIGHT border enhanced */
border-radius:inherit;
background:linear-gradient(to bottom,
#ff4d4d 0%,
#ffa64d 25%,
#fffb4d 50%,
#4dff88 75%,
#4d88ff 100%);
filter:blur(1.2px);
pointer-events:none;
}
/* ====== CONTENT ====== */
h1{
font-size:clamp(2rem,5vw,3.5rem);
font-weight:600;
text-align:center;
margin-bottom:10px;
backdrop-filter:blur(4px);
}
p.lead{
text-align:center;
font-size:clamp(1rem,2.5vw,1.25rem);
max-width:800px;
margin:0 auto 50px;
opacity:.85;
}
/* ====== CARDS ====== */
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
}
.card{
position:relative;
padding:32px 28px 40px;
border-radius:20px;
cursor:pointer;
user-select:none;
background:var(--glass-bg);
backdrop-filter:blur(26px) saturate(190%);
-webkit-backdrop-filter:blur(26px) saturate(190%);
transition:var(--transition);
overflow:hidden;
/* directional border accents */
border-top:1.5px solid rgba(255,255,255,0.55);
border-left:1.5px solid rgba(255,255,255,0.55);
border-right:3px solid rgba(255,255,255,0.08);
border-bottom:3px solid rgba(255,255,255,0.08);
box-shadow:
0 6px 12px -4px var(--glass-shadow),
0 16px 26px -12px var(--glass-shadow);
}
.card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:radial-gradient(circle at 30% 20%,
rgba(255,255,255,0.8) 0%,
rgba(255,255,255,0.1) 35%,
transparent 60%);
mix-blend-mode:overlay;
transition:var(--transition);
pointer-events:none;
}
.card::after{
/* ultra-thin neon bottom edge */
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:2px;
border-radius:0 0 20px 20px;
background:linear-gradient(90deg,
#00c6ff 0%,
#0072ff 100%);
opacity:.6;
transform:scaleX(0);
transform-origin:left;
transition:var(--transition);
}
/* hover / tilt states */
.card:hover{
transform:translateY(-8px);
}
.card:hover::after{
transform:scaleX(1);
}
/* card inner */
.card h3{
font-size:1.45rem;
margin-bottom:12px;
}
.card p{
font-size:.95rem;
line-height:1.55;
opacity:.9;
}
.button{
display:inline-block;
margin-top:22px;
padding:10px 22px;
border-radius:12px;
background:rgba(255,255,255,0.23);
border:1px solid rgba(255,255,255,0.45);
color:#fff;
font-size:.9rem;
text-decoration:none;
transition:var(--transition);
backdrop-filter:blur(6px);
}
.button:hover{
background:rgba(255,255,255,0.35);
}
/* ====== FANCY SCROLLBAR ====== */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.25);
border-radius:10px;
backdrop-filter:blur(4px);
}
/* ====== RESPONSIVENESS ====== */
@media(max-width:600px){
.glass{
padding:40px 24px 80px;
}
}
</style>
</head>
<body>
<section class="glass">
<h1>Next-Gen Glassmorphism</h1>
<p class="lead">A meticulously crafted playground showcasing asymmetric borders, dynamic shadows & interactive blur layers for a truly vibrant glass aesthetic.</p>
<div class="card-grid">
<div class="card">
<h3>Prismatic Edges</h3>
<p>Subtly color-shifted borders & shadows make each side interact with the background light differently, amplifying depth.</p>
<a href="#" class="button">Explore</a>
</div>
<div class="card">
<h3>Selective Transparency</h3>
<p>Anisotropic opacity mapping lets certain regions glow while others fade, simulating imperfections in real glass.</p>
<a href="#" class="button">Discover</a>
</div>
<div class="card">
<h3>Liquid Motion</h3>
<p>Move your cursor to witness fluid tilt & parallax, as reflections slide across the surface like liquid light.</p>
<a href="#" class="button">Experience</a>
</div>
</div>
</section>
<script>
/* ====== INTERACTIVE TILT EFFECT ====== */
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const height = card.clientHeight;
const width = card.clientWidth;
card.addEventListener('mousemove', e => {
const xVal = e.layerX;
const yVal = e.layerY;
const yRotation = 15 * ((xVal - width / 2) / width);
const xRotation = -15 * ((yVal - height / 2) / height);
const string = `perspective(600px) rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
card.style.transform = string;
});
card.addEventListener('mouseout', () => {
card.style.transform = 'perspective(600px) rotateX(0) rotateY(0)';
});
card.addEventListener('mousedown', () => {
card.style.transform += ' scale(.97)';
});
card.addEventListener('mouseup', () => {
card.style.transform = 'perspective(600px) rotateX(0) rotateY(0)';
});
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beautiful Glassmorphism Website</title>
<!-- Poppins font from Google Fonts for elegant typography -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
/* General page styling */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* Vibrant background for the glass to interact with */
background: linear-gradient(135deg, #FFDAB9, #FF7F50, #8A2BE2, #4169E1);
background-size: 400% 400%; /* For animating the gradient */
animation: gradientAnimation 15s ease infinite; /* Smooth background animation */
overflow: hidden; /* Hide scrollbars, especially for floating elements */
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative; /* For absolute positioned background elements */
isolation: isolate; /* Ensures backdrop-filter works correctly with z-index */
}
/* Keyframe animation for the background gradient */
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Container for glass elements */
.glass-container {
position: relative;
z-index: 10; /* Ensure glass panels are above floating elements */
display: flex;
flex-wrap: wrap; /* Allows panels to wrap on smaller screens */
justify-content: center;
align-items: center;
gap: 40px; /* Space between glass panels */
padding: 40px;
max-width: 1200px;
width: 90%;
box-sizing: border-box; /* Include padding in width */
}
/* Base Glass Panel Styling */
.glass-panel {
position: relative;
background: rgba(255, 255, 255, 0.1); /* Translucent base color */
border-radius: 20px;
backdrop-filter: blur(15px); /* Core glassmorphism blur effect */
-webkit-backdrop-filter: blur(15px); /* Safari support */
overflow: hidden; /* Important for the inner shine effect */
transition: transform 0.3s ease, box-shadow 0.3s ease;
will-change: transform, box-shadow; /* Optimize animations */
z-index: inherit; /* Inherit z-index from container for relative stacking */
}
/* Hover effect for glass panels */
.glass-panel:hover {
transform: translateY(-10px) scale(1.02); /* Slight lift and scale */
/* Enhanced shadows on hover for more depth */
box-shadow:
inset 2px 2px 8px rgba(255, 255, 255, 0.3), /* Enhanced inner highlight */
0 16px 64px 0 rgba(0, 0, 0, 0.45), /* Deeper ambient shadow */
-3px -3px 0px 0px rgba(255, 255, 255, 0.35), /* More prominent top-left edge light */
3px -3px 0px 0px rgba(255, 255, 255, 0.2), /* Subtle top-right edge light */
6px 6px 10px 0px rgba(0, 0, 0, 0.5); /* Stronger bottom-right dark shadow */
}
/* ADVANCED TECHNIQUE: Simulating varied light interaction on different sides */
/* This is achieved by combining multiple `box-shadow` properties, each with
different offsets, colors, and spreads, to create the illusion of:
1. An inner reflection
2. Prominent top/left highlights (as if light source is top-left)
3. Subtle top/right highlight
4. A thicker, darker shadow on bottom/right (opposite light source)
5. A general ambient shadow for overall depth */
.glass-panel {
/* 1. Inner light reflection: Creates a subtle glow from inside the glass,
slightly brighter towards the top-left corner. */
box-shadow:
inset 2px 2px 6px rgba(255, 255, 255, 0.2),
/* 2. Main ambient shadow: Provides general depth and lift off the background. */
0 8px 32px 0 rgba(0, 0, 0, 0.37),
/* 3. Top-left edge highlight: A crisp, thin, bright white line simulating
direct light hitting this edge. (Negative offsets for top/left) */
-2px -2px 0px 0px rgba(255, 255, 255, 0.25),
/* 4. Top-right edge highlight: A slightly less prominent, often thinner,
highlight for another illuminated edge. (Positive X, Negative Y) */
2px -2px 0px 0px rgba(255, 255, 255, 0.15),
/* 5. Bottom-right shadow: A larger, darker, and more spread-out shadow
simulating the furthest edge from a top-left light source.
This gives the impression of thickness and depth. */
4px 4px 6px 0px rgba(0, 0, 0, 0.4);
/* ADVANCED TECHNIQUE: Inner diagonal shine/reflection */
/* A pseudo-element with a subtle gradient positioned over the panel
to simulate light refracting or reflecting across the surface. */
border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle outer border for definition */
}
.glass-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 20px;
pointer-events: none; /* Allows clicks to pass through */
z-index: 2; /* Ensures it's above content but doesn't block interaction */
}
/* Specific glass panel sizes and arrangements */
.main-card {
width: 450px;
height: 550px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
box-sizing: border-box; /* Include padding in width/height */
}
.small-card {
width: 280px;
height: 220px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
}
h1 {
font-size: 2.8em;
margin-bottom: 20px;
font-weight: 600;
}
h2 {
font-size: 1.8em;
margin-bottom: 15px;
font-weight: 600;
}
p {
font-size: 1.1em;
line-height: 1.6;
opacity: 0.85;
}
.buttons {
margin-top: 30px;
display: flex;
gap: 15px;
}
/* Button styling with glassmorphism properties */
.btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 12px 25px;
border-radius: 10px;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 1em;
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(5px); /* Add blur to buttons as well */
-webkit-backdrop-filter: blur(5px);
}
.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.btn.primary {
background: rgba(255, 255, 255, 0.3);
}
.btn.primary:hover {
background: rgba(255, 255, 255, 0.4);
}
/* Decorative floating elements for more depth and ambience */
.ball {
position: absolute;
background: rgba(255, 255, 255, 0.08); /* More subtle translucency */
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Softer shadow */
z-index: 5; /* Behind main glass panels but still noticeable */
animation: float 20s infinite ease-in-out;
will-change: transform;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Individual positioning and animation delays for floating elements */
.ball:nth-child(1) {
width: 180px;
height: 180px;
top: 10%;
left: 5%;
animation-delay: 0s;
}
.ball:nth-child(2) {
width: 220px;
height: 220px;
top: 70%;
right: 18%;
animation-delay: 5s;
}
.ball:nth-child(3) {
width: 120px;
height: 120px;
bottom: 5%;
left: 20%;
animation-delay: 10s;
}
.ball:nth-child(4) {
width: 150px;
height: 150px;
top: 40%;
left: 30%;
animation-delay: 15s;
}
.ball:nth-child(5) {
width: 100px;
height: 100px;
top: 20%;
right: 10%;
animation-delay: 20s;
}
/* Keyframe animation for the floating movement */
@keyframes float {
0% { transform: translate(0, 0); }
25% { transform: translate(15px, -25px) scale(1.02); }
50% { transform: translate(-15px, 15px); }
75% { transform: translate(25px, -10px) scale(0.98); }
100% { transform: translate(0, 0); }
}
/* Responsive adjustments for smaller screens */
@media (max-width: 900px) {
.glass-container {
flex-direction: column;
padding: 20px;
gap: 30px;
}
.main-card {
width: 95%; max-width: 450px;
height: auto;
margin-bottom: 20px;
padding: 25px;
}
.small-card {
width: 95%; max-width: 300px;
height: auto;
padding: 20px;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.5em; }
p { font-size: 0.95em; }
.buttons { flex-direction: column; gap: 10px; }
/* Adjust floating balls for smaller screens to reduce clutter */
.ball:nth-child(1) { width: 120px; height: 120px; top: 15%; left: 8%; }
.ball:nth-child(2) { width: 150px; height: 150px; top: 60%; right: 10%; }
.ball:nth-child(3) { width: 80px; height: 80px; bottom: 10%; left: 15%; }
.ball:nth-child(4), .ball:nth-child(5) { display: none; } /* Hide some for less visual noise */
}
</style>
</head>
<body>
<!-- Decorative floating elements in the background to enhance depth -->
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="glass-container">
<div class="glass-panel main-card">
<h1>Welcome to Glass UI</h1>
<p>Experience the future of web design with stunning, elegant, and truly immersive glassmorphism. This design goes beyond simple borders, using advanced shadow techniques for realistic depth and reflection.</p>
<div class="buttons">
<a href="#" class="btn primary">Discover More</a>
<a href="#" class="btn">View Showcase</a>
</div>
</div>
<div class="glass-panel small-card">
<h2>Crystal Clear Views</h2>
<p>Our transparent elements beautifully showcase the background, adding layers to your visual experience.</p>
</div>
<div class="glass-panel small-card">
<h2>Dynamic Edges</h2>
<p>Observe the subtle variations in light and shadow simulation around the edges, reflecting true glass interaction.</p>
</div>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Glassmorphism Showcase</title>
<style>
/* Sourcing a clean, modern font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
:root {
--card-width: 380px;
--card-height: 520px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
/* The background is crucial for the glass effect to be visible */
background: #1c1c1c;
color: #fff;
overflow: hidden; /* Hide the overflow from the animated shapes */
position: relative; /* Positioning context for the shapes */
}
/* Animated background shapes for a dynamic feel */
.shape {
position: absolute;
border-radius: 50%;
filter: blur(150px);
opacity: 0.8;
}
.shape-1 {
width: 500px;
height: 500px;
background: linear-gradient(45deg, #ff0077, #ff6600);
top: -10%;
left: -10%;
animation: move 20s infinite alternate;
}
.shape-2 {
width: 450px;
height: 450px;
background: linear-gradient(45deg, #00eeff, #4e11ff);
bottom: -5%;
right: -15%;
animation: move 25s infinite alternate-reverse;
}
@keyframes move {
from {
transform: translate(0, 0) rotate(0deg);
}
to {
transform: translate(100px, 200px) rotate(360deg);
}
}
/* The main container for the glass card */
.card-container {
position: relative;
width: var(--card-width);
height: var(--card-height);
/* This will create the 3D tilt effect on hover */
perspective: 1000px;
}
/* The Glass Card */
.glass-card {
position: relative;
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden; /* Important for the glare effect */
/* --- Core Glassmorphism Properties --- */
background: rgba(255, 255, 255, 0.05); /* Minimal base color */
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%); /* For Safari */
/* --- Advanced Border & Shadow System --- */
/* This creates the illusion of varied border thickness and lighting */
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
/* Outer soft shadow for depth */
0 8px 32px rgba(2, 1, 19, 0.3),
/* Inner highlight (Top-Left) - creates a thick, bright edge */
inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),
/* Inner shadow (Bottom-Right) - creates a thick, dark edge */
inset -2px -2px 2px 0px rgba(0, 0, 0, 0.15);
/* Smooth transition for the tilt effect */
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
/* Preparing for the mouse-move JS */
transform-style: preserve-3d;
}
/* --- Interactive 3D Tilt Effect on Hover --- */
.card-container:hover .glass-card {
transform: rotateY(var(--rotate-y, 0)) rotateX(var(--rotate-x, 0));
}
/* --- Interactive Mouse-Reactive Glare --- */
/* This pseudo-element creates a light that follows the cursor */
.glass-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at var(--mouse-x, 0) var(--mouse-y, 0),
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 40%
);
border-radius: inherit;
opacity: 0;
transition: opacity 0.5s;
z-index: 2; /* Sits above the content but below the top layer */
pointer-events: none; /* Allows clicks to go through */
}
.card-container:hover .glass-card::before {
opacity: 1;
}
/* Content inside the card */
.card-content {
padding: 30px;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
z-index: 1;
/* Applying a 3d transform to the content itself makes it pop out */
transform: translateZ(50px);
}
.card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 24px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.card-body {
font-size: 0.95rem;
font-weight: 300;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin-bottom: auto; /* Pushes button to the bottom */
}
.card-button {
margin-top: 30px;
padding: 12px 24px;
border-radius: 50px;
text-align: center;
font-weight: 500;
color: #fff;
text-decoration: none;
/* Giving the button its own glass effect */
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: all 0.3s ease;
}
.card-button:hover {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 20px rgba(255,255,255,0.2);
transform: translateY(-2px);
}
</style>
</head>
<body>
<!-- The background shapes -->
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="card-container">
<div class="glass-card">
<div class="card-content">
<div class="card-header">
<div class="card-icon">💎</div>
<h2 class="card-title">Glass UI</h2>
</div>
<p class="card-body">
This card demonstrates advanced glassmorphism. Notice the multi-layered shadows and borders that create a 3D bevel effect. The interactive glare follows your cursor, and the entire card tilts in 3D space.
</p>
<a href="#" class="card-button">Discover More</a>
</div>
</div>
</div>
<script>
const cardContainer = document.querySelector('.card-container');
const card = document.querySelector('.glass-card');
// --- Mouse-reactive Glare Effect ---
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
// Calculate mouse position relative to the card's top-left corner
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Set CSS custom properties for the radial gradient
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
});
// --- 3D Tilt Effect on Hover ---
cardContainer.addEventListener('mousemove', e => {
const rect = cardContainer.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Calculate rotation values based on mouse position
// The further from the center, the more it rotates
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / centerY * -10; // Max rotation 10deg
const rotateY = (x - centerX) / centerX * 10; // Max rotation 10deg
card.style.setProperty('--rotate-x', `${rotateX}deg`);
card.style.setProperty('--rotate-y', `${rotateY}deg`);
});
// Reset transform when the mouse leaves the container
cardContainer.addEventListener('mouseleave', () => {
card.style.setProperty('--rotate-x', '0deg');
card.style.setProperty('--rotate-y', '0deg');
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Glassmorphism Showcase</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-grad1: #0f2027;
--bg-grad2: #2c5364;
--glass-bg: rgba(255,255,255,0.18);
--glass-bg2: rgba(211,237,235,0.13);
--glass-border: rgba(255,255,255,0.34);
--glass-shadow: rgba(91,184,255,0.25);
--glass-shadow2: rgba(15,32,39,0.10);
--accent: #5bb8ff;
--primary: #fff;
--nav-height: 70px;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', Arial, sans-serif;
background: linear-gradient(120deg, var(--bg-grad1) 0%, var(--bg-grad2) 100%);
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-attachment: fixed;
}
/* NAVIGATION BAR */
nav {
position: sticky;
top: 0;
z-index: 20;
height: var(--nav-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
background:
linear-gradient(120deg, rgba(111, 204, 250, 0.07), rgba(236, 253, 242, 0.07)),
rgba(255,255,255,0.06);
backdrop-filter: blur(18px) saturate(1.45);
-webkit-backdrop-filter: blur(18px) saturate(1.45);
/* Advanced glass border effect: only bottom with 2 colors */
border-bottom: 2px solid;
border-image: linear-gradient(
120deg, rgba(111,204,250,0.65), rgba(255,255,255,0.38) 70%
) 1;
box-shadow: 0 2px 24px 0 rgba(56,70,90,0.05);
}
.logo {
font-weight: 700;
font-size: 1.65rem;
background: linear-gradient(108deg, #5bb8ff 30%, #7ef7af 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
letter-spacing: .04em;
user-select: none;
text-shadow: 0 3px 9px rgba(91,184,255, 0.18);
}
nav ul {
list-style: none;
display: flex;
gap: 34px;
padding: 0;
margin: 0;
}
nav ul li {
font-size: 1.01rem;
}
nav ul li a {
color: #e6f5ff;
text-decoration: none;
padding: 8px 18px 9px 18px;
border-radius: 28px;
backdrop-filter: blur(6px);
transition: background .19s, color .165s;
font-weight: 500;
}
nav ul li a:hover {
background: linear-gradient(93deg, rgba(91,184,255,0.08), rgba(126,247,175,0.14));
color: var(--accent);
}
/* Glassmorphism Card Container */
.container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px 0 100px 0;
min-height: calc(100vh - var(--nav-height));
position: relative;
z-index: 1;
}
/* Animated Floating Blobs (bg accents) */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(48px) brightness(1.12);
opacity: 0.19;
z-index: 0;
pointer-events: none;
animation: blobmove 23s infinite alternate;
}
.blob.blob1 {
width: 380px;
height: 320px;
left: -96px; top: 48px;
background: linear-gradient(140deg, #48c6ef 10%, #6f86d6 90%);
animation-delay: 0s;
}
.blob.blob2 {
width: 220px;
height: 170px;
right: 12vw;
top: 120px;
background: linear-gradient(120deg, #3fc9e6, #7ef7af 80%);
animation-delay: 7s;
}
.blob.blob3 {
width: 180px;height: 200px;
right: -66px; bottom: 150px;
background: linear-gradient(120deg, #c471f5, #fa71cd);
animation-delay: 14s;
opacity: 0.13;
}
@keyframes blobmove {
0% {
transform: scale(1) translateY(0) translateX(0);
}
100% {
transform: scale(1.16) translateY(48px) translateX(36px);
}
}
/* GLASS CARD ADVANCED */
.glass-card {
max-width: 480px;
width: 94vw;
margin: 0 auto;
border-radius: 32px 8px 40px 16px;
background: linear-gradient(114deg, var(--glass-bg) 70%, var(--glass-bg2) 100%);
box-shadow:
0 8px 32px 0 var(--glass-shadow),
0 1.5px 0.5px 0 var(--glass-shadow2),
0 1.5em 2.5em -0.9em #94ffe3a9;
backdrop-filter: blur(24px) saturate(1.41) brightness(1.09) contrast(1.03);
-webkit-backdrop-filter: blur(24px) saturate(1.41) brightness(1.09) contrast(1.03);
/* Advanced border: top and left more prominent, right subtle, bottom glow */
border-top: 2.5px solid #b0e2ffcc;
border-left: 2.8px solid #5bb8ffcc;
border-bottom: 3px solid #6fffc7cc;
border-right: 2.2px solid #ffffff2d;
border-radius: 32px 8px 40px 16px;
/* Different box-shadows on sides using layered shadows */
box-shadow:
0 10px 38px -6px #5bb8ff44, /* bottom glow (accent) */
-8px -6px 28px -9px #99e2ff4c, /* left/corner highlight */
0 1.5px 0.5px 0 var(--glass-shadow2),
0 0 0 0 transparent; /* base */
overflow: hidden;
position: relative;
z-index: 2;
padding: 42px 34px 36px 34px;
margin-bottom: 48px;
transition: box-shadow 0.21s, border 0.18s;
}
/* Glass card hover effect: increase bottom highlight, shift border color */
.glass-card:hover {
border-bottom: 5px solid #7ef7af;
border-right: 2.2px solid #5bb8ff99;
box-shadow:
0 24px 44px -6px #5bb8ff44,
-8px -6px 28px -9px #99e2ff4c,
0 1.5px 0.5px 0 var(--glass-shadow2);
background: linear-gradient(115deg, var(--glass-bg) 70%, #e4fff790 130%);
}
.glass-card .card-header {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #fafdff;
margin-bottom: 10px;
background: linear-gradient(80deg, #5bb8ff 60%, #b2ffe2 110%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-card .card-sub {
font-size: 1.04rem;
color: #e6f5ff;
margin-bottom: 32px;
opacity: 0.93;
font-weight: 500;
letter-spacing: .01em;
text-shadow: 0 2px 7px #d6f5fd26;
}
/* GLASS BUTTON: Advanced glass and border sides */
.glass-btn {
display: inline-block;
padding: 12px 36px;
border-radius: 30px 10px 32px 8px;
font-size: 1.18rem;
font-weight: 700;
letter-spacing: 0.03em;
color: #5bb8ff;
background: linear-gradient(120deg, rgba(255,255,255,0.34) 65%, rgba(126,247,175,.42) 120%);
backdrop-filter: blur(7px) saturate(1.3);
border-top: 2.5px solid #fff9ffcc;
border-left: 1.5px solid #aceafbcc;
border-bottom: 3px solid #7ef7af;
border-right: 2px solid #5bb8ff66;
box-shadow:
0 2px 24px -3px #5bb8ff64,
-5px -4px 24px -11px #b2ffe44c;
outline: none;
cursor: pointer;
transition: all 0.18s cubic-bezier(.65,.17,.34,.74);
margin-top: 4px;
margin-bottom: 14px;
text-shadow: 0 1px 10px #d6f5fd22;
user-select: none;
}
.glass-btn:hover, .glass-btn:focus {
color: #31b19a;
background: linear-gradient(115deg, rgba(209,252,255,0.59) 35%,#b2ffe2b3 100%);
box-shadow:
0 4px 32px 0 #7ef7af60,
-8px -3px 34px -11px #5bb8ff33;
border-bottom: 4px solid #31b19a;
border-top: 3px solid #fff;
}
/* Infopanel: simulated glass cut by shading bottom and right only */
.infopanel {
margin-top: 30px;
width: 95%;
max-width: 650px;
border-radius: 22px 38px 16px 40px;
background: linear-gradient(110deg, rgba(255,255,255,0.14) 80%, rgba(91,184,255,0.09) 120%);
border-bottom: 5px solid #7ef7af82;
border-right: 10px solid #5bb8ff1f;
box-shadow:
0 12px 44px -16px #5bb8ff4a,
8px 8px 36px -4px #7ef7af1b;
backdrop-filter: blur(16px) saturate(1.26);
padding: 28px 32px;
display: flex;
gap: 28px;
align-items: center;
font-size: 1.09rem;
color: #e6f5ff;
font-weight: 500;
opacity: 0.93;
letter-spacing: .01em;
position: relative;
z-index: 2;
margin-bottom: 22px;
}
.infopanel .icon {
font-size: 2.25rem;
margin-right: 6px;
background: linear-gradient(100deg, #5bb8ff 45%,#7ef7af 120%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 7px #bafcda46;
}
/* Glowing glass badge: border sides & shadow sides */
.glass-badge {
display: inline-block;
padding: 10px 24px;
border-radius: 18px 8px 16px 30px;
font-size: 1.07rem;
font-weight: 600;
background: linear-gradient(110deg,rgba(255,255,255,0.33) 70%,rgba(126,247,175,0.24) 100%);
border-bottom: 3px solid #7ef7af;
border-top: 2px solid #ffffff1e;
box-shadow: 0 8px 16px -7px #7ef7af4c, 4px -7px 14px -8px #5bb8ff33;
color: #5bb8ff;
letter-spacing: .01em;
margin-top: 8px;
margin-bottom: 10px;
backdrop-filter: blur(7px) saturate(1.14);
}
/* ADVANCED:: glass tabs with side shadows/borders that change active */
.glass-tabs {
margin-top: 24px;
width: 100%;
display: flex;
gap: 15px;
align-items: center;
justify-content: center;
user-select: none;
}
.glass-tab {
flex: 1 1 0;
display: block;
padding: 13px 0;
background: linear-gradient(120deg, rgba(255,255,255,0.14) 50%,rgba(91,184,255,0.09) 150%);
border-radius: 18px 6px 20px 15px;
border-top: 2px solid #5bb8ff29;
border-left: 2px solid #98dfff59;
border-bottom: 3px solid #79ffc9;
border-right: 2.5px solid #e4fff7bc;
box-shadow:
0 17px 28px -12px #5bb8ff22,
-8px -2px 24px -11px #7ef7af2c;
color: #5bb8ff;
font-weight: 600;
font-size: 1.09rem;
text-align: center;
cursor: pointer;
transition: all .17s;
}
.glass-tab.active, .glass-tab:focus {
background: linear-gradient(120deg, #e4fff7ab 53%, #caefff77 120%);
color: #32beab;
border-bottom: 6px solid #5bb8ff;
box-shadow: 0 20px 38px -16px #5bb8ff44, 0 -3px 8px -6px #7ef7af2c;
}
/* Responsive */
@media (max-width: 700px) {
.glass-card { padding: 28px 8vw; }
.infopanel { padding: 24px 9vw; font-size: .99rem;}
nav { padding: 0 16px; }
.glass-btn { padding: 12px 11vw;}
}
@media (max-width: 480px) {
.glass-card { padding: 20px 4vw;}
.card-header { font-size: 1.3rem;}
}
</style>
</head>
<body>
<nav>
<div class="logo">GlassMaster</div>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Animated blobs for depth -->
<span class="blob blob1"></span>
<span class="blob blob2"></span>
<span class="blob blob3"></span>
<div class="container">
<div class="glass-card" id="maincard">
<div class="card-header">Ultimate Advanced Glassmorphism</div>
<div class="card-sub">
Multiple border thicknesses & colors per side, intricate shadows, color-changing hover, animated blurred backgrounds, and ultra-modern gradients. Swipe through tabs below for the ultimate effect demo.
</div>
<span class="glass-badge">Now with advanced sides!</span>
<div class="glass-tabs" id="tabs">
<div class="glass-tab active" tabindex="0" data-tab="1">Overview</div>
<div class="glass-tab" tabindex="0" data-tab="2">Highlights</div>
<div class="glass-tab" tabindex="0" data-tab="3">Code</div>
</div>
<div id="tabpanel-1" class="tabpanel" style="margin-top:27px;">
<div style="font-size:1.08rem; color:#e8faff; opacity:.97;line-height:1.65">
Experience <b>deep glass effects</b>: layered gradients with varying opacities, thick bottom-glow border, custom blurring, and both soft and colored side shadows that simulate real glass edge refraction.<br><br>
Borders and shadows subtly change colors or thickness on interaction, all together creating depth and realism not seen in simple glassmorphism.
</div>
</div>
<div id="tabpanel-2" class="tabpanel" style="display:none;margin-top:27px;">
<ul style="color:#e6faf2;font-size:1.07rem;line-height:1.7;padding-left:22px;">
<li>
<b>Multi-Sided Borders:</b>
Thicker & colored borders on different sides, shift on hover.
</li>
<li>
<b>Slanted Corners:</b>
Rounded rectangle with asymmetric radii for a futuristic cut.
</li>
<li>
<b>Layered Shadows:</b>
Bottom and corners glow, simulating real glass thickness and internal caustics.
</li>
<li>
<b>Animated Blurry Blobs:</b>
Lively colored blur shapes below content for extra depth.
</li>
</ul>
</div>
<div id="tabpanel-3" class="tabpanel" style="display:none;margin-top:27px; color: #e6faf2;">
<div style="font-size:1.04rem;">Want this on your site? Just <b>copy the full HTML</b> for everything you see here.</div>
<br>
<pre style="font-size: 0.88rem; background:rgba(34,56,89,0.35);padding:14px;border-radius:12px;overflow:auto;max-width:100%;">
<!DOCTYPE html>
<html>
<!-- ... see full code above! -->
</html>
</pre>
</div>
<button class="glass-btn">Try Glass Now</button>
</div>
<div class="infopanel">
<span class="icon">💡</span>
<span>
Try hovering the card & button, and switching tabs.<br>
Notice the animated sides, shadow flows, changing border thickness & color, and merged gradients for true glass depth.
</span>
</div>
</div>
<script>
// Glass Tabs handler
const tabs = document.querySelectorAll('.glass-tab');
const panels = [
document.getElementById('tabpanel-1'),
document.getElementById('tabpanel-2'),
document.getElementById('tabpanel-3')
];
tabs.forEach((tab, idx) => {
tab.addEventListener('click',()=>{
tabs.forEach(t=>t.classList.remove('active'));
tab.classList.add('active');
panels.forEach((p,i)=>p.style.display=(i===idx?'block':'none'));
});
// for keyboard accessibility
tab.addEventListener('keydown',e=>{
if(e.key==='Enter'||e.key===' '){
tab.click();
}
});
});
</script>
</body>
</html>
```
Drag to resize
# Beautiful Glassmorphism Website
I'll create a sophisticated glassmorphism design with advanced techniques like asymmetric styling, multi-layer shadows, and subtle textures. The design will feature a modern dashboard layout with carefully crafted glass elements showing depth and dimension.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Glassmorphism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #6a11cb;
--secondary: #2575fc;
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.18);
--accent: #ff4d94;
--text-light: rgba(255, 255, 255, 0.85);
--text-lighter: rgba(255, 255, 255, 0.6);
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
background-attachment: fixed;
color: var(--text-light);
padding: 20px;
position: relative;
overflow-x: hidden;
}
/* Background animated circles */
.circles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.15);
animation: animate 25s linear infinite;
bottom: -150px;
border-radius: 50%;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
margin-bottom: 40px;
backdrop-filter: blur(12px);
background: var(--glass-bg);
border-radius: 20px;
box-shadow:
0 16px 30px rgba(0, 0, 0, 0.2),
inset 0 6px 12px rgba(255, 255, 255, 0.05),
inset 0 -6px 12px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
border: 1px solid transparent;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
opacity: 0.3;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.4rem;
font-weight: 700;
color: white;
}
.logo span {
color: var(--accent);
}
nav ul {
display: flex;
gap: 25px;
list-style: none;
}
nav a {
text-decoration: none;
color: var(--text-lighter);
font-weight: 500;
position: relative;
padding: 8px 0;
font-size: 1.05rem;
transition: all 0.3s ease;
}
nav a:hover {
color: white;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
.user-actions {
display: flex;
gap: 15px;
align-items: center;
}
.btn {
padding: 10px 24px;
border-radius: 50px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
box-shadow: 0 8px 20px rgba(105, 17, 203, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(105, 17, 203, 0.4);
}
.btn-outline {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
main {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.hero {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
gap: 40px;
padding: 40px;
backdrop-filter: blur(12px);
background: var(--glass-bg);
border-radius: 25px;
min-height: 420px;
margin-bottom: 30px;
border: 1px solid transparent;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.25),
inset 0 8px 16px rgba(255, 255, 255, 0.05),
inset 0 -8px 16px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero-content {
flex: 1;
padding: 20px 0;
}
.hero h1 {
font-size: 3.2rem;
line-height: 1.2;
margin-bottom: 20px;
background: linear-gradient(45deg, #fff, #ddd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero p {
font-size: 1.2rem;
line-height: 1.6;
color: var(--text-lighter);
max-width: 600px;
margin-bottom: 40px;
}
.hero-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image-placeholder {
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 70%);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.05),
0 20px 40px rgba(0,0,0,0.2);
}
.hero-image-placeholder img {
width: 60%;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
opacity: 0.9;
}
.card {
backdrop-filter: blur(12px);
background: var(--glass-bg);
border-radius: 20px;
padding: 30px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.2),
inset 0 5px 10px rgba(255, 255, 255, 0.05),
inset 0 -5px 10px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid transparent;
border-top: 1px solid rgba(255, 255, 255, 0.18);
border-left: 1px solid rgba(255, 255, 255, 0.12);
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 5px 10px rgba(255, 255, 255, 0.05),
inset 0 -5px 10px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 25px rgba(105, 17, 203, 0.2);
}
.card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.card-icon {
width: 55px;
height: 55px;
border-radius: 15px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
box-shadow: 0 8px 20px rgba(105, 17, 203, 0.3);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 5px;
}
.card-subtitle {
color: var(--text-lighter);
font-size: 0.95rem;
}
.card-content {
line-height: 1.6;
color: var(--text-lighter);
}
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 25px;
}
.stat-item {
display: flex;
flex-direction: column;
padding: 15px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.1);
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-lighter);
}
.features {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.feature-card {
display: flex;
gap: 20px;
padding: 25px;
backdrop-filter: blur(10px);
background: var(--glass-bg);
border-radius: 20px;
transition: all 0.3s ease;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.2),
inset 0 4px 8px rgba(255, 255, 255, 0.05),
inset 0 -4px 8px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.25),
inset 0 4px 8px rgba(255, 255, 255, 0.05),
inset 0 -4px 8px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 20px rgba(105, 17, 203, 0.15);
}
.feature-icon {
min-width: 60px;
height: 60px;
border-radius: 15px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
box-shadow: 0 8px 20px rgba(105, 17, 203, 0.3);
}
.feature-content h3 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.feature-content p {
color: var(--text-lighter);
line-height: 1.5;
}
footer {
grid-column: 1 / -1;
margin-top: 60px;
padding: 40px;
backdrop-filter: blur(12px);
background: var(--glass-bg);
border-radius: 25px;
text-align: center;
border: 1px solid transparent;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
inset 0 8px 16px rgba(255, 255, 255, 0.05),
inset 0 -8px 16px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
footer p {
color: var(--text-lighter);
margin-top: 20px;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 25px;
}
.social-links a {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.05);
color: var(--text-light);
font-size: 1.3rem;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-links a:hover {
background: linear-gradient(45deg, var(--primary), var(--secondary));
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(105, 17, 203, 0.3);
}
/* Responsive */
@media (max-width: 1100px) {
main {
grid-template-columns: 1fr;
}
.hero {
flex-direction: column;
}
.features {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
header {
flex-direction: column;
gap: 20px;
}
nav ul {
flex-wrap: wrap;
justify-content: center;
}
.features {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2.5rem;
}
.hero {
padding: 30px;
}
}
</style>
</head>
<body>
<!-- Background Animation -->
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<header>
<div class="logo">
<i class="fas fa-gem"></i>
<span>Glass</span>Design
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="user-actions">
<button class="btn">Sign Up</button>
</div>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h1>Elevate Your Digital Experience with Advanced Glassmorphism</h1>
<p>Discover the future of UI design with our cutting-edge glassmorphism techniques. We create immersive interfaces that blend depth, light, and motion for unforgettable user experiences.</p>
<button class="btn">Explore More</button>
</div>
<div class="hero-image">Drag to resize
Here's a complete HTML code block with advanced glassmorphism effects, including asymmetric borders, varied shadows, and dynamic color transitions. This single file includes all necessary styles and scripts directly within it for a stunning visual effect.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Glassmorphism Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
overflow: hidden;
}
.container {
position: relative;
width: 100%;
max-width: 1200px;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.card {
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
overflow: hidden;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2),
-5px -5px 20px rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.3),
-10px -10px 30px rgba(255, 255, 255, 0.15);
}
/* Asymmetric border effects using pseudo-elements */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 100%
);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.card-content {
padding: 30px;
color: white;
text-align: center;
position: relative;
z-index: 1;
}
.card-content h2 {
font-size: 24px;
margin-bottom: 15px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.card-content p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.5;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.card-content button {
padding: 10px 25px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 25px;
cursor: pointer;
backdrop-filter: blur(5px);
transition: background 0.3s ease, transform 0.3s ease;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
3px 3px 10px rgba(0, 0, 0, 0.2);
}
.card-content button:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.15),
5px 5px 15px rgba(0, 0, 0, 0.3);
}
/* Unique border thickness on different sides */
.card:nth-child(1) {
border-top: 3px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
border-left: 4px solid rgba(255, 255, 255, 0.5);
}
.card:nth-child(2) {
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-right: 3px solid rgba(255, 255, 255, 0.4);
border-bottom: 4px solid rgba(255, 255, 255, 0.5);
border-left: 2px solid rgba(255, 255, 255, 0.3);
}
.card:nth-child(3) {
border-top: 4px solid rgba(255, 255, 255, 0.5);
border-right: 2px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
/* Background particles for depth */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float infinite linear;
}
@keyframes float {
0% { transform: translateY(100vh) translateX(0); opacity: 0.8; }
100% { transform: translateY(-100vh) translateX(50px); opacity: 0.2; }
}
</style>
</head>
<body>
<div class="particles">
<div class="particle" style="left: 10%; animation-duration: 5s; animation-delay: 0s; width: 8px; height: 8px;"></div>
<div class="particle" style="left: 20%; animation-duration: 8s; animation-delay: 1s; width: 12px; height: 12px;"></div>
<div class="particle" style="left: 30%; animation-duration: 6s; animation-delay: 2s; width: 10px; height: 10px;"></div>
<div class="particle" style="left: 40%; animation-duration: 9s; animation-delay: 3s; width: 6px; height: 6px;"></div>
<div class="particle" style="left: 50%; animation-duration: 7s; animation-delay: 4s; width: 14px; height: 14px;"></div>
<div class="particle" style="left: 60%; animation-duration: 5s; animation-delay: 5s; width: 9px; height: 9px;"></div>
<div class="particle" style="left: 70%; animation-duration: 8s; animation-delay: 6s; width: 11px; height: 11px;"></div>
<div class="particle" style="left: 80%; animation-duration: 6s; animation-delay: 7s; width: 7px; height: 7px;"></div>
<div class="particle" style="left: 90%; animation-duration: 9s; animation-delay: 8s; width: 13px; height: 13px;"></div>
</div>
<div class="container">
<div class="card">
<div class="card-content">
<h2>Glass Card 1</h2>
<p>Experience the beauty of glassmorphism with asymmetric borders and dynamic shadows.</p>
<button>Explore</button>
</div>
</div>
<div class="card">
<div class="card-content">
<h2>Glass Card 2</h2>
<p>Each card features unique border thickness and gradient highlights on different sides.</p>
<button>Discover</button>
</div>
</div>
<div class="card">
<div class="card-content">
<h2>Glass Card 3</h2>
<p>Hover effects and subtle animations enhance the glass-like appearance.</p>
<button>Learn More</button>
</div>
</div>
</div>
</body>
</html>
```
This code creates a sophisticated glassmorphism website with several advanced features:
- **Asymmetric Borders**: Each card has different border thicknesses and opacities on each side for a realistic glass effect.
- **Dynamic Shadows**: Varied shadow intensities and directions that change on hover.
- **Gradient Highlights**: Pseudo-elements add subtle gradient overlays on specific sides of the cards.
- **Background Particles**: Floating particles in the background add depth to the design.
- **Interactive Elements**: Hover effects on cards and buttons with smooth transitions and enhanced shadows.
All styles and effects are embedded directly in the HTML file, requiring no external resources.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glassmorphism Masterpiece</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
font-family: 'Segoe UI', sans-serif;
overflow: hidden;
}
.glass-container {
position: relative;
width: 90vw;
max-width: 400px;
padding: 3rem 2rem;
border-radius: 25px;
color: #ffffffee;
backdrop-filter: blur(20px) brightness(1.1) contrast(1.1);
-webkit-backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.03);
box-shadow:
/* Top glow */ 0 -5px 15px rgba(0,255,255,0.15),
/* Bottom shadow */ 0 8px 25px rgba(255,0,255,0.15),
/* Left inner glow */ inset 4px 0 10px rgba(0,255,0,0.05),
/* Right inner glow */ inset -4px 0 10px rgba(255,0,0,0.05),
/* Base border glow */ 0 0 0 1px rgba(255,255,255,0.08);
border: 2px solid transparent;
animation: float 6s ease-in-out infinite;
transition: all 0.4s ease;
}
.glass-container::before,
.glass-container::after {
content: '';
position: absolute;
border-radius: 25px;
pointer-events: none;
z-index: -1;
}
.glass-container::before {
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg,
rgba(0,255,255,0.2) 0%,
rgba(0,150,255,0.15) 25%,
rgba(255,0,255,0.2) 50%,
rgba(255,0,100,0.15) 75%,
rgba(255,255,0,0.2) 100%
);
filter: blur(5px);
animation: borderGlow 4s ease-in-out infinite;
}
.glass-container::after {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0,255,255,0.05) 0%,
rgba(0,0,255,0.03) 25%,
rgba(255,0,255,0.05) 50%,
rgba(255,0,0,0.03) 75%,
rgba(255,255,0,0.05) 100%
);
box-shadow:
/* Top border */ inset 0 2px 4px -1px rgba(0,255,255,0.2),
/* Bottom border */ inset 0 -2px 6px -1px rgba(255,0,255,0.2),
/* Left border */ inset 2px 0 4px -1px rgba(0,255,0,0.15),
/* Right border */ inset -2px 0 4px -1px rgba(255,0,0,0.15);
}
.glass-container:hover {
transform: scale(1.02) rotate(0.5deg);
box-shadow:
0 -8px 25px rgba(0,255,255,0.25),
0 10px 30px rgba(255,0,255,0.25),
inset 0 0 15px rgba(0,255,0,0.1),
inset 0 0 15px rgba(255,0,0,0.1),
0 0 0 1px rgba(255,255,255,0.12);
backdrop-filter: blur(25px) brightness(1.15) contrast(1.05);
}
.glass-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-shadow: 0 0 10px rgba(0,255,255,0.3);
}
.glass-text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
color: #ffffffcc;
text-shadow: 0 0 5px rgba(255,255,255,0.1);
}
.glass-button {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: #ffffffee;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
0 0 8px rgba(0,255,255,0.15),
inset 0 0 5px rgba(255,255,255,0.05);
}
.glass-button:hover {
background: rgba(0,255,255,0.15);
border-color: rgba(0,255,255,0.3);
box-shadow:
0 0 15px rgba(0,255,255,0.3),
inset 0 0 10px rgba(0,255,255,0.1);
transform: translateY(-2px);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes borderGlow {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@media (max-width: 480px) {
.glass-container {
padding: 2.5rem 1.5rem;
border-radius: 20px;
}
}
</style>
</head>
<body>
<div class="glass-container">
<h1 class="glass-title">Glassmorphism Pro</h1>
<p class="glass-text">
Experience the ultimate frosted glass effect with multi-directional gradients,
asymmetric shadows, and dynamic depth layers. Hover to see the magic unfold.
</p>
<button class="glass-button">Shine On</button>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Wonderland</title>
<style>
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Background elements for blur effect */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxwYXRoIGQ9Ik0gNTAgMCAyIDAgTTAgNTAgMCAyIE0gNTAgNTAgNDggNTAgTTAgMCAwIDQ4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIG9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz4KPC9zdmc+') repeat, radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent);
z-index: -1;
animation: subtleMove 10s infinite alternate;
}
@keyframes subtleMove {
0% { transform: translate(0, 0); }
100% { transform: translate(5px, 5px); }
}
/* Glassmorphism base class */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
position: relative;
overflow: hidden;
}
/* Advanced border and shadow techniques */
.glass::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
filter: blur(5px);
z-index: -1;
}
.glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow:
inset 0 5px 10px rgba(255,255,255,0.2), /* Top highlight */
inset 0 -5px 10px rgba(0,0,0,0.1), /* Bottom shadow */
inset 5px 0 10px rgba(255,255,255,0.1), /* Right subtle glow */
inset -5px 0 10px rgba(0,0,0,0.05); /* Left subtle shadow */
border-top: 1px solid rgba(255,255,255,0.5); /* Thicker top border */
border-bottom: 2px solid rgba(255,255,255,0.2); /* Thinner bottom border */
border-left: 1px solid rgba(255,255,255,0.3); /* Left border with different opacity */
border-right: 3px solid rgba(255,255,255,0.1); /* Right border thicker and faded */
border-radius: 20px;
}
/* Header styles */
header {
width: 80%;
max-width: 1200px;
padding: 40px;
margin: 20px 0;
text-align: center;
}
header h1 {
font-size: 3em;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
header p {
font-size: 1.2em;
color: rgba(255,255,255,0.8);
}
/* Card container */
.cards {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
width: 80%;
max-width: 1200px;
}
/* Individual cards with variations */
.card {
width: 300px;
padding: 30px;
text-align: center;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.card h2 {
font-size: 1.8em;
color: #fff;
margin-bottom: 10px;
}
.card p {
font-size: 1em;
color: rgba(255,255,255,0.9);
}
/* Variations for advanced glassmorphism */
.card1::after {
box-shadow:
inset 0 8px 15px rgba(255,255,255,0.3), /* Stronger top */
inset 0 -3px 5px rgba(0,0,0,0.2), /* Softer bottom */
inset 3px 0 8px rgba(255,0,0,0.1), /* Red tint right */
inset -3px 0 8px rgba(0,0,255,0.1); /* Blue tint left */
border-top: 2px solid rgba(255,0,0,0.4); /* Red top border */
border-bottom: 1px solid rgba(0,255,0,0.3); /* Green bottom */
}
.card2::after {
box-shadow:
inset 0 3px 5px rgba(255,255,255,0.1),
inset 0 -8px 15px rgba(0,0,0,0.3),
inset 8px 0 15px rgba(255,255,0,0.2), /* Yellow right */
inset -2px 0 4px rgba(0,255,255,0.1); /* Cyan left */
border-left: 4px solid rgba(255,255,0,0.5); /* Thick yellow left */
border-right: 1px solid rgba(0,255,255,0.2); /* Thin cyan right */
}
.card3::after {
box-shadow:
inset 0 5px 10px rgba(255,255,255,0.2),
inset 0 -5px 10px rgba(0,0,0,0.1),
inset 5px 0 10px rgba(128,0,128,0.1), /* Purple right */
inset -5px 0 10px rgba(255,165,0,0.1); /* Orange left */
border-top: 1px solid rgba(128,0,128,0.4),
border-bottom: 3px solid rgba(255,165,0,0.3); /* Thicker orange bottom */
}
/* Footer */
footer {
width: 80%;
max-width: 1200px;
padding: 20px;
margin: 20px 0;
text-align: center;
font-size: 0.9em;
color: rgba(255,255,255,0.7);
}
footer::after {
box-shadow:
inset 0 2px 4px rgba(255,255,255,0.1),
inset 0 -2px 4px rgba(0,0,0,0.05),
inset 2px 0 4px rgba(255,255,255,0.05),
inset -2px 0 4px rgba(0,0,0,0.1);
border-top: 1px solid rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<header class="glass">
<h1>Welcome to Glassmorphism Wonderland</h1>
<p>Experience the beauty of advanced glass effects with varying borders, shadows, and blurs.</p>
</header>
<div class="cards">
<div class="glass card card1">
<h2>Card One</h2>
<p>This card features a red-tinted top border and blue-left shadow for a dynamic glass effect.</p>
</div>
<div class="glass card card2">
<h2>Card Two</h2>
<p>Yellow right glow and thick left border with cyan accents create a vibrant look.</p>
</div>
<div class="glass card card3">
<h2>Card Three</h2>
<p>Purple and orange shadows on sides with varying border thicknesses for depth.</p>
</div>
</div>
<footer class="glass">
<p>© 2023 Glassmorphism Wonderland. All rights reserved.</p>
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Advanced Glassmorphism Showcase</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
/* Global Reset & Basics */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { height:100%; font-family:'Poppins', sans-serif; overflow-x:hidden; }
/* Animated Gradient Background */
body {
background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 600% 600%;
animation: gradientBG 20s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
position: relative;
z-index:1;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
line-height:1.5;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hero .btn {
margin-top: 2rem;
padding: 0.75rem 2rem;
background: rgba(255,255,255,0.2);
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(6px);
box-shadow: 0 4px 30px rgba(0,0,0,0.2);
transition: 0.3s;
}
.hero .btn:hover {
background: rgba(255,255,255,0.35);
box-shadow: 0 6px 40px rgba(0,0,0,0.3);
}
/* Cards Section */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
gap: 2rem;
padding: 4rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Glassmorphism Base */
.glass {
position: relative;
padding: 2rem;
border-radius: 16px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
box-shadow:
inset 0 0 40px rgba(255,255,255,0.2),
0 8px 32px rgba(0,0,0,0.2);
transition: transform 0.3s, box-shadow 0.3s;
overflow: hidden;
border-top: var(--bt, 2px solid rgba(255,255,255,0.5));
border-right: var(--br, 4px solid rgba(255,255,255,0.2));
border-bottom: var(--bb, 3px solid rgba(0,0,0,0.1));
border-left: var(--bl, 1px solid rgba(0,0,0,0.05));
}
.glass::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0));
pointer-events: none;
}
.glass:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
inset 0 0 60px rgba(255,255,255,0.3),
0 12px 48px rgba(0,0,0,0.3);
}
/* Individual Card Custom Borders & Shadows */
.card1 { --bt:3px solid rgba(255,255,255,0.6); --br:6px solid rgba(255,255,255,0.3); --bb:4px solid rgba(0,0,0,0.15); --bl:2px solid rgba(0,0,0,0.07); }
.card2 { --bt:2px solid rgba(0,255,255,0.7); --br:5px solid rgba(0,255,255,0.4); --bb:3px solid rgba(0,0,0,0.1); --bl:1px solid rgba(0,0,0,0.05); }
.card3 { --bt:4px solid rgba(255,20,147,0.6); --br:2px solid rgba(255,20,147,0.3); --bb:5px solid rgba(0,0,0,0.2); --bl:3px solid rgba(0,0,0,0.1); }
.glass h3 {
margin-bottom: 1rem;
font-weight:600;
color:#fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.glass p {
font-size:0.95rem;
line-height:1.4;
color: #edf2f7;
margin-bottom:1.5rem;
}
.glass .learn-btn {
padding:0.5rem 1.5rem;
background: rgba(255,255,255,0.18);
color:#fff;
text-decoration:none;
border-radius:50px;
backdrop-filter:blur(6px);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition:0.3s;
}
.glass .learn-btn:hover {
background: rgba(255,255,255,0.3);
box-shadow: 0 6px 30px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<section class="hero">
<div>
<h1>Stunning Glassmorphism</h1>
<p>Experience the next level of UI design with layered translucency, dynamic shadows, and asymmetric borders for depth and elegance.</p>
<button class="btn">Get Started</button>
</div>
</section>
<section class="cards">
<div class="glass card1">
<h3>Crystal Clarity</h3>
<p>Asymmetric borders and nuanced shadows create a realistic glass effect. Notice how each side varies in thickness and color.</p>
<a href="#" class="learn-btn">Learn More</a>
</div>
<div class="glass card2">
<h3>Color Infusion</h3>
<p>Subtle hues in the borders bring life to the glass. Combine with backdrop-filter and inner glow for a vibrant interface.</p>
<a href="#" class="learn-btn">Discover</a>
</div>
<div class="glass card3">
<h3>Depth & Dimension</h3>
<p>Inset highlights and outer shadows give each card a floating feel. Hover to elevate and intensify the glow.</p>
<a href="#" class="learn-btn">Explore</a>
</div>
</section>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Website</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #2b2d42, #4f5d75);
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.glass-container {
position: relative;
width: 80%;
max-width: 800px;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.2),
inset 0 0 10px rgba(255, 255, 255, 0.1),
-5px -5px 10px rgba(255, 255, 255, 0.1),
5px 5px 10px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.glass-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.glass-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
h1 {
text-align: center;
color: #fff;
font-size: 36px;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
p {
color: #fff;
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
cursor: pointer;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.2),
inset 0 0 10px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
button:hover {
background: rgba(255, 255, 255, 0.3);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 0 10px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="glass-container">
<h1>Glassmorphism Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<button>Learn More</button>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Glassmorphism</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
min-height: 100vh;
overflow-x: hidden;
background: linear-gradient(135deg,
#667eea 0%,
#764ba2 25%,
#f093fb 50%,
#f5576c 75%,
#4facfe 100%);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.shape:nth-child(1) {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.shape:nth-child(2) {
width: 120px;
height: 120px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.shape:nth-child(3) {
width: 60px;
height: 60px;
top: 80%;
left: 30%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(120deg); }
66% { transform: translateY(10px) rotate(240deg); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
z-index: 1;
}
.hero-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.15) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 60px 40px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
/* Advanced borders */
border-top: 2px solid rgba(255, 255, 255, 0.6);
border-left: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* Advanced shadows */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
0 4px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.hero-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.8) 50%,
transparent 100%);
}
.hero-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%);
pointer-events: none;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
text-align: center;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}
.hero-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
text-align: center;
font-weight: 300;
position: relative;
z-index: 2;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.glass-card {
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
padding: 30px;
position: relative;
transition: all 0.3s ease;
/* Asymmetric borders */
border-top: 1.5px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 0.5px solid rgba(255, 255, 255, 0.15);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
/* Complex shadows */
box-shadow:
0 6px 25px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset -1px 0 0 rgba(255, 255, 255, 0.1);
}
.glass-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.18),
0 6px 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset -1px 0 0 rgba(255, 255, 255, 0.15);
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.15) 100%);
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.7) 30%,
rgba(255, 255, 255, 0.3) 100%);
}
.glass-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.1) 100%);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.card-content {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
font-weight: 300;
position: relative;
z-index: 2;
}
.navigation {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 50px;
padding: 15px 30px;
display: flex;
justify-content: center;
gap: 20px;
position: relative;
/* Sophisticated border treatment */
border-top: 2px solid rgba(255, 255, 255, 0.6);
border-left: 1.5px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
inset 0 2px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.navigation::before {
content: '';
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.9) 50%,
transparent 100%);
border-radius: 2px;
}
.nav-button {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 100%);
border: none;
color: rgba(255, 255, 255, 0.9);
padding: 12px 24px;
border-radius: 25px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
/* Varying border thickness */
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-left: 0.5px solid rgba(255, 255, 255, 0.3);
border-right: 0.5px solid rgba(255, 255, 255, 0.1);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav-button:hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.15) 100%);
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.15),
inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.nav-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%);
}
.special-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 30px;
padding: 50px;
text-align: center;
position: relative;
margin-top: 40px;
overflow: hidden;
/* Triple-layered borders */
border-top: 3px solid rgba(255, 255, 255, 0.7);
border-left: 2px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
/* Multi-layered shadows */
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.2),
0 10px 30px rgba(0, 0, 0, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 3px 0 rgba(255, 255, 255, 0.4),
inset 0 -2px 0 rgba(0, 0, 0, 0.05),
inset -2px 0 0 rgba(255, 255, 255, 0.2);
}
.special-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.9) 25%,
rgba(255, 255, 255, 0.9) 75%,
rgba(255, 255, 255, 0.3) 100%);
border-radius: 3px;
}
.special-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.1) 100%);
border-radius: 0 0 0 30px;
}
.special-title {
font-size: 2.5rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 20px;
text-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
.special-content {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 300;
line-height: 1.7;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-card {
padding: 40px 20px;
}
.glass-card {
padding: 20px;
}
.special-card {
padding: 30px 20px;
}
.special-title {
font-size: 2rem;
}
.navigation {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="floating-shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
<div class="container">
<div class="hero-card">
<h1 class="hero-title">Advanced Glassmorphism</h1>
<p class="hero-subtitle">Experience cutting-edge glass effects with sophisticated border treatments and multi-layered shadows</p>
</div>
<div class="cards-grid">
<div class="glass-card">
<h3 class="card-title">Asymmetric Borders</h3>
<p class="card-content">Each side features different border thickness and opacity, creating depth and dimension that mimics real glass properties with light refraction.</p>
</div>
<div class="glass-card">
<h3 class="card-title">Multi-Layer Shadows</h3>
<p class="card-content">Complex shadow systems combine outer shadows with inset highlights, creating realistic glass depth and ambient lighting effects.</p>
</div>
<div class="glass-card">
<h3 class="card-title">Gradient Overlays</h3>
<p class="card-content">Sophisticated background gradients and overlay effects simulate light passing through translucent materials with varying density.</p>
</div>
</div>
<div class="navigation">
<button class="nav-button">Home</button>
<button class="nav-button">About</button>
<button class="nav-button">Services</button>
<button class="nav-button">Contact</button>
</div>
<div class="special-card">
<h2 class="special-title">Premium Glass Design</h2>
<p class="special-content">This showcase demonstrates advanced glassmorphism techniques including variable border weights, complex shadow layering, gradient positioning, and sophisticated backdrop filtering. Every element is crafted to achieve the most realistic glass appearance possible with CSS.</p>
</div>
</div>
</body>
</html>
```Drag to resize