پیشنمایش زنده
کد HTML
<div class="main-container">
<svg class="svg-container">
<defs>
<filter
id="turbulent-displace"
x="-20%"
y="-20%"
width="140%"
height="140%"
>
<feTurbulence
type="turbulence"
baseFrequency="0.02"
numOctaves="10"
result="noise1"
seed="1"
></feTurbulence>
<feOffset in="noise1" dx="0" dy="0" result="offsetNoise1"></feOffset>
<feTurbulence
type="turbulence"
baseFrequency="0.02"
numOctaves="10"
result="noise2"
seed="1"
></feTurbulence>
<feOffset in="noise2" dx="0" dy="0" result="offsetNoise2"></feOffset>
<feTurbulence
type="turbulence"
baseFrequency="0.02"
numOctaves="10"
result="noise1"
seed="2"
></feTurbulence>
<feOffset in="noise1" dx="0" dy="0" result="offsetNoise3"></feOffset>
<feTurbulence
type="turbulence"
baseFrequency="0.02"
numOctaves="10"
result="noise2"
seed="2"
></feTurbulence>
<feOffset in="noise2" dx="0" dy="0" result="offsetNoise4"></feOffset>
<feComposite
in="offsetNoise1"
in2="offsetNoise2"
result="part1"
></feComposite>
<feComposite
in="offsetNoise3"
in2="offsetNoise4"
result="part2"
></feComposite>
<feBlend
in="part1"
in2="part2"
mode="color-dodge"
result="combinedNoise"
></feBlend>
<feDisplacementMap
in="SourceGraphic"
in2="combinedNoise"
scale="30"
xChannelSelector="R"
yChannelSelector="B"
></feDisplacementMap>
</filter>
</defs>
</svg>
<div class="card-container">
<div class="inner-container">
<div class="border-outer">
<div class="main-card"></div>
</div>
<div class="glow-layer-1"></div>
<div class="glow-layer-2"></div>
</div>
<div class="overlay-1"></div>
<div class="overlay-2"></div>
<div class="background-glow"></div>
<div class="content-container">
<div class="content-top">
<div class="scrollbar-glass">Interactive</div>
<p class="title">Vibrant Frame</p>
</div>
<hr class="divider" />
<div class="content-bottom">
<p class="description">Highlight your content with style and energy.</p>
</div>
</div>
</div>
</div>
کد CSS
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.svg-container {
position: absolute;
}
.card-container {
padding: 2px;
border-radius: 24px;
position: relative;
background: linear-gradient(
-30deg,
oklch(0.4 0.2 280),
transparent,
oklch(0.4 0.2 280)
),
linear-gradient(to bottom, oklch(0.185 0 0), oklch(0.185 0 0));
overflow: hidden;
}
.inner-container {
position: relative;
}
.border-outer {
border: 2px solid rgba(72, 87, 221, 0.5);
border-radius: 24px;
padding-right: 4px;
padding-bottom: 4px;
}
.main-card {
width: 350px;
height: 500px;
border-radius: 24px;
border: 2px solid #6348dd;
margin-top: -4px;
margin-left: -4px;
filter: url(#turbulent-displace);
}
.glow-layer-1 {
border: 2px solid rgba(221, 132, 72, 0.6);
border-radius: 24px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
filter: blur(1px);
}
.glow-layer-2 {
border: 2px solid oklch(0.63 0.16 280);
border-radius: 24px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
filter: blur(4px);
}
.overlay-1,
.overlay-2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 24px;
mix-blend-mode: overlay;
transform: scale(1.1);
filter: blur(16px);
background: linear-gradient(
-30deg,
white,
transparent 30%,
transparent 70%,
white
);
}
.overlay-1 {
opacity: 1;
}
.overlay-2 {
opacity: 0.5;
}
.background-glow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 24px;
filter: blur(32px);
transform: scale(1.1);
opacity: 0.3;
z-index: -1;
background: linear-gradient(
-30deg,
oklch(0.63 0.16 280),
transparent,
#6348dd
);
}
.content-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content-top {
display: flex;
flex-direction: column;
padding: 48px;
padding-bottom: 16px;
height: 100%;
}
.content-bottom {
display: flex;
flex-direction: column;
padding: 48px;
padding-top: 16px;
}
.scrollbar-glass {
background: radial-gradient(
47.2% 50% at 50.39% 88.37%,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0) 100%
),
rgba(255, 255, 255, 0.04);
position: relative;
transition: background 0.3s ease;
border-radius: 14px;
width: fit-content;
height: fit-content;
padding: 8px 16px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.scrollbar-glass:hover {
background: radial-gradient(
47.2% 50% at 50.39% 88.37%,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0) 100%
),
rgba(255, 255, 255, 0.08);
}
.scrollbar-glass::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1px;
background: linear-gradient(
150deg,
rgba(255, 255, 255, 0.48) 16.73%,
rgba(255, 255, 255, 0.08) 30.2%,
rgba(255, 255, 255, 0.08) 68.2%,
rgba(255, 255, 255, 0.6) 81.89%
);
border-radius: inherit;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
pointer-events: none;
}
.title {
font-size: 36px;
font-weight: 500;
margin-top: auto;
color: #fff;
}
.description {
opacity: 0.5;
color: #fff;
}
.divider {
margin-top: auto;
border: none;
height: 1px;
background-color: currentColor;
opacity: 0.2;
mask-image: linear-gradient(to right, transparent, black, transparent);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black,
transparent
);
}