Bubble.io Mini Course - [PART 2] Stripe Style Login
🎨 Want cleaner UI and better design in Bubble?
Bubble Design Lab gives you access to real projects, design walkthroughs, and direct feedback from Nick. Join now for just $39/month:
👉 https://www.skool.com/bubble-io/about
Build a Stripe-Style Login Page in Bubble – Part 2
In this tutorial, we’ll recreate a clean, modern login experience inspired by Stripe using Bubble.io. You'll learn how to structure your page, apply a gradient background with custom CSS, and build the foundational layout for inputs, labels, and visual polish.
Learn how to:
Set up a clean page layout with responsive settings
Add a custom animated gradient using a floating group + CSS
Structure login input fields with Bubble’s layout engine
Create grouped elements for "remember me" functionality
CSS code: https://docs.google.com/document/d/14...
Key moments:
00:00 – Starting the Stripe-style login page build
00:08 – Creating a new web page in Bubble
00:38 – Page layout setup (column layout, 1200px width, 800px height)
01:12 – Creating the main working group for page content
01:53 – Setting up the floating group gradient background
02:36 – Adding HTML element for gradient styling
03:14 – Pasting the custom CSS gradient code
04:06 – Explaining ID attribute and enabling it in settings
04:50 – Assigning the ID to the floating group
05:06 – Previewing the animated diagonal gradient background
06:03 – Adjusting floating group height for visual impact
06:52 – Starting login elements: creating the login form container
07:42 – Styling the login group (fixed width, padding, alignment)
08:13 – Laying out the login form structure: heading, inputs, and buttons
09:40 – Styling text for “Access your account” and input labels
11:00 – Creating “email,” “password,” and “remember me” text rows
12:00 – Adding and styling input fields for email and password
13:23 – Grouping email/password fields for clean layout
14:14 – Adding and styling the “remember me” checkbox and text
15:30 – Grouping icon and text for aligned checkbox UI
16:40 – Wrapping up the first stage of the login page build