Weebly Colored Lines – Beautiful Gradient Dividers with Glow Effects and Decorative Ornaments
Replace plain Weebly dividers with polished, brand-coloured line separators. Create smooth two-colour gradient transitions in three directions, add luminous glow effects, choose from seven decorative ornament styles, and control every dimension — all without touching a line of code.
⭐⭐⭐⭐⭐ 4.9/5 across 8 verified reviews | Gradient & Glow Effects | 7 Ornament Styles | 100% Responsive
🎨 Gradient Colour Transitions
✨ Customisable Glow Effects
💠 7 Decorative Ornament Styles
What Is the Weebly Colored Lines App?
Weebly includes a basic horizontal line divider, but it gives you no control over colour, size, gradients, or visual style. The Weebly Colored Lines app replaces that limitation with a full-featured divider widget that lets you create everything from a simple coloured line to a glowing gradient separator with a diamond or star ornament at its centre.
Using the settings panel you choose two colours and a gradient direction (left to right, right to left, or top to bottom) to create smooth colour transitions. You can add a luminous glow to make the line visually pop, and select from seven decorative ornament styles — dots, arrows, diamonds, circles, stars, hearts, or none — to add a finishing accent at the midpoint.
Every dimension is adjustable: line width (1–100%), height (1–50px), border radius (0–50px for rounded ends), alignment (left, centre, or right), and margins and padding. The app is fully responsive and backward compatible — existing dividers placed on your site continue working unchanged after any app update.
See Colored Lines in Action
Watch the official walkthrough to see gradients, glow effects, ornament styles, and alignment controls in a real Weebly editor.
7 Decorative Ornament Styles
Each ornament appears centred on the divider line. Choose the one that matches your site’s design aesthetic — or leave the line clean with no ornament.
· · ·
Dots
Minimal and understated — works with almost any page layout or style.
➤
Arrows
Adds direction and movement — ideal for calls to action and scroll prompts.
◆
Diamonds
Classic and elegant — a strong choice for luxury, fashion, or jewellery sites.
●
Circles
Soft and modern — a versatile accent that suits professional and lifestyle sites alike.
★
Stars
Eye-catching and festive — suits events, reviews, hospitality, and entertainment sites.
♥
Hearts
Warm and expressive — perfect for wellness, lifestyle, wedding, and personal brand sites.
——
Plain (No Ornament)
Let the gradient and glow speak for themselves — a clean line with no centrepiece accent.
Full Customisation Control
Every setting is accessible through the organised settings panel with helpful tooltips. Colours can be entered as hex codes (e.g. #ff8000) for pixel-perfect brand matching, as well as via the visual colour picker.
- Line Width — set as a percentage (1–100%) so the divider scales proportionally on all screen sizes
- Line Height — control the thickness in pixels (1–50px) from hairline-thin to a bold block
- Gradient Effects — choose two colours and a direction: left→right, right→left, or top→bottom
- Glow Effects — set glow colour and intensity (0–50px spread) to add luminous depth
- Border Radius — round the line ends from sharp (0px) to fully rounded (50px)
- Alignment — left, centre, or right; set custom margins (0–200px) and padding (0–100px) to position precisely
- Ornament Size & Colour — independently control the size and colour of the decorative accent separate from the line colour
⚙️ Settings Panel
- 📐 Width (1–100%) & Height (1–50px)
- 🎨 Line Colour (picker + hex code)
- 🌈 Gradient: 2 colours, 3 directions
- ✨ Glow colour & intensity (0–50px)
- 💠 7 ornament styles + size & colour
- ⬜ Border radius (0–50px)
- ↔️ Alignment + margin & padding
- 📱 Responsive & backward compatible
Perfect For Every Weebly Site
Any site that uses section dividers — which is almost every site — benefits from replacing plain lines with visually deliberate, brand-coloured separators.
✍️
Blog Posts & Articles
Separate blog sections with a slender gradient line that matches your brand palette — a polished alternative to a plain grey rule that makes long posts easier to navigate visually.
💼
Business & Corporate Pages
Use a thin, centred, brand-coloured line to separate page sections on homepage layouts, service pages, and about pages — a subtle signal of design care that elevates the overall professional impression.
🛍️
E-Commerce & Product Pages
Separate product categories, featured items, and page zones with decorative gradient lines that guide the shopper’s eye through the page structure without visual noise.
Simple, Affordable Pricing
Every feature in one plan. Unlimited use across one Weebly website for a single annual fee.
All in One
$14.99/yr
- ✅ Beautiful gradient effects (3 directions)
- ✅ Glow effects with colour & intensity control
- ✅ 7 decorative ornament styles
- ✅ Full width, height, and border radius control
- ✅ Alignment, margin, and padding settings
- ✅ Hex code colour input for exact brand colours
- ✅ 100% responsive and mobile optimised
- ✅ Backward compatible — existing dividers unchanged
Verified Reviews
Colored Lines holds a 4.9/5 rating across 8 verified reviews on the Weebly App Center — the highest-rated app in the developer’s catalogue.
⭐⭐⭐⭐⭐
“Adding horizontal lines in the color of your choice makes a pleasing eye-catching difference to any web design. Colored Lines has quickly become one of my most used apps.”
Larry Wade · August 2020 · ⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐
“Great to have more flexibility with the choice of lines in Weebly, has worked well for my site to make it stand out more.”
Tina Elven · October 2017 · ⭐⭐⭐⭐⭐
⭐⭐⭐⭐
“The app is very nice, except that even when I made top margin = 0, there is still a lot of space above the line.”
Blissful Yogi · May 2017 · ⭐⭐⭐⭐ · See FAQ for spacing explanation
Frequently Asked Questions
There’s extra space above my Colored Lines divider even when I set the top margin to 0 — how do I fix it?
This is the most frequently mentioned spacing concern, and it almost always originates from the element above the divider rather than from Colored Lines itself. Weebly themes apply a default margin-bottom to headings (particularly h2) and other block elements via CSS — this space belongs to that element, not to the Colored Lines widget. The developer’s response to this is accurate: the app itself sets its own padding and margins to 0 internally. The fix is to use the top margin setting in the Colored Lines settings panel to apply a negative or reduced value that compensates for the theme’s spacing, or — if you are comfortable with Weebly’s custom CSS — to reduce the margin-bottom on the element immediately above. Another reviewer (Bill Johnston, 5★) confirmed the same root cause, noting that adjusting the heading’s CSS padding resolves it.
I upgraded from a previous version — will my existing dividers still look the same?
Yes. Colored Lines v1.0.2 is fully backward compatible with dividers created in v1.0.1 and earlier. All previously configured dividers continue to display exactly as they were. The new gradient, glow, ornament, and border radius features are optional additions you can choose to apply to existing or new dividers at your own pace — nothing changes automatically on upgrade.
Can I match my exact brand colour using a hex code?
Yes — the colour picker accepts hex colour codes (e.g. #ff8000) in addition to the visual picker. This means you can enter your brand’s exact colour values for the line, gradient colours, glow, and ornament — ensuring the dividers are perfectly on-brand. Reviewer Pedro highlighted this as a particular strength of the settings panel.
What are the three gradient directions?
The gradient system transitions between two colours you choose. The three direction options are: left to right (colour A on the left fades into colour B on the right — the most common for horizontal dividers), right to left (the reverse), and top to bottom (colour A at the top transitions to colour B at the bottom — effective for taller dividers). You can also use a solid single colour if you prefer no gradient.
Is support available if I run into problems?
Yes. Contact the developer through the support form at codoplex.com/contact. Developer responses are visible in the App Center review thread and consistently address technical questions promptly.
What does the $14.99/yr plan include?
The All in One plan includes all features: gradient effects, glow effects, all 7 ornament styles, full sizing and radius control, alignment settings, hex colour input, responsive design, and backward compatibility. The fee is annual and covers unlimited use of the app across one Weebly website — there is no limit on how many Colored Lines dividers you place on the site.
Explore Our Other Weebly Apps
Stop Using Plain Grey Lines. Make Your Dividers Work for Your Brand.
The highest-rated app in the Codoplex catalogue at 4.9/5 stars. Coloured gradients, luminous glow effects, and seven ornament styles — all controllable from a single settings panel with no code required. Add Colored Lines to your Weebly site and see the difference on your very first divider.