Creating Lines and Dots using CSS Linear Gradient

I recently stumbled across a CSS technique that completely changed how I think about drawing lines and dividers on the web. Until now, I mostly relied on borders or sometimes even images (embarrassed) to create dotted lines and subtle decorative line elements. Now, I prefer using a CSS linear gradient.

Why you should learn this

CSS linear gradient gives you way more control in terms of being able to customise the line’s colour, spacing, thickness, and direction.

You can use this technique to -

• Create dotted or dashed lines.
• Build vertical or horizontal dividers inside flex or grid layouts and
• Design subtle textures for backgrounds or underlines.

It’s surprisingly simple once you get the hang of it.

The basics

Let's use a linear gradient background image for painting a solid black horizontal line.

.horizontal-line {
  height: 1px;
  background-image: linear-gradient(to right, black, black);
}

This creates a 1px tall horizontal line from left to right.

Creating dotted and dashed lines

The background-image property can be combined with background-size and repeat to create dotted lines.

.dotted-line {
  height: 1px;
  background-image: linear-gradient(to right, black 10%, transparent 0%);
  background-size: 15px 100%;
  background-repeat: repeat-x;
}

• black 10%, transparent 0% creates a short black dot followed by a transparent space.
• background-size: 15px 100% means each “dot segment” spans 15px wide and 100% height (i.e. 1px).
• repeat-x repeats it horizontally.

Try adjusting 10% to make it a dashed line, or 15px to control spacing.

Customise it to your heart's content

You can go crazy with colors too!

.custom-rainbow-line {
  height: 3px;
  background-image: linear-gradient(
    to right,
    red,
    orange 20px,
    yellow 40px,
    green 60px,
    blue 80px,
    indigo 100px,
    violet 120px
  );
  background-repeat: repeat-x;
}

There is a shorthand for this technique

You can combine all the background properties like background-image, background-size, background-repeat, and background-position into a single background property. It’s more compact and perfect when you don’t need to tweak individual values later.

.subtle-dashed-line {
  background: linear-gradient(90deg, var(--color-neutral-500), var(--color-neutral-500) 50%, transparent 50%, transparent 100%) 0 0 / 0.5rem 1px
}

• linear-gradient(...) is the the visual content.
• 0 0 sets the position of the background (top-left corner).
• 0.5rem 1px means each “dot block” is 0.5rem wide and 1px tall.
• By default, it behaves like repeat-x

You can see this technique in action in one of my side projects here.

Why I love this?

• Fully scalable as it works horizontally, vertically, and even diagonally.
• Responsive out of the box.
• Lightweight.

Try it in your next project

Next time you reach for a border or image to create lines, ask yourself - Could this be a gradient instead?