Can I use "Login form UI Design snippet" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Login form UI Design snippet — Free Forms Snippet (Bootstrap 5)

Loading…

1<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 2 width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve"> 3<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="174.7899" y1="186.34" x2="330.1259" y2="186.34" gradientTransform="matrix(0.8538 0.5206 -0.5206 0.8538 147.9521 -79.1468)"> 4 <stop offset="0" style="stop-color:#FFC035"/> 5 <stop offset="0.221" style="stop-color:#F9A639"/> 6 <stop offset="1" style="stop-color:#E64F48"/> 7</linearGradient> 8<circle fill="url(#SVGID_1_)" cx="266.498" cy="211.378" r="77.668"/> 9<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="290.551" y1="282.9592" x2="485.449" y2="282.9592"> 10 <stop offset="0" style="stop-color:#FFA33A"/> 11 <stop offset="0.0992" style="stop-color:#E4A544"/> 12 <stop offset="0.9624" style="stop-color:#00B59C"/> 13</linearGradient> 14<circle fill="url(#SVGID_2_)" cx="388" cy="282.959" r="97.449"/> 15<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="180.3469" y1="362.2723" x2="249.7487" y2="362.2723"> 16 <stop offset="0" style="stop-color:#12B3D6"/> 17 <stop offset="1" style="stop-color:#7853A8"/> 18</linearGradient> 19<circle fill="url(#SVGID_3_)" cx="215.048" cy="362.272" r="34.701"/> 20<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="367.3469" y1="375.3673" x2="596.9388" y2="375.3673"> 21 <stop offset="0" style="stop-color:#12B3D6"/> 22 <stop offset="1" style="stop-color:#7853A8"/> 23</linearGradient> 24<circle fill="url(#SVGID_4_)" cx="482.143" cy="375.367" r="114.796"/> 25<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="365.4405" y1="172.8044" x2="492.4478" y2="172.8044" gradientTransform="matrix(0.8954 0.4453 -0.4453 0.8954 127.9825 -160.7537)"> 26 <stop offset="0" style="stop-color:#FFA33A"/> 27 <stop offset="1" style="stop-color:#DF3D8E"/> 28</linearGradient> 29<circle fill="url(#SVGID_5_)" cx="435.095" cy="184.986" r="63.504"/> 30</svg> 31 32 33<div class="container"> 34 <h2>login</h2> 35 <form> 36 <input type="text" class="email" placeholder="email"> 37 <br/> 38 <input type="text" class="pwd" placeholder="password"> 39 </form> 40 <a href="#" class="link"> 41 Forgot your password? 42 </a> 43 <br/> 44 <button class="register"> 45 <span>register</span> 46 </button> 47 <button class="signin"> 48 <span>sign in</span> 49 </button> 50 <h3>your registration is complete ! </h3> 51 <h3>your sign in is complete !</h3> 52 <div class="reg"></div> 53 <div class="sig"></div> 54</div> 55

Login form UI Design snippet

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection