About This Style
Aurora UI is an interface design style inspired by the natural phenomenon of the aurora borealis. It creates an ethereal, dreamy, and light-filled visual effect by using large, soft, highly blurred colorful glows (often dominated by blue-green tones) in the background.
This style is often combined with dark mode to better highlight the flowing color glows in the background and is frequently accompanied by smooth animation effects to enhance its dynamism.
Main Features:
- Blurred Background Shapes: Uses CSS's `filter: blur()` property to highly blur absolutely or fixed positioned colored gradient elements, forming soft light spots.
- Blue-Green Focused Gradients: Background glows primarily use vibrant greens, teals, blues, and can be accented with small amounts of purple or pink to simulate aurora color variations.
- Dark Background: A dark or near-black base background better accentuates the brightness and saturation of the aurora colors.
- Depth and Layering: Blurred background glows are positioned beneath the content layer, creating a distinct sense of spatial depth.
- Flowing Animations: Optional smooth animations (like slow movement, rotation, or color changes of light spots) can enhance the dynamic feel of the aurora.
- Clean Foreground: Foreground content (text, icons, buttons, cards) is usually kept simple and clean, using clear fonts and sufficient contrast to ensure information is clearly conveyed against the dynamic background. Elements like cards might use semi-transparent dark backgrounds or gradients.
Aurora UI is suitable for websites and applications that need to create a sense of technology, futurism, tranquility, or a dreamlike atmosphere, such as SaaS platforms, data visualization, and creative portfolios.
Example AI Prompt
Design a web application interface with an Aurora UI style. Use a very dark background (e.g., #0d1117). Create large, intensely blurred (e.g., filter: blur(140px)) background gradient shapes (opacity: 0.7) primarily using aurora-like colors: vibrant green (e.g., #34d399), teal (e.g., #2dd4bf), deep blue (e.g., #3b82f6), and a touch of violet (e.g., #8b5cf6). Position these shapes dynamically, partially overlapping and extending off-screen. Apply a subtle, slow, and wide-ranging animation to simulate aurora movement. Foreground cards should use a semi-transparent blue-green gradient background (e.g., linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(59, 130, 246, 0.85))) to ensure text readability. Use 'Inter' font. Buttons should use a saturated teal (e.g., #14b8a6) with white text.(Explanation: Design a web application interface with an Aurora UI style. Use a very dark background (e.g., #0d1117). Create large, intensely blurred (e.g., filter: blur(140px)), 0.7 opacity background gradient shapes, primarily using aurora-like colors: vibrant green (e.g., #34d399), teal (e.g., #2dd4bf), deep blue (e.g., #3b82f6), and a touch of violet (e.g., #8b5cf6). Dynamically position these shapes, partially overlapping and extending off-screen. Apply subtle, slow, and wide-ranging animation to simulate aurora movement. Foreground cards should use a semi-transparent blue-green gradient background (e.g., linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(59, 130, 246, 0.85))) to ensure text readability. Use 'Inter' font. Buttons should use a saturated teal (e.g., #14b8a6) with white text.)
Theme CSS Snippets
The following is the core CSS code (body.theme-aurora-ui) to apply this Aurora UI style (blue-green tones, dynamic effects, higher saturation) as a global theme. It creates blurred background glow effects using pseudo-elements and includes animations:
/* ==========================================================================
14. Aurora UI Theme (Blue-Green Focus, Dynamic - Enhanced Readability)
========================================================================== */
body.theme-aurora-ui {
/* Base Colors & Typography */
--page-bg: #0d1117;
--text-color: #d0d8f0; /* General page text */
--heading-color: #e8f0ff; /* General page headings */
--link-color: #14b8a6;
--link-hover-color: #0d9488;
--border-color: rgba(255, 255, 255, 0.2);
/* Card & Section Styles - Enhanced Readability */
--card-bg: rgba(23, 37, 59, 0.92); /* Darker, highly opaque for content areas */
--card-text-color: #e0e7ff;
--card-heading-color: #f0f5ff;
--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
--card-hover-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
--card-border-radius: 14px;
/* Header & Footer Styles */
--header-bg: rgba(13, 17, 23, 0.88);
--header-text-color: var(--heading-color);
--footer-bg: rgba(13, 17, 23, 0.88);
--footer-text-color: #a1a1aa;
/* Button Styles */
--button-bg: var(--link-color);
--button-text-color: #ffffff;
/* ... (Other button variables) ... */
/* Prompt Area & Code Block Styles */
--prompt-bg: rgba(0, 0, 0, 0.45);
--prompt-text-color: var(--card-text-color);
/* Aurora Specific Colors (Background Glows) */
--aurora-color-1: #34d399; /* Vibrant Green */
--aurora-color-2: #2dd4bf; /* Teal */
--aurora-color-3: #3b82f6; /* Deep Blue */
--aurora-color-4: #8b5cf6; /* Violet */
position: relative; overflow-x: hidden;
background-color: var(--page-bg);
color: var(--text-color);
font-family: var(--base-font);
}
/* Aurora Effect Background Shapes */
body.theme-aurora-ui::before,
body.theme-aurora-ui::after {
content: ""; position: fixed; z-index: -1;
filter: blur(140px); opacity: 0.65; /* Adjusted opacity */
/* ... (Other pseudo-element styles) ... */
}
/* ... (Animations and other related rules like text shadows can be added or noted as applied externally here) ... */
/*
Note: Specific text colors for content within cards/sections
(var(--card-text-color), var(--card-heading-color)) and
text-shadows for headings are applied via additional CSS rules
when this theme is active to ensure readability.
*/
Note: The effectiveness of Aurora UI largely depends on fine-tuning blurriness, color choices, transparency, shape size, and positioning. Animation is optional but can enhance dynamism. Be mindful that this effect can be performance-intensive.
Resource Download (Example)
Download a zip package containing a more complete CSS definition for this style.
Download aurora-ui.zip