card

Glassmorphic Settings Card

A compact glass-effect settings panel for a dashboard

ui glassmorphism settings | GPT 5.3 Ultra

Prompt

# Role
You are a Senior Frontend Developer and CSS Specialist with deep expertise in modern visual effects, glassmorphism design patterns, and micro-interactions.

# Objective
Design a compact, glassmorphic settings card for a dashboard interface featuring toggle switches, system labels, and a polished translucent aesthetic.

# Instructions
1. Create a settings card container with glassmorphic styling:
   - `backdrop-filter: blur(12px)` for the frosted glass effect
   - Semi-transparent background: `rgba(255, 255, 255, 0.05)` or similar
   - Border: `1px solid rgba(255, 255, 255, 0.1)`
   - Subtle radial gradient overlay for depth
   - Rounded corners (`border-radius: 16px`) and soft shadow
2. Add a card header:
   - Title: "Settings" in JetBrains Mono or monospace fallback
   - Optional subtitle or description in muted text
3. Include 3–4 settings rows, each containing:
   - A system label (e.g., "Dark Mode", "Notifications", "Auto-Save")
   - A toggle switch on the right side of each row
   - Subtle separator line between rows
4. Build custom toggle switches:
   - Pill-shaped track with circle thumb
   - Smooth sliding transition (200ms ease)
   - Active state: accent color track with white thumb
   - Inactive state: muted gray track
5. Position the card on a dark gradient background to showcase the glass effect

# Constraints
- Use raw CSS — no Tailwind or CSS frameworks (produces best results for glassmorphism)
- Use `font-family: 'JetBrains Mono', monospace` for labels
- Keep interactive elements to 3–4 max for clean spacing
- Ensure the card works without JavaScript for toggle appearance (use CSS `:checked` on hidden checkboxes)
- Card max-width: 360px, centered on the page

# Output Format
- Single HTML file with embedded `<style>` block
- Pure CSS toggles using `<input type="checkbox">` + `<label>` technique
- Include a dark gradient body background to demonstrate the glass effect
- Clean, well-commented CSS with clear variable definitions

Notes

Prompt

Role

You are a Senior Frontend Developer and CSS Specialist with deep expertise in modern visual effects, glassmorphism design patterns, and micro-interactions.

Objective

Design a compact, glassmorphic settings card for a dashboard interface featuring toggle switches, system labels, and a polished translucent aesthetic.

Instructions

Create a settings card container with glassmorphic styling:
- backdrop-filter: blur(12px) for the frosted glass effect
- Semi-transparent background: rgba(255, 255, 255, 0.05) or similar
- Border: 1px solid rgba(255, 255, 255, 0.1)
- Subtle radial gradient overlay for depth
- Rounded corners (border-radius: 16px) and soft shadow
Add a card header:
- Title: “Settings” in JetBrains Mono or monospace fallback
- Optional subtitle or description in muted text
Include 3–4 settings rows, each containing:
- A system label (e.g., “Dark Mode”, “Notifications”, “Auto-Save”)
- A toggle switch on the right side of each row
- Subtle separator line between rows
Build custom toggle switches:
- Pill-shaped track with circle thumb
- Smooth sliding transition (200ms ease)
- Active state: accent color track with white thumb
- Inactive state: muted gray track
Position the card on a dark gradient background to showcase the glass effect

Constraints

Use raw CSS — no Tailwind or CSS frameworks (produces best results for glassmorphism)
Use font-family: 'JetBrains Mono', monospace for labels
Keep interactive elements to 3–4 max for clean spacing
Ensure the card works without JavaScript for toggle appearance (use CSS :checked on hidden checkboxes)
Card max-width: 360px, centered on the page

Output Format

Single HTML file with embedded <style> block
Pure CSS toggles using <input type="checkbox"> + <label> technique
Include a dark gradient body background to demonstrate the glass effect
Clean, well-commented CSS with clear variable definitions

Notes

This prompt produces best results with raw CSS rather than utility frameworks.
Keep the number of interactive elements under 4 to maintain clean spacing.
The glassmorphic effect is most visible against a colorful or gradient background.

Related Prompts

User Profile Card

Profile card with avatar, stats, and follow button.

# Role You are a Senior Frontend Developer and CSS Specialist with expertise in social UI components and card-based layouts. # Objective Build a polished user profile card featuring an avatar, user information, social stats, and a follow/connect button — styled for dark mode with a modern, social-media-inspired design. # Instructions 1. Create a card container with: - Dark background, rounded corners, and subtle border - Optional: cover image or gradient banner at the top (120px height) 2. Add the user profile section: - Circular avatar (80px) overlapping the banner/top edge - User display name (bold, large) - Username or handle in muted text (e.g., "@username") - Short bio/description (1–2 lines, muted) 3. Add a stats row with 3 metrics: - Posts count, Followers count, Following count - Each with a number (bold) and label (muted, small) - Separated by subtle vertical dividers 4. Add action buttons: - Primary "Follow" button (accent color, filled) - Secondary "Message" button (outline style) - Buttons side by side, full-width within card 5. Style with Tailwind CSS in dark mode: - Avatar with white ring border for contrast - Hover effects on buttons - Consistent padding and spacing # Constraints - Semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on action buttons - Card max-width: 350px, centered - Responsive: card should look good at any width down to 280px - Use placeholder data that feels realistic (not "John Doe") # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic placeholder profile data - Well-structured markup with brief comments

profile social user

Claude 4.6 Opus

Elegant Login Modal

A slick, centered login modal with social auth.

# Role You are a Senior Security Architect and Full-Stack Engineer specializing in authentication interfaces, secure form design, and polished user experience. # Objective Build an elegant, accessible login modal with email/password authentication, social login options, and a polished dark-mode design suitable for SaaS applications. # Instructions 1. Create a centered modal overlay: - Backdrop with blur effect and dark overlay - Modal card with rounded corners, subtle border, and shadow - Smooth entrance animation (fade + scale) 2. Build the login form: - Email input with icon prefix and validation - Password input with icon prefix and show/hide toggle - "Remember me" checkbox - "Forgot password?" link aligned right - Submit button: full-width, accent color, hover effect 3. Add social authentication options: - Divider with "or continue with" text - Social login buttons: Google, GitHub, Apple (icon + label) - Styled as outline buttons with hover fill effect 4. Include a sign-up prompt: - "Don't have an account? Sign up" text below the form - "Sign up" as an accent-colored link 5. Implement interaction details: - Close button (×) in top-right corner - Close on Escape key or backdrop click - Focus trap within the modal - Auto-focus on email input when modal opens # Constraints - Use Tailwind CSS for all styling — no custom CSS - Semantic HTML with proper `<form>`, `<label>`, and ARIA attributes - Do not include actual authentication logic — UI only - Must be fully keyboard-navigable (Tab, Escape, Enter) - Modal max-width: 420px, centered on all screen sizes - Dark mode only # Output Format - Single HTML file using Tailwind CSS CDN - Include a trigger button to open the modal for demonstration - Well-structured, accessible markup with inline comments - Use placeholder content ready for real integration

modal auth ui

Claude 4.6 Opus