HTML & CSS Code Snippets

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

Rounded Corners Button —

.btn{
  border: 1px solid red;
  padding: 1em;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}
.btn-1{
  border-radius: 8px;
}
.btn-2{
  border-radius: 16px;
}
.btn-3{
  border-radius: 50%;
}

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">&times;</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>

Form

Disable Selection When Set Readonly —

select[readonly]
{
    pointer-events: none;
}

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

Make an Element with Absolute Position But Relative to Its Parent —

<div class="parent">
    <div class="child">Absolute element</div>
</div>

<style type="text/css">
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    right: 50%;
}
</style>

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>

Convert Your Website to Dark Mode —

html {
  filter: invert(1);
}

List

Triangular Arrow List Bullets —

ul{
  list-style: none;
}
ul li:before {
  content: "";
  height: 0;
  width: 0;
  border-color: transparent red;
  border-style: solid;
  border-width: 10px 0px 10px 10px;
  position: relative;
  display: block;
  left: -16px;
  top: 17px;
}

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>

Split Lists into Columns —

ul {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

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&nbsp;is&nbsp;a&nbsp;programming language used to create websites.</p>
<p>HTML consists of a&ensp;series of tags that define the structure of a web page.</p>
<p>With HTML, you can create&emsp;structural elements like headings, paragraphs, and list items, as well as insert images and other media.</p>

UI

Fix double border-style Does Not Work for table Tag —

<tr>
      <th style="border-bottom: 3px double red;">Model</th>
      <th style="border-bottom: 3px double red;">Price</th>
    </tr>

Change Size of Headers —

h1{font-size: 1.8em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}
h4{font-size: 1em;}
h5{font-size: 0.9em;}
h6{font-size: 0.8em;}

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>

Add Single and Double Quotes to a Paragraph —

p.single {
  quotes: "‘" "’";
}
p.double {
  quotes: "“" "”";
}
p::before {
    content: open-quote;
    font-size: 36px;
    color: orange;
}
p::after {
    content: close-quote;
    font-size: 36px;
    color: orange;
}

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>