# Creating fancy Horizontal Rule lines

**URL:** <https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700>\
**Category:** Themes & CSS snippets\
**Tags:** custom-css\
**Created:** [July 25, 2023, 6:00am UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700 "2023-07-25T06:00:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![FireIsGood](https://forum.obsidian.md/user_avatar/forum.obsidian.md/fireisgood/32/45718_2.png) [@FireIsGood](https://forum.obsidian.md/u/FireIsGood)\
**Post date:** [July 25, 2023, 6:00am UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700/1 "2023-07-25T06:00:26Z")

</div>

Hi!

Horizontal rules are a fun element to style, though sometimes it’s frustrating to do special things with them.

Here’s a collection of templates to show off different things you can do to style them.

## Gradient Horizontal Rules

Starting out quite simply, you can make the line a gradient from transparent on the sides to a solid color in the center.

 ![image](https://forum.obsidian.md/uploads/default/original/3X/b/7/b7aa438bfbccce41507d6791d7556daee9b2b889.png)

The code:

```css
body {
    --hr-line-offset: 25%;
    --hr-color: lightsalmon;
}

:root hr {
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        var(--hr-color) calc(50% - var(--hr-line-offset)),
        var(--hr-color) calc(50% + var(--hr-line-offset)),
        transparent
    );
}

```

You may have seen similar snippets to this, but I’ve added two CSS variables to make it easier to customize.

- `--h1-line-offset` allows you to change how wide the center solid color is
- `--hr-color` is the original horizontal rule color variable, placed here for your convenience

## Center Text Horizontal Rules

A bit more complicated now, this is the type you may have seen in themes like ITS or Maple.

 ![image](https://forum.obsidian.md/uploads/default/original/3X/f/b/fb6155cfe9e2771146564219f7f91669ef119f1a.png)

The improvement here is a set of `calc()` functions that give a specific number of characters (or pixels if you prefer) offset from the symbol to the rest of the gradient. There’s also a sneaky `translate` declaration to ensure that any text you enter will be centered vertically, even if you want to have horizontal rules `20px` tall or something.

The code:

```css
body {
    --hr-line-offset: 25%;
    --hr-color: lightsalmon;
    --hr-text-color: lightblue;
    --hr-text-offset: 2ch;
    --hr-thickness: 4px;
}

:root hr {
    --hr-line-color: var(--hr-color);
    display: grid;
    place-items: center;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        var(--hr-line-color),
        var(--hr-line-color) calc(50% - var(--hr-text-offset)),
        transparent calc(50% - var(--hr-text-offset)),
        transparent calc(50% + var(--hr-text-offset)),
        var(--hr-line-color) calc(50% + var(--hr-text-offset)),
        var(--hr-line-color)
    );
}

:root hr::after {
    content: "★";
    font-weight: bold;
    color: var(--hr-text-color);
        position: absolute;
        translate: 0 calc(var(--hr-thickness) / -2);
}

```

## Center Text with Gradient Horizontal Rules

The fanciest, this is basically what the Maple theme has. My addition here is the same as before with the specific character count offset.

The secret sauce here is another set of `calc()` functions to expand the line.

 ![image](https://forum.obsidian.md/uploads/default/original/3X/a/f/af5208befc32d8407420d10db4b0319c08b72b50.png)

The code:

```css
body {
    --hr-line-offset: 25%;
    --hr-color: lightsalmon;
    --hr-text-color: lightblue;
    --hr-text-offset: 2ch;
    --hr-thickness: 4px;
}

:root hr {
    --hr-line-color: var(--hr-color);
    display: grid;
    place-items: center;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        var(--hr-line-color) calc(50% - var(--hr-line-offset)),
        var(--hr-line-color) calc(50% - var(--hr-text-offset)),
        transparent calc(50% - var(--hr-text-offset)),
        transparent calc(50% + var(--hr-text-offset)),
        var(--hr-line-color) calc(50% + var(--hr-text-offset)),
        var(--hr-line-color) calc(50% + var(--hr-line-offset)),
        transparent
    );
}

:root hr::after {
    content: "★";
    font-weight: bold;
    color: var(--hr-text-color);
        position: absolute;
        translate: 0 calc(var(--hr-thickness) / -2);
}

```

---

<div class="post-metadata">

**Author:** ![JimK](https://forum.obsidian.md/user_avatar/forum.obsidian.md/jimk/32/20102_2.png) [@JimK](https://forum.obsidian.md/u/JimK)\
**Post date:** [August 5, 2023, 7:58pm UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700/2 "2023-08-05T19:58:41Z")

</div>

Hi @FireIsGood, Thanks for this, I love customizing things like HR and Headings. I am adding some I came up with using a different method from this post [Customised symbolic `hr` line](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223) that doesn’t use border but instead uses background. Two of them use windows fonts call Wingdings, not sure if Mac or Linux has them, the third one uses emoji.

I call this one Gothic Filigree

 ![image](https://forum.obsidian.md/uploads/default/original/3X/0/2/02e2b2d3ec176451cc317cf667c0e8454a843da1.png)

```css
/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;;
  background-image: linear-gradient(to right, var(--background-primary), tan, yellow, #e6d265, yellow, tan, var(--background-primary));
}
.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
  content: '🙤x🙦'; /* '🙦 🙤' */
  color: #e6d265; /* #e6d265; */
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -55%);
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}

```

I call this one Flower

 ![image](https://forum.obsidian.md/uploads/default/original/3X/a/5/a58c0a00a13cf2dc670b38c38d1c2db702aab218.png)

```css
/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;;
  background-image: linear-gradient(to right, var(--background-primary), DarkOliveGreen, green, yellowgreen, yellowgreen, green, DarkOliveGreen,var(--background-primary));
}
.markdown-source-view hr::after, 
.markdown-preview-view hr::after {
  content: '🏶' ;/*'' */
  color: Tomato; /*lightcoral*/
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); 
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}
.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
  content: '🙘🙤\00a0🙦🙚'; /* '🙦 🙤 🙐🙖 🙚 🙘' */
  color: DarkSeaGreen; 
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -55%);
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}

```

Here is Flower using Emoji instead of fonts

 ![image](https://forum.obsidian.md/uploads/default/original/3X/3/9/39a007931b08144b904e18c73a42bc6e1a1a1a2f.png)

```css
/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--background-primary), DarkOliveGreen, green, yellowgreen, yellowgreen, green, DarkOliveGreen,var(--background-primary));
}
.markdown-source-view hr::after, 
.markdown-preview-view hr::after {
  content: '🌸';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); 
  transform-origin: 50% 50%;
  padding: none;
  background-color:transparent;
}

.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
content: '🍀🍀';
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, -50%)rotate(160deg);
transform-origin: 50% 50%;
padding: none;
background-color: var(--background-primary);
}

```

---

<div class="post-metadata">

**Author:** ![CaptainPackers1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/c/cab0a1/32.png) [@CaptainPackers1](https://forum.obsidian.md/u/CaptainPackers1)\
**Post date:** [March 23, 2025, 1:38pm UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700/3 "2025-03-23T13:38:34Z")

</div>

How can I make these narrower, so they only take up like 50% of the screen/page? I tried tweaking the percentages but I can’t get the result I’m looking for.

---

<div class="post-metadata">

**Author:** ![CaptainPackers1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/c/cab0a1/32.png) [@CaptainPackers1](https://forum.obsidian.md/u/CaptainPackers1)\
**Post date:** [March 27, 2025, 11:28am UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700/4 "2025-03-27T11:28:16Z")

</div>

I figured it out, in case anyone else is interested.

```css
body {
    --hr-line-offset: 10%;
    --hr-color: gold;
}

:root hr {
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent 25%,
        var(--hr-color) calc(50% - var(--hr-line-offset)),
        var(--hr-color) calc(50% + var(--hr-line-offset)),
        transparent 75%
    );
}

```

---

<div class="post-metadata">

**Author:** ![xp.eee](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/x/839c29/32.png) [@xp.eee](https://forum.obsidian.md/u/xp.eee)\
**Post date:** [September 12, 2025, 10:50pm UTC](https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700/5 "2025-09-12T22:50:46Z")

</div>

I have a new implementation based on @JimK’s code that allows you to fully customize the horizontal rule, including the svg icon, using style settings! My favorite feature is that the color of the icon will match the color of the horizontal rule!  
 ![image](https://forum.obsidian.md/uploads/default/original/3X/1/b/1b24ce3130a4edad3b6c65f009c6b76b821e2615.png)

Check out [https://github.com/xp-dv/obsidian-extra-extras](https://github.com/xp-dv/obsidian-extra-extras) for the CSS code and style settings.