A lightweight, modern CSS framework with glass morphism effects, fluid animations, and dark/light mode support.
Aurora uses a carefully designed color system that works beautifully in both dark and light modes.
Regular paragraph text looks like this. Aurora uses a clean, readable font stack and proper spacing for optimal reading experience across devices. The default font stack includes system fonts for better performance.
Secondary text styling adds visual hierarchy and is great for supporting content or less important information.
Accent text uses the primary accent color to highlight important information or calls to action within text content.
Basic card with hover effect. Great for presenting content in a clean, contained way.
Uses the secondary accent color for its accent line on hover.
Features a gradient using both accent colors for a more vibrant look.
The glass card features a beautiful blur effect that works well as a container for important content or as a highlight section.
Glass morphism is a modern design trend that gives the appearance of frosted glass, adding depth to your interfaces while maintaining readability.
Modals are useful for focused user interactions without leaving the current page.
Tooltips provide additional information in a non-intrusive way.
Elements animate as they enter the viewport. Scroll to see them in action.
This element fades in when scrolled into view.
This element slides up when scrolled into view.
This element slides in from the right.
This element slides in from the left.
Move your mouse over this section to see the parallax effect in action.
Aurora includes a smooth typing animation effect.
Aurora includes a responsive 12-column grid system.
Aurora provides utility classes for margin and padding.
Aurora provides utility classes for creating consistent vertical spacing between elements. These gap utilities help maintain visual rhythm and hierarchy in your layouts.
The gap above this element is:
Quickly style your text with Aurora's text utilities.
Left aligned text
Center aligned text
Right aligned text
Uppercase text
Bold text
Wide letter spacing
This is a simple modal dialog example using the Aurora CSS Framework.
Modals are great for getting user attention without navigating away from the current page.
Please fill out the form below to get in touch with us.
The framework is named after the Aurora Borealis (Northern Lights), inspired by its beautiful colors and fluid, dynamic nature.