Create dark interfaces with frosted glass panels, gradient borders, and subtle glow. The skill provides CSS and Tailwind patterns for cards, hero sections, and dashboards, with checks for readable contrast, visible focus, and mobile behavior.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.
실행 점수 미검증
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).backdrop-filter, transparent dark fill, and subtle inner highlight..border-gradient::before) to key surfaces.Use these as defaults and tune per brand.
:root {
--bg-0: #020617;
--bg-1: #0b1220;
--glass-fill: rgba(15, 23, 42, 0.45);
--glass-fill-strong: rgba(15, 23, 42, 0.62);
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--accent: #60a5fa;
}
.glass-panel {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
background-color: var(--glass-fill);
border-radius: 24px;
box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.border-gradient {
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: linear-gradient(
145deg,
rgba(148, 163, 184, 0.28) 0%,
rgba(96, 165, 250, 0.36) 45%,
rgba(168, 85, 247, 0.3) 70%,
rgba(148, 163, 184, 0.18) 100%
);
pointer-events: none;
}
<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
<h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
<p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>
#cbd5e1 on dark glass surfaces.outline or bright border state).--glass-fill-strong).아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.