Floating Card With Gradient

A hero with a floating form card resting over a soft gradient backdrop. Highlights a signup field and pulls the eye to one clear action.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Mail } from 'lucide-react';
import { GithubIcon } from '@/components/ui/brand-icons';
import { Twitter } from '@/components/ui/brand-icons';

export default function HeroFormFloatingCardWithGradient() {
  return (
    <>
      {/* Hero */}
      <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
        {/* Gradient Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-purple-500/20 to-pink-500/20 dark:from-indigo-950 dark:via-purple-950 dark:to-pink-950">
          <div className="absolute inset-0 bg-[url(/noise.png)] opacity-20 mix-blend-soft-light"></div>
          <div className="absolute h-full w-full bg-[radial-gradient(circle_800px_at_100%_200px,rgba(120,119,198,0.3),transparent)]"></div>
        </div>

        {/* Background Shapes */}
        <div className="absolute top-1/4 -left-16 h-64 w-64 rounded-full bg-purple-400/30 blur-3xl dark:bg-purple-900/20"></div>
        <div className="absolute -right-16 bottom-1/4 h-64 w-64 rounded-full bg-indigo-400/30 blur-3xl dark:bg-indigo-900/20"></div>

        <div className="relative z-10 container mx-auto px-4 py-16 md:px-6 2xl:max-w-[1400px]">
          <div className="mx-auto max-w-md">
            {/* Card */}
            <div className="bg-background/80 border-border/50 rounded-xl border p-6 shadow-xl backdrop-blur-xl md:p-8">
              <div className="mb-8 text-center">
                <h1 className="text-3xl font-bold">Welcome Back</h1>
                <p className="text-muted-foreground mt-2">
                  Sign in to continue to the platform
                </p>
              </div>

              <Tabs defaultValue="email" className="w-full">
                <TabsList className="mb-6 grid w-full grid-cols-2">
                  <TabsTrigger value="email">Email</TabsTrigger>
                  <TabsTrigger value="phone">Phone</TabsTrigger>
                </TabsList>

                <TabsContent value="email" className="space-y-4">
                  <div>
                    <Label htmlFor="email" className="mb-2">
                      Email address
                    </Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="name@example.com"
                    />
                  </div>
                  <div>
                    <div className="mb-2 flex items-center justify-between">
                      <Label htmlFor="password" className="mb-2">
                        Password
                      </Label>
                      <a
                        href="#"
                        className="text-primary text-xs hover:underline"
                      >
                        Forgot password?
                      </a>
                    </div>
                    <Input
                      id="password"
                      type="password"
                      placeholder="••••••••"
                    />
                  </div>
                  <Button className="w-full">Sign in with Email</Button>
                </TabsContent>

                <TabsContent value="phone" className="space-y-4">
                  <div>
                    <Label htmlFor="phone" className="mb-2">
                      Phone number
                    </Label>
                    <Input id="phone" placeholder="+1 (555) 000-0000" />
                  </div>
                  <Button className="w-full">Send verification code</Button>
                </TabsContent>
              </Tabs>

              <div className="relative my-6">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t"></div>
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background text-muted-foreground px-2">
                    Or continue with
                  </span>
                </div>
              </div>

              <div className="grid grid-cols-3 justify-items-center gap-3">
                <Button variant="outline" size="icon">
                  <Mail className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon">
                  <Twitter className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon">
                  <GithubIcon className="h-4 w-4" />
                </Button>
              </div>

              <p className="text-muted-foreground mt-6 text-center text-sm">
                Don&apos;t have an account?{' '}
                <a href="#" className="text-primary hover:underline">
                  Sign up
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* End Hero */}
    </>
  );
}

About this block

Floating Card With Gradient fills the full viewport with a soft color wash that blends indigo, purple, and pink tones, with two blurred circular shapes anchored in opposite corners to add depth. Centered on that backdrop sits a single frosted card. Inside the card, a "Welcome Back" heading and a short line of subtext sit above a two-tab switcher. The Email tab shows an email field, a password field with a "Forgot password?" link, and a full-width sign-in button. The Phone tab replaces those with a phone number field and a button that sends a verification code. Below the tabs a divider labeled "Or continue with" leads to a row of three outline icon buttons for email, Twitter, and GitHub. A short "Don't have an account? Sign up" line closes the card.

The heading copy, subtext, field labels, placeholder text, and the social login row are all straightforward to swap or trim. If your product uses only one sign-in method, remove the tab switcher and keep whichever tab content fits. The social buttons can be reduced to one or two without changing the card's proportions.

When to use

Reach for this block at the very top of a sign-in or account access page where you want the authentication form to be the undeniable focal point. For a healthcare scheduling product it works especially well on a patient portal login, where a calm, full-screen presentation signals trust before the visitor types a single character. It is a stronger choice than a plain split-screen layout when there is no compelling product image to show alongside the form, and a stronger choice than a minimal inline form when the page exists solely for authentication rather than as a secondary panel on a marketing page.

A natural flow around it on a Marketing (Legacy) page:

Before

An Announcement Banner to surface a brief status notice or scheduled maintenance alert above the sign-in view
A short hero from Hero Sections on a separate landing page that links visitors to this sign-in page

After

A CTA Section lower on the page to invite visitors who do not yet have an account to create one
A Newsletter Subscription block if you want a lightweight opt-in option for visitors who are not ready to sign up

What you can customize

The card is self-contained, so most changes are confined to the fields and labels inside it. A few common directions:

Sign-in methods. Add or remove tabs to match your supported auth flows, whether that is magic link, passkey, or SSO, by editing the tab labels and their content panels.
Social provider row. Swap in the icon buttons for whichever OAuth providers you support, or remove the divider and the row entirely if you rely solely on credentials.
Background mood. The gradient and blurred circles are all in the outermost wrapper, separate from the card, so you can shift the color stops or remove the shapes without touching the form logic.

Tip: keep the card to its current single-column width on mobile so the frosted glass effect reads clearly against the gradient at every screen size.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

An Announcement Banner to surface a brief status notice or scheduled maintenance alert above the sign-in view
A short hero from Hero Sections on a separate landing page that links visitors to this sign-in page

After

A CTA Section lower on the page to invite visitors who do not yet have an account to create one
A Newsletter Subscription block if you want a lightweight opt-in option for visitors who are not ready to sign up

What you can customize

The card is self-contained, so most changes are confined to the fields and labels inside it. A few common directions:

Sign-in methods. Add or remove tabs to match your supported auth flows, whether that is magic link, passkey, or SSO, by editing the tab labels and their content panels.
Social provider row. Swap in the icon buttons for whichever OAuth providers you support, or remove the divider and the row entirely if you rely solely on credentials.
Background mood. The gradient and blurred circles are all in the outermost wrapper, separate from the card, so you can shift the color stops or remove the shapes without touching the form logic.

Tip: keep the card to its current single-column width on mobile so the frosted glass effect reads clearly against the gradient at every screen size.

Floating Card With Gradient

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize