FORMS

Circular Gradient Login Form

A circular dark login form with gradient accents, password visibility control, social login buttons and responsive styling.

Login

Please sign in to continue

or continue with

HTML

<div class="cr-orbit-login">

  <div class="cr-orbit-panel">

    <div class="cr-orbit-head">
      <h2>Login</h2>
      <p>Please sign in to continue</p>
    </div>

    <form class="cr-orbit-form">

      <label class="cr-orbit-field">

        <span class="cr-orbit-field-icon">
          <svg viewBox="0 0 24 24">
            <circle cx="12" cy="8" r="3"></circle>
            <path d="M5 19c1.4-4 4-6 7-6s5.6 2 7 6"></path>
          </svg>
        </span>

        <input
          type="text"
          placeholder="Username"
          autocomplete="username">

      </label>


      <label class="cr-orbit-field">

        <span class="cr-orbit-field-icon">
          <svg viewBox="0 0 24 24">
            <rect x="5" y="10" width="14" height="10" rx="2"></rect>
            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>
          </svg>
        </span>

        <input
          type="password"
          placeholder="Password"
          autocomplete="current-password">

        <button
          class="cr-orbit-password-toggle"
          type="button"
          aria-label="Show password">

          <svg viewBox="0 0 24 24">
            <path d="M2 12s3.5-5 10-5 10 5 10 5-3.5 5-10 5S2 12 2 12Z"></path>
            <circle cx="12" cy="12" r="2.5"></circle>
          </svg>

        </button>

      </label>


      <div class="cr-orbit-options">

        <label class="cr-orbit-check">
          <input type="checkbox">
          <span>Remember me</span>
        </label>

        <a href="#">Forgot password?</a>

      </div>


      <button class="cr-orbit-submit" type="submit">
        <span>Login</span>
        <span class="cr-orbit-arrow">→</span>
      </button>

    </form>


    <div class="cr-orbit-divider">
      <span>or continue with</span>
    </div>


    <div class="cr-orbit-socials">

      <button type="button">G</button>
      <button type="button">f</button>
      <button type="button"></button>

    </div>


    <p class="cr-orbit-signup">
      Don’t have an account?
      <a href="#">Sign up</a>
    </p>

  </div>

</div>

CSS

.cr-orbit-login{
  width:100%;
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:#0b1220;
}

.cr-orbit-panel{
  position:relative;
  width:560px;
  height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:70px 75px;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(168,85,247,.15),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #111827,
      #080d18
    );

  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 0 45px rgba(168,85,247,.07);

  color:#ffffff;
}

.cr-orbit-panel::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #22d3ee,
      #a855f7 42%,
      #ec4899 68%,
      #f97316
    );

  box-shadow:
    0 0 30px rgba(168,85,247,.22);
}

.cr-orbit-panel::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  pointer-events:none;
}

.cr-orbit-head{
  position:relative;
  z-index:2;
  width:100%;
  margin-bottom:24px;
  text-align:center;
}

.cr-orbit-head h2{
  margin:0 0 5px;
  color:#ffffff;
  font-size:34px;
  line-height:1.1;
  font-weight:800;
}

.cr-orbit-head p{
  margin:0;
  color:#7f8da5;
  font-size:12px;
}

.cr-orbit-form{
  position:relative;
  z-index:2;
  width:100%;
}

