Components : Gradient Auth Form

Preview content adapted to proportion

Gradient Auth Form

Form

Used for user login or registration pages where a modern and visually appealing interface is desired.

A stylish authentication form with gradient backgrounds, backdrop blur, and interactive validation feedback.

The form includes email and password inputs with real-time validation. The submit button shows loading animation on click. Validation icons appear when inputs are correct or incorrect.


The form is responsive with a maximum width of 4xl and adapts to different screen sizes using md padding adjustments. The layout shifts to a single column on smaller screens.

Date : June 18, 2025
Views : 12
Copys : 0

fa-tags

Website authentication User onboarding Secure access forms

Code

<div class="max-w-4xl mx-auto p-4 md:p-8 bg-gradient-to-br from-[#FF00FF]/20 to-[#00FF88]/30 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/10 hover:border-[#00FF88]/40 transition-all duration-300">
 <form class="grid grid-cols-1 gap-6 group">
  <div class="space-y-6 relative">
   <div class="animate-pulse absolute -inset-1 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] rounded-xl blur opacity-20">
   </div>
   <div class="peer">
    <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Email address" type="email"/>
    <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
     ⚠️ Invalid email format
    </div>
   </div>
   <div class="peer">
    <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Password" type="password"/>
    <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
     ⚠️ Minimum 8 characters
    </div>
   </div>
  </div>
  <button class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] hover:from-[#FF00FF]/90 hover:to-[#00FF88]/90 text-white/90 font-semibold rounded-lg hover:scale-105 transition-transform duration-200 space-x-2 shadow-lg shadow-[#FF00FF]/20">
   <span>
    🔐 Authenticate
   </span>
   <div class="w-5 h-5 border-2 border-white/50 rounded-full animate-spin opacity-0 group-active:opacity-100">
   </div>
  </button>
  <div class="mt-4 text-sm text-[#00FF88] animate-fade-in opacity-0 peer-valid:opacity-100 flex items-center space-x-2">
   <span>
    ✅ Validation passed
   </span>
   <div class="w-3 h-3 bg-[#00FF88] rounded-full animate-pulse">
   </div>
  </div>
  <div class="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-2xl opacity-0 pointer-events-none group-loading:opacity-100 transition-opacity">
   <div class="w-12 h-12 border-4 border-[#FF00FF] border-t-transparent rounded-full animate-spin">
   </div>
  </div>
 </form>
</div>


<template>
 <div class="max-w-4xl mx-auto p-4 md:p-8 bg-gradient-to-br from-[#FF00FF]/20 to-[#00FF88]/30 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/10 hover:border-[#00FF88]/40 transition-all duration-300">
  <form class="grid grid-cols-1 gap-6 group">
   <div class="space-y-6 relative">
    <div class="animate-pulse absolute -inset-1 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] rounded-xl blur opacity-20">
    </div>
    <div class="peer">
     <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Email address" type="email"/>
     <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
      ⚠️ Invalid email format
     </div>
    </div>
    <div class="peer">
     <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Password" type="password"/>
     <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
      ⚠️ Minimum 8 characters
     </div>
    </div>
   </div>
   <button class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] hover:from-[#FF00FF]/90 hover:to-[#00FF88]/90 text-white/90 font-semibold rounded-lg hover:scale-105 transition-transform duration-200 space-x-2 shadow-lg shadow-[#FF00FF]/20">
    <span>
     🔐 Authenticate
    </span>
    <div class="w-5 h-5 border-2 border-white/50 rounded-full animate-spin opacity-0 group-active:opacity-100">
    </div>
   </button>
   <div class="mt-4 text-sm text-[#00FF88] animate-fade-in opacity-0 peer-valid:opacity-100 flex items-center space-x-2">
    <span>
     ✅ Validation passed
    </span>
    <div class="w-3 h-3 bg-[#00FF88] rounded-full animate-pulse">
    </div>
   </div>
   <div class="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-2xl opacity-0 pointer-events-none group-loading:opacity-100 transition-opacity">
    <div class="w-12 h-12 border-4 border-[#FF00FF] border-t-transparent rounded-full animate-spin">
    </div>
   </div>
  </form>
 </div>
</template>
<script>
 export default {
    name: 'MyFormComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFormComponent = () => {
    return (
<div>
<div class="max-w-4xl mx-auto p-4 md:p-8 bg-gradient-to-br from-[#FF00FF]/20 to-[#00FF88]/30 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/10 hover:border-[#00FF88]/40 transition-all duration-300">
 <form class="grid grid-cols-1 gap-6 group">
  <div class="space-y-6 relative">
   <div class="animate-pulse absolute -inset-1 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] rounded-xl blur opacity-20">
   </div>
   <div class="peer">
    <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Email address" type="email"/>
    <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
     ⚠️ Invalid email format
    </div>
   </div>
   <div class="peer">
    <input class="w-full px-5 py-3 bg-black/30 backdrop-blur-sm rounded-lg border-2 border-white/20 focus:border-[#00FF88] focus:ring-4 focus:ring-[#00FF88]/30 placeholder:text-gray-400 text-[#00FF88] transition-all outline-none" placeholder="Password" type="password"/>
    <div class="motion-safe:mt-2 animate-bounce duration-150 text-sm text-[#FF006A] opacity-0 peer-invalid:opacity-100">
     ⚠️ Minimum 8 characters
    </div>
   </div>
  </div>
  <button class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-[#FF00FF] to-[#00FF88] hover:from-[#FF00FF]/90 hover:to-[#00FF88]/90 text-white/90 font-semibold rounded-lg hover:scale-105 transition-transform duration-200 space-x-2 shadow-lg shadow-[#FF00FF]/20">
   <span>
    🔐 Authenticate
   </span>
   <div class="w-5 h-5 border-2 border-white/50 rounded-full animate-spin opacity-0 group-active:opacity-100">
   </div>
  </button>
  <div class="mt-4 text-sm text-[#00FF88] animate-fade-in opacity-0 peer-valid:opacity-100 flex items-center space-x-2">
   <span>
    ✅ Validation passed
   </span>
   <div class="w-3 h-3 bg-[#00FF88] rounded-full animate-pulse">
   </div>
  </div>
  <div class="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-2xl opacity-0 pointer-events-none group-loading:opacity-100 transition-opacity">
   <div class="w-12 h-12 border-4 border-[#FF00FF] border-t-transparent rounded-full animate-spin">
   </div>
  </div>
 </form>
</div>

</div>
    )
}
export default MyFormComponent;

Recommended Related Components

More+

Responsive User Registration Form

The form is used for user sign-up or registration processes on websites and applications, allowing users to input their details securely.

44
0

User Registration Form

It is designed to be used in user registration, account creation, or any scenario where user data collection is required.

38
0

Gradient Auth Form

Used for user login or registration pages where a modern and visually appealing interface is desired.

12
0