CSS Paper Effect | Css Paper Effect Background

CSS Paper Effect | Css Paper Effect Background

Learners, who doesn’t want that there assignments get submit without writing any single line on paper.
Or, I would like to make you clear about this fact that writing on paper is always deliver an excellent joy ๐Ÿ˜Š. So most of the tech alcoholic people expecting the feeling of writing on paper without writing on paper, isn’t it weird but yeah learners developers like you are available to help them to grab the unexpected feelings.
CSS Paper Effect | Css Paper Effect Background

Hey learners..!

Welcome to our ๐ŸŽŠ today’s blog with code with random. In this blog, we gonna learn how we can design css paper effect as per preview image.

Although Here by our complete project we will have a assessment ruled paper with some default text. You can skip this project and can write your owns.

Without any further ado, let’s get it into.


In this section here we have a div with class paper with div with class name lines.

Within lines we have div class text in this we will have some default text 

Then we have 3 vacant div with class hole, hole-middle then hole-lower.

Go through the below code ๐Ÿ‘‡ and run in your IDE or where you used to design just HTML without CSS styling.
 <div class="paper"> 
<div class="lines">
<div class="text" contenteditable spellcheck="false">
You can edit this text! <br /><br />
Cupcake ipsum dolor sit amet liquorice fruitcake. Candy canes jelly beans sweet roll cupcake lollipop. Powder carrot cake toffee brownie. Marshmallow sweet roll donut. Chocolate cake apple pie candy canes tiramisu dragรฉe wafer. Croissant cookie lemon drops tiramisu jelly-o donut. Sweet gummi bears ice cream.</div>
<div class="holes hole-top"></div>
<div class="holes hole-middle"></div>
<div class="holes hole-bottom"></div>


In the CSS section, we will design our paper, lines and holes class div.

In the paper part we will designto turn into a rectangle shape with relatable margin.

By selector paper:: before we will add a red left side border.

By line class div we will ruled the paper with fixed margin between lines.

At last we have holes by designing them we will put them into respective deference of gap.

The Below code๐Ÿ‘‡ will analyze you more. So just add in your HTML half complete file and wait to watch some magic.


 @import url(https://fonts.googleapis.com/css?family=Indie+Flower);  
body {
margin: 0;
padding: 0;
background: lightblue;
.paper {
position: absolute;
height: 550px;
width: 450px;
background: rgba(255,255,255,0.9);
margin: -275px -225px;
left: 50%;
top: 50%;
box-shadow: 0px 0px 5px 0px #888;
.paper::before {
content: '';
position: absolute;
left: 45px;
height: 100%;
width: 2px;
background: rgba(255,0,0,0.4);
.lines {
margin-top: 40px;
height: calc(100% - 40px);
width: 100%;
background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
.text {
position: absolute;
top: 65px;
left: 55px;
bottom: 10px;
right: 10px;
line-height: 25px;
font-family: 'Indie Flower';
overflow: hidden;
outline: none;
.holes {
position: absolute;
left: 10px;
height: 25px;
width: 25px;
background: lightgoldenrodyellow;
border-radius: 50%;
box-shadow: inset 0px 0px 2px 0px #888;
.hole-top {
top: 10%;
.hole-middle {
top: 50%;
.hole-bottom {
bottom: 10%;

If you want a live preview of your project that you have designed till now ๐Ÿ˜€. Have look below๐Ÿ‘‡


See the Pen Css paper effect by Ankit kumar (@Kumar-Ankit56) on CodePen.

By this blog… We have learned how we can design Paper effect in CSS.

Now I’m looking for your reviews.
So, How was the blog ๐Ÿ˜, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.๐Ÿ˜Š

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

Share on:

Leave a Comment