Css Gradient To Produce Dotted Line

I needed to print a textearea content (user input) and I just used css gradient to produce lines below the text. The following css did the trick for me. .linedText { color: #000000

Solution 1:

This is an example of how you can achieve what you're trying.

It's just a matter of using two linear gradients with rgba colors = transparency and make them overlap to create a pattern to be repeated.

It's not cross browser (webkit only). Just a snippet to get you started.

background-image: 
        -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);

background-size: 12px24px;