radioselectorsegmented-controlanimatedcsspricingformtoggle
Segmented Radio Selector with Animated Glider

Сегментированный переключатель с анимированным индикатором. Позволяет выбирать опции, идеально подходит для форм и выбора тарифов. Настраивается через CSS.
Live Preview
Prompt

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Radio Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <link id="all-fonts-link-font-geist" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-geist">
    .font-geist {
      font-family: 'Geist', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-roboto" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-roboto">
    .font-roboto {
      font-family: 'Roboto', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-montserrat" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-montserrat">
    .font-montserrat {
      font-family: 'Montserrat', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-poppins" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-poppins">
    .font-poppins {
      font-family: 'Poppins', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-playfair" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
  <style id="all-fonts-style-font-playfair">
    .font-playfair {
      font-family: 'Playfair Display', serif !important;
    }
  </style>
  <link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-instrument-serif">
    .font-instrument-serif {
      font-family: 'Instrument Serif', serif !important;
    }
  </style>
  <link id="all-fonts-link-font-merriweather" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&amp;display=swap">
  <style id="all-fonts-style-font-merriweather">
    .font-merriweather {
      font-family: 'Merriweather', serif !important;
    }
  </style>
  <link id="all-fonts-link-font-bricolage" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-bricolage">
    .font-bricolage {
      font-family: 'Bricolage Grotesque', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-jakarta" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap">
  <style id="all-fonts-style-font-jakarta">
    .font-jakarta {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-manrope" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&amp;display=swap">
  <style id="all-fonts-style-font-manrope">
    .font-manrope {
      font-family: 'Manrope', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-space-grotesk">
    .font-space-grotesk {
      font-family: 'Space Grotesk', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-work-sans" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&amp;display=swap">
  <style id="all-fonts-style-font-work-sans">
    .font-work-sans {
      font-family: 'Work Sans', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-pt-serif" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&amp;display=swap">
  <style id="all-fonts-style-font-pt-serif">
    .font-pt-serif {
      font-family: 'PT Serif', serif !important;
    }
  </style>
  <link id="all-fonts-link-font-geist-mono" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-geist-mono">
    .font-geist-mono {
      font-family: 'Geist Mono', monospace !important;
    }
  </style>
  <link id="all-fonts-link-font-space-mono" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&amp;display=swap">
  <style id="all-fonts-style-font-space-mono">
    .font-space-mono {
      font-family: 'Space Mono', monospace !important;
    }
  </style>
  <link id="all-fonts-link-font-quicksand" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&amp;display=swap">
  <style id="all-fonts-style-font-quicksand">
    .font-quicksand {
      font-family: 'Quicksand', sans-serif !important;
    }
  </style>
  <link id="all-fonts-link-font-nunito" rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&amp;display=swap">
  <style id="all-fonts-style-font-nunito">
    .font-nunito {
      font-family: 'Nunito', sans-serif !important;
    }
  </style>
</head>

<body class="min-h-screen flex items-center justify-center bg-gray-950 pt-4 pr-4 pb-4 pl-4">
  <div class="radio-container" style="--main-color: #4f9eff; --main-color-opacity: #4f9eff1c;">
    <input checked="" id="radio-free" name="radio" type="radio">
    <label for="radio-free">Free</label>
    <input id="radio-basic" name="radio" type="radio">
    <label for="radio-basic" class="">Pro</label>
    <input id="radio-premium" name="radio" type="radio">
    <label for="radio-premium" class="">Max</label>

    <div class="glider-container">
      <div class="glider"></div>
    </div>
  </div>

  <style>
    /* From Uiverse.io by Smit-Prajapati */
    .radio-container {
      --main-color: #f7e479;
      --main-color-opacity: #f7e4791c;

      /* change this according inputs count */
      --total-radio: 3;

      display: flex;
      flex-direction: column;
      position: relative;
      padding-left: 0.5rem;
    }

    .radio-container input {
      cursor: pointer;
      appearance: none;
    }

    .radio-container .glider-container {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(0deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(27, 27, 27, 1) 50%,
          rgba(0, 0, 0, 0) 100%);
      width: 1px;
    }

    .radio-container .glider-container .glider {
      position: relative;
      height: calc(100% / var(--total-radio));
      width: 100%;
      background: linear-gradient(0deg,
          rgba(0, 0, 0, 0) 0%,
          var(--main-color) 50%,
          rgba(0, 0, 0, 0) 100%);
      transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);
    }

    .radio-container .glider-container .glider::before {
      content: "";
      position: absolute;
      height: 60%;
      width: 300%;
      top: 50%;
      transform: translateY(-50%);
      background: var(--main-color);
      filter: blur(10px);
    }

    .radio-container .glider-container .glider::after {
      content: "";
      position: absolute;
      left: 0;
      height: 100%;
      width: 150px;
      background: linear-gradient(90deg,
          var(--main-color-opacity) 0%,
          rgba(0, 0, 0, 0) 100%);
    }

    .radio-container label {
      cursor: pointer;
      padding: 1rem;
      position: relative;
      color: grey;
      transition: all 0.3s ease-in-out;
    }

    .radio-container input:checked+label {
      color: var(--main-color);
    }

    .radio-container input:nth-of-type(1):checked~.glider-container .glider {
      transform: translateY(0);
    }

    .radio-container input:nth-of-type(2):checked~.glider-container .glider {
      transform: translateY(100%);
    }

    .radio-container input:nth-of-type(3):checked~.glider-container .glider {
      transform: translateY(200%);
    }

    .radio-container input:nth-of-type(4):checked~.glider-container .glider {
      transform: translateY(300%);
    }

    .radio-container input:nth-of-type(5):checked~.glider-container .glider {
      transform: translateY(400%);
    }

    .radio-container input:nth-of-type(6):checked~.glider-container .glider {
      transform: translateY(500%);
    }

    .radio-container input:nth-of-type(7):checked~.glider-container .glider {
      transform: translateY(600%);
    }

    .radio-container input:nth-of-type(8):checked~.glider-container .glider {
      transform: translateY(700%);
    }

    .radio-container input:nth-of-type(9):checked~.glider-container .glider {
      transform: translateY(800%);
    }

    .radio-container input:nth-of-type(10):checked~.glider-container .glider {
      transform: translateY(900%);
    }
  </style>

  <script>
    lucide.createIcons();
  </script>

</body>

</html>
All Prompts