CSS code snippets are an essential part of any front-end developer’s toolkit. They allow you to quickly and easily style your web pages, without having to write long, complicated CSS code. By using code snippets, you can save time and effort, and ensure that your pages look great.
The best thing about CSS code snippets is that they are easy to use. Simply copy and paste the code into your HTML file, and you’re done. No need to worry about CSS syntax or other complicated code.
Are you looking for a specific CSS code snippet but can’t seem to find what you need? This curated list of resources is just what you need! You’ll find everything from how to use borders and box shadows to create responsive layouts.
Table of Contents
Button
Checkbox
Change Size of Checkbox —
<html> <head> <title>HTML Chexkbox</title> <style text="text/css"> body{ font-family: sans-serif; padding: 10em; } .big-checkbox { transform: scale(3); } label{ padding-left: 3em; } </style> </head> <body> <div class="wrapper"> <form> <input type="checkbox" name="checkbox-agree" checked> <label>Do you agree?</label> <div style="margin-top: 3em;"> <input type="checkbox" class="big-checkbox" name="checkbox-subscription" checked> <label>Subscription</label> </div> </form> </div> </body> </html>
Dialog & Popup
Create a Moda —
<div class="wrapper"> <a href="#modal" class="btn">Open Modal</a> </div> <div id="modal" class="modal"> <div class="content"> <a href="#" class="btn_close">×</a> <h1>Modal Title</h1> <p> A modal is an element on a web page that can be used to provide additional information or functionality to the user. It usually pops up in a new window or tab and can be customized using CSS. </p> <div class="footer"> <a href="#" class="btn">Confirm</a> <a href="#" class="btn btn-cancel">Cancel</a> </div> </div> </div> <style type="text/css"> .wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } a.btn, a.btn:visited{ background-color: #EEE; border: 1px solid #AAA; border-radius: 8px; padding: 5px; text-decoration: none; color: #333; } .modal { visibility: hidden; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(200, 200, 200, .7); transition: all .4s; } .modal:target { visibility: visible; opacity: 1; } .modal .content { position: relative; width: 400px; max-width: 90%; background: #fff; padding: 1em; border-radius: 8px; } .modal .footer { text-align: right; } .modal .btn_close { position: absolute; top: 10px; right: 10px; color: #585858; text-decoration: none; } </style>
Image
Change Size of Images —
<html> <head> <style text="text/css"> .wrapper{margin: 2em; font-family: sans-serif;} .img-wrapper{ margin-bottom: 1em; } .img-wrapper img{ border: 1px solid red; } #img1{width: 300px;} #img1 img{width: 100%;} #img2{width: 500px;} #img2 img{width: 200px;} #img3{width: 500px;} #img3 img{height: 400px; max-width: 500px;} </style> </head> <body> <div class="wrapper"> <div class="img-wrapper" id="img1"> <img src="https://cdn.pixabay.com/photo/2015/02/24/02/05/website-647013_960_720.jpg" /> </div> <div class="img-wrapper" id="img2"> <img src="https://cdn.pixabay.com/photo/2015/09/09/21/12/monitor-933392_960_720.jpg" /> </div> <div class="img-wrapper" id="img3"> <img src="https://cdn.pixabay.com/photo/2017/09/05/10/19/business-2717063_960_720.jpg" /> </div> </div> </body> </html>
Layout
Create a Website with Fullscreen Sections —
<main> <section id="about"> <h2>We are an app development team.</h2> </section> <section id="services"> <h2>Our Services</h2> </section> <section id="contact"> <h2>Contact Us</h2> </section> </main> <style type="text/css"> body{ margin: 0; padding: 0; } section{ min-height: 100vh; } </style>
List
Reverse Numerical Order in Lists —
<ol reversed> <li>Tajikistan</li> <li>Poland</li> <li>Belgium</li> <li>Tunisia</li> <li>Yemen</li> <li>Palestinian Territories</li> <li>Tuvalu</li> <li>Moldova</li> <li>Belize</li> <li>Slovenia</li> <li>Estonia</li> <li>South Africa</li> <li>Costa Rica</li> <li>India</li> <li>Norway</li> <li>Palestinian Territories</li> </ol>
Loading
CSS Loading Text Animations —
.loading { font-size: 48px; font-weight: bold; display: inline-block; color: #6667ab; letter-spacing: 2px; position: relative; box-sizing: border-box; } .loading::after { content: 'Loading'; position: absolute; left: 0; top: 0; color: #FFFFFF; width: 100%; height: 100%; overflow: hidden; animation: loading 3s linear infinite; } @keyframes loading { 0% { height: 100%; } 100% { height: 0%; } }
Spinners and Loaders —
<div class="spinner"></div> <style type="text/css"> .spinner { border: 16px solid #48CD8A; border-top: 16px solid #B73275; border-radius: 50%; width: 120px; height: 120px; animation: loading 2s linear infinite; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
Text
Add Typing Effect —
<div class="typing-wrapper"> Typerwriter is typing. </div> <style type="text/css"> .typing-wrapper { width: 220px; overflow: hidden; border-right: 2px solid red; font-size: 24px; white-space: nowrap; animation: typing 2s steps(22), blink .5s step-end infinite alternate; } @keyframes typing { from { width: 0; } } @keyframes blink { 50% { border-color: transparent; } } </style>
Insert Spaces —
<p>HTML is a programming language used to create websites.</p> <p>HTML consists of a series of tags that define the structure of a web page.</p> <p>With HTML, you can create structural elements like headings, paragraphs, and list items, as well as insert images and other media.</p>
UI
Create Frosted Glass Effect —
<div id="wrapper"> <div class="box"> While glassmorphism can be used in a variety of ways, it is often used to create sleek interfaces with a focus on user experience. </div> </div> <style type="text/css"> body{ padding: 5em; font-family: sans-serif; background:url("https://cdn.pixabay.com/photo/2016/10/11/21/43/geometric-1732847_960_720.jpg") 0 / cover; } .box { width: 30rem; height: 15rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); border-radius: 8px; position: relative; background: inherit; overflow: hidden; padding: 1em; color: white; } .box::before { content: ""; position: absolute; background: inherit; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); filter: blur(10px); margin: -20px; } </style>
Make Section Auto-Snap When Scrolling —
<div class="wrapper"> <div class="section section-welcome"> Welcome </div> <div class="section section-services"> Our Services </div> <div class="section section-testimonials"> Testimonials </div> <div class="section section-contact"> Contact </div> </div> <style type="text/css"> .wrapper { font-family: sans-serif; height: 100vh; overflow: auto; scroll-snap-type: y mandatory; } .section { scroll-snap-align: center; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #b71c1c; color: #fff; font-size: 64px; } .section-welcome{ background-color: #b71c1c; } .section-services{ background-color: #880e4f; } .section-testimonials{ background-color: #e65100; } .section-contact{ background-color: #4a148c; } </style>
Create Ribbon Effect with Transform —
<div class="outer"> <div class="ribbon">FREE</div> </div> <style type="text/css"> .outer{ position: relative; overflow: hidden; width: 200px; height: 200px; border: 1px solid green; } .outer .ribbon{ position: absolute; right: -33px; background: green; width: 134px; height: 25px; transform: rotate(45deg); -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; color: white; text-align: center; padding: 5px 0 0 0; top: 20px; } </style>