What is glassmorphism?
A frosted‑glass UI effect achieved with backdrop‑filter: blur() and a semi‑transparent background. Use the sliders to adjust blur, opacity, shadow, and border radius. Export to CSS, Tailwind, or React JSX.
How do I create neumorphism?
Neumorphism (soft UI) uses dual box‑shadows to create convex, concave, or pressed effects. Pick a background color and adjust the shadow distance and intensity. Works great for buttons, cards, and forms.
Can I generate custom keyframes?
Yes! The Keyframes mode lets you define animation steps (fade, slide, scale, rotate) with a visual easing curve editor. Preview the animation live and export the full @keyframes rule.
How does the easing editor work?
Drag the two control handles on the cubic‑bezier canvas to shape your acceleration curve. The tool outputs the exact cubic‑bezier() function. Choose from presets like ease, ease‑in, ease‑out, or create custom curves.
Is the contrast checker accurate?
Yes, it computes the WCAG 2.1 contrast ratio between your text and background colors in real time. It displays AA and AAA compliance for normal and large text, helping you ensure readability.
Does the color blindness simulator work?
It uses Brettel‑Viénot LMS color matrix filters to simulate protanopia (red‑blind), deuteranopia (green‑blind), and tritanopia (blue‑blind). Toggle these on the live preview.
Can I export a React component?
Yes, the React tab generates a complete functional component with customizable props for your glass/neumorph styles, including the animation class and TypeScript‑ready PropTypes.
What's in the Gallery?
The Gallery contains curated presets: frosted cards, neumorphic buttons, glowing text, skeleton loaders, glass navbars, and more. Click any preset to load it instantly, then customize it with sliders.
Is the tool free to use?
Completely free. No registration, no ads, no limits. All effects you design are yours to use in personal or commercial projects without attribution.
How does URL sharing work?
Click "Share URL" to encode your entire configuration (mode, sliders, colors, animation) into the link. Send it to a teammate and they'll see exactly the same effect in their browser.