.cr-orbit-field{
  position:relative;
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  margin-bottom:13px;
  border:1px solid #263750;
  border-radius:24px;
  background:rgba(8,15,28,.72);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.cr-orbit-field:focus-within{
  border-color:#a855f7;
  background:#0b1423;

  box-shadow:
    0 0 0 3px rgba(168,85,247,.08),
    0 0 18px rgba(168,85,247,.12);
}

.cr-orbit-field-icon{
  width:46px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.cr-orbit-field-icon svg,
.cr-orbit-password-toggle svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:#718096;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cr-orbit-field input{
  width:100%;
  min-width:0;
  padding:0 10px 0 0;
  border:0;
  outline:0;
  background:transparent;
  color:#ffffff;
  font-size:13px;
  font-family:inherit;
}

.cr-orbit-field input::placeholder{
  color:#65748b;
}

.cr-orbit-password-toggle{
  width:42px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.cr-orbit-password-toggle:hover svg{
  stroke:#22d3ee;
}

.cr-orbit-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:2px 6px 17px;
  font-size:11px;
}

.cr-orbit-check{
  display:flex;
  align-items:center;
  gap:7px;
  color:#7f8da5;
  cursor:pointer;
}

.cr-orbit-check input{
  width:13px;
  height:13px;
  margin:0;
  accent-color:#a855f7;
}

.cr-orbit-options a{
  color:#a855f7;
  text-decoration:none;
}

.cr-orbit-submit{
  position:relative;
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:0;
  border-radius:24px;

  background:
    linear-gradient(
      90deg,
      #ec4899 0%,
      #a855f7 52%,
      #2563eb 100%
    );

  color:#ffffff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;

  box-shadow:
    0 8px 25px rgba(168,85,247,.22);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.cr-orbit-submit:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 30px rgba(168,85,247,.35);
}

.cr-orbit-submit:active{
  transform:translateY(1px) scale(.985);

  box-shadow:
    0 3px 10px rgba(168,85,247,.18),
    inset 0 3px 8px rgba(0,0,0,.28),
    inset 0 -1px 2px rgba(255,255,255,.12);
}

.cr-orbit-arrow{
  position:absolute;
  right:20px;
  font-size:19px;
  transition:transform .25s ease;
}

.cr-orbit-submit:hover .cr-orbit-arrow{
  transform:translateX(4px);
}

.cr-orbit-submit:active .cr-orbit-arrow{
  transform:translateX(6px) scale(.95);
}

.cr-orbit-divider{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  margin:17px 0 12px;
  color:#5f6d82;
  font-size:10px;
  text-align:center;
}

.cr-orbit-divider::before,
.cr-orbit-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.08);
}

.cr-orbit-divider span{
  padding:0 12px;
}

.cr-orbit-socials{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:10px;
}

.cr-orbit-socials button{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #263750;
  border-radius:12px;
  background:#111a2a;
  color:#b8c2d2;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.cr-orbit-signup{
  position:relative;
  z-index:2;
  margin:14px 0 0;
  color:#65748b;
  font-size:10px;
  text-align:center;
}

.cr-orbit-signup a{
  color:#ec4899;
  font-weight:700;
  text-decoration:none;
}

@media(max-width:620px){

  .cr-orbit-login{
    min-height:500px;
    padding:20px 10px;
  }

  .cr-orbit-panel{
    width:430px;
    height:430px;
    max-width:100%;
    padding:48px 52px;
  }

  .cr-orbit-head{
    margin-bottom:16px;
  }

  .cr-orbit-head h2{
    font-size:27px;
  }

  .cr-orbit-field{
    height:42px;
    margin-bottom:9px;
  }

  .cr-orbit-submit{
    height:42px;
  }

}

JavaScript

const orbitLogin = document.querySelector('.cr-orbit-login');

if (orbitLogin) {

  const passwordInput = orbitLogin.querySelector(
    'input[type="password"]'
  );

  const toggleButton = orbitLogin.querySelector(
    '.cr-orbit-password-toggle'
  );

  const form = orbitLogin.querySelector(
    '.cr-orbit-form'
  );

  if (passwordInput && toggleButton) {

    toggleButton.addEventListener('click', function () {

      const isHidden =
        passwordInput.type === 'password';

      passwordInput.type =
        isHidden ? 'text' : 'password';

      toggleButton.setAttribute(
        'aria-label',
        isHidden ? 'Hide password' : 'Show password'
      );

    });

  }

  if (form) {

    form.addEventListener('submit', function (event) {

      event.preventDefault();

      const button =
        form.querySelector('.cr-orbit-submit');

      if (!button) return;

      const originalHTML =
        button.innerHTML;

      button.innerHTML =
        '<span>Welcome ✓</span>';

      setTimeout(function () {
        button.innerHTML = originalHTML;
      }, 1600);

    });

  }

}

How This Circular Gradient Login Form Works

The Circular Gradient Login Form places a complete sign-in interface inside a large circular panel. The outer .cr-orbit-login wrapper centers the component against a dark #0b1220 background, while .cr-orbit-panel creates the main 560 × 560px circle. Its border-radius: 50% is what turns the square panel dimensions into the circular layout.

