<!--
   Tutorial: https://tutorial.tips/how-to-change-the-highlight-color-of-selected-text-css/
   Author: Gulshan Saini
-->
<div class="demo">
  <div class="center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae adipisci eius rem voluptate! Cum voluptatem fuga provident ea perspiciatis ab amet accusamus temporibus, esse cumque dolorem, inventore asperiores aliquam ad necessitatibus
    </p>
  </div>
</div>
/* 
   Tutorial: https://tutorial.tips/how-to-change-the-highlight-color-of-selected-text-css/
   Author: Gulshan Saini
 */

body {
  font-family: "Poppins", sans-serif;
  background: black;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.demo {
  margin: auto;
  position: relative;
}

.center {
  background: #26a8e2;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  margin: 10%;
  padding: 30px;
  font-size: 20px;
  line-height: 1.3;
  box-shadow: 2px 2px 3px #fff;
}

p::selection {
  background: #bada55;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.