Iridescent
Dreamscape
Create a dreamy, sensory UI by blending flowing mesh gradients with holographic colors. Ideal for high-end applications and creative showcases.
흐르는 듯한 매시 그라데이션과 홀로그래픽 색감을 섞어 몽환적이고 감각적인 UI를 만듭니다. 고사양 애플리케이션이나 크리에이티브 쇼케이스에 적합합니다.
流れるようなメッシュグラデーションとホログラフィックな色彩を組み合わせて、幻想的で感覚的なUIを作成します。高品質アプリケーションやクリエイティブショーケースに最適です。
Dynamic Gradients
Implement ultra-smooth organic background animations using CSS blur
동적 그라데이션
CSS 블러를 활용한 매우 부드러운 유기적 백그라운드 애니메이션 구현
動的グラデーション
CSSブラーを活用した非常に滑らかな有機的バックグラウンドアニメーションの実装
Glass Panel Overlay
Combine extreme blur with ultra-thin white borders for a glass reflection effect
글래스 패널 오버레이
극도의 블러와 아주 얇은 화이트 보더를 조합해 유리에 비친 느낌 표현
グラスパネルオーバーレイ
極度のブラーと非常に薄いホワイトボーダーを組み合わせてガラスに映った感覚を表現
AI Request Prompt
Design a visually stunning landing page with a vibrant, fluid holographic gradient background. [Style Conditions] 1. Background: Place large radial-gradient orbs of pink (#ff7eb3) / blue (#4facfe) / cyan (#00f2fe) on a dark base (#0b0f19). Blur 80px+, opacity 0.6, scale/rotate animation on a 15s cycle. 2. Hero: backdrop-filter: blur(40px), 40px rounded corners, ultra-thin white border (rgba 255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2) highlight. 3. Typography: Thin, delicate font (Outfit 300/500/700), title at clamp(3rem,7vw,6rem), gradient text effect via background-clip: text. 4. Cards: Semi-transparent gradient (rgba 255,255,255,0.1 to 0.02), hover translateY(-5px) + strong shadow. 5. All text white, body text opacity 0.9 for visual hierarchy. [Responsive] - Mobile: Reduce hero padding (30px), single column card stack - Desktop: max-width 1080px, cards auto-fit minmax(240px, 1fr) [Restrictions] - No light backgrounds - No simple transparent cards without blur - No static backgrounds (orbs must animate) [Output] 1) Color tokens (orb colors/panels/text) and gradient system 2) Hero / Feature Cards / CTA structure 3) HTML/CSS code including orb animations
시각적으로 압도적인 다채롭고 유동적인 홀로그래픽 배경의 랜딩 페이지를 설계해줘. [스타일 조건] 1. 배경: 다크 베이스(#0b0f19) 위에 핑크(#ff7eb3)/블루(#4facfe)/사이언(#00f2fe)의 큰 radial-gradient 오르브 배치. blur 80px 이상, opacity 0.6, 15s 주기로 scale/rotate 애니메이션. 2. 히어로: backdrop-filter: blur(40px), 40px 라운드 코너, 극도로 얇은 화이트 보더(rgba 255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2) 하이라이트. 3. 타이포: 얇고 섬세한 폰트(Outfit 300/500/700), 타이틀은 clamp(3rem,7vw,6rem), background-clip: text로 그라데이션 텍스트 효과. 4. 카드: 반투명 그라데이션(rgba 255,255,255,0.1→0.02), hover 시 translateY(-5px) + 강한 그림자. 5. 전체 텍스트 흰색, 본문 opacity 0.9로 계층감 확보. [반응형] - 모바일: 히어로 패딩 축소(30px), 카드 1열 스택 - 데스크톱: max-width 1080px, 카드 auto-fit minmax(240px, 1fr) [금지사항] - 밝은 배경 사용 금지 - blur 없는 단순 투명 카드 금지 - 정적인 배경(오르브 움직임 없음) 금지 [출력] 1) 컬러 토큰(오르브 색상/패널/텍스트)과 그라데이션 시스템 2) Hero / Feature Cards / CTA 구조 3) 오르브 애니메이션 포함 HTML/CSS 코드
視覚的に圧倒される、カラフルで流動的なホログラフィック背景のランディングページを設計してください。 [スタイル条件] 1. 背景: ダークベース(#0b0f19)の上にピンク(#ff7eb3)/ブルー(#4facfe)/シアン(#00f2fe)の大きなradial-gradientオーブを配置。blur 80px以上、opacity 0.6、15s周期でscale/rotateアニメーション。 2. ヒーロー: backdrop-filter: blur(40px)、40pxラウンドコーナー、極薄ホワイトボーダー(rgba 255,255,255,0.1)、inset 0 1px 0 rgba(255,255,255,0.2)ハイライト。 3. タイポグラフィ: 細く繊細なフォント(Outfit 300/500/700)、タイトルはclamp(3rem,7vw,6rem)、background-clip: textでグラデーションテキスト効果。 4. カード: 半透明グラデーション(rgba 255,255,255,0.1→0.02)、hover時translateY(-5px) + 強いシャドウ。 5. 全テキスト白、本文opacity 0.9で階層感を確保。 [レスポンシブ] - モバイル: ヒーローパディング縮小(30px)、カード1列スタック - デスクトップ: max-width 1080px、カード auto-fit minmax(240px, 1fr) [禁止事項] - 明るい背景の使用禁止 - blurなしの単純な透明カード禁止 - 静的な背景(オーブの動きなし)禁止 [出力] 1) カラートークン(オーブ色/パネル/テキスト)とグラデーションシステム 2) Hero / Feature Cards / CTA構造 3) オーブアニメーションを含むHTML/CSSコード