The panel uses two background layers. A radial gradient adds a subtle purple highlight around the upper-middle area, while a dark 145deg linear gradient runs from #111827 to #080d18. The outer gradient ring is created separately with the .cr-orbit-panel::before pseudo-element. It sits 5px outside the panel and combines cyan, purple, pink, and orange through #22d3ee, #a855f7, #ec4899, and #f97316.

A second ::after pseudo-element adds a thin inner circular border. This separation means the gradient edge, dark panel surface, and subtle inner outline can be styled independently without adding extra HTML elements.

The form contains username and password fields with inline SVG icons. Each .cr-orbit-field is 48px high with a 24px radius, creating pill-shaped inputs. When an input receives focus, the parent’s :focus-within state changes the border to #a855f7, darkens the background, and adds a soft purple focus ring and glow.

The password field also contains an eye button. JavaScript finds the password input and .cr-orbit-password-toggle, then listens for clicks. If the input currently has type="password", it changes the type to text; clicking again restores password. The button’s aria-label also changes between “Show password” and “Hide password” to match the current state.

Below the fields, the component includes a Remember me checkbox and Forgot password link. The checkbox uses accent-color: #a855f7, keeping the native checkbox control while matching it to the surrounding design.

The Login button uses a horizontal gradient from pink through purple to blue. On hover, it moves upward by 2px and its arrow shifts 4px to the right. Its active state moves the button down slightly, scales it to .985, and changes the shadows to create pressed feedback.

JavaScript also intercepts the form’s submit event with event.preventDefault(). Instead of performing a real login, the button temporarily displays “Welcome ✓” for 1600 milliseconds before restoring its original content. For more information about stopping a form’s default submission behavior, see the MDN preventDefault documentation.

The Google, Facebook, and Apple-style buttons at the bottom are visual buttons in the current component. No JavaScript handlers or authentication integrations are attached to them.

Customizing the Circular Gradient Login Form

The existing CSS exposes several useful dimensions, colors, gradients, and transition values that can be changed to fit a different interface.

Change the panel’s 560px width and height while keeping border-radius: 50% to resize the circular form.
Edit #22d3ee, #a855f7, #ec4899, and #f97316 in the ::before gradient to customize the outer ring.
Change the panel’s #111827 and #080d18 colors to adjust its dark background.
Modify the 48px field height and 24px border radius to change the input proportions.
Edit the Login button’s pink, purple, and blue gradient values to create a different action color scheme.
Change the .25s hover and active transitions to make the button feedback faster or slower.
Adjust the 1600 millisecond timeout in JavaScript to control how long “Welcome ✓” remains visible.
Modify the max-width:620px media query, where the circle becomes 430 × 430px and the fields and button become 42px high.

Where to Use This Circular Gradient Login Form

The component works well when a login screen needs a compact central interface with clear visual separation from the surrounding page.

Login pages for dark-themed websites
Account access screens for web applications
Developer portfolio UI demonstrations
SaaS authentication page concepts
Member portal interfaces
Sign-in modal design prototypes
Front-end CSS and JavaScript experiments

If your project also needs registration in the same interface, the Animated S-Wave Login & Sign Up Form provides both login and sign-up views with an animated switching panel. For production use, this circular form would still need a real authentication backend and appropriate handlers for password recovery, account registration, and social sign-in.

Frequently Asked Questions

Is the gradient border an actual CSS border?

No. The colorful outer ring is created with the .cr-orbit-panel::before pseudo-element. It uses inset: -5px, a circular border radius, and a multi-color linear gradient behind the main panel.

Can users show and hide their password?

Yes. Clicking the eye button switches the password input between password and text. JavaScript also updates the button’s aria-label to describe the available action.

Does clicking Login authenticate the user?

No. The submit handler prevents the normal form submission and temporarily changes the button content to “Welcome ✓”. There is no API request, credential validation, or backend authentication in the component.

How does the circular form adapt to smaller screens?

Below 620px, the main panel changes from 560 × 560px to 430 × 430px with max-width: 100%. Padding, heading size, input height, margins, and Login button height are also reduced.

The Circular Gradient Login Form combines a CSS-generated circular frame with focused input states, password visibility controls, responsive sizing, and lightweight JavaScript feedback while keeping the authentication logic separate.