Skip to main content

Gradient, Rainbow & Neon Effects

Make your logs stand out with stunning text effects. Perfect for headers, banners, and highlighting important information.

Gradient Text​

log.gradient(text, colors)​

Create smooth color transitions across your text:

import { log } from 'logluxe';

// Two-color gradient
log.gradient('Welcome to my app', ['#ff0000', '#0000ff']);

// Multi-color gradient
log.gradient('Beautiful Gradient Text', [
  '#ff6b6b',
  '#feca57', 
  '#48dbfb',
  '#ff9ff3'
]);

// Named colors
log.gradient('Sunset Vibes', ['red', 'orange', 'yellow']);
Gradient Output
Welcome to my app
Beautiful Gradient Text
Sunset Vibes
🎮 Try Gradients

Preset Gradients​

Logluxe includes beautiful preset gradients:

// Sunset gradient
log.gradient('Sunset', 'sunset');

// Ocean gradient  
log.gradient('Ocean', 'ocean');

// Forest gradient
log.gradient('Forest', 'forest');

// Fire gradient
log.gradient('Fire', 'fire');

// Purple haze
log.gradient('Purple Haze', 'purple');
Preset Gradients
Sunset
Ocean
Forest
Fire
Purple Haze

Rainbow Text​

log.rainbow(text)​

Apply full spectrum colors across your text:

log.rainbow('🌈 Rainbow colored text!');
log.rainbow('COLORFUL HEADER');
log.rainbow('═'.repeat(50)); // Rainbow divider
Rainbow Output
🌈Rainbowcoloredtext!
COLORFULHEADER
══════════════════════════════════════════════════
🎮 Try Rainbow

Rainbow Effect​

// Each character gets the next color in the spectrum
log.rainbow('ABCDEFGHIJKLMNOPQRSTUVWXYZ');

// Perfect for attention-grabbing headers
log.rainbow('★ IMPORTANT NOTICE ★');

// Works great with emoji too
log.rainbow('🎉 Congratulations! 🎉');
Output
ABCDEFGHIJKLMNOPQRSTUVWXYZ
★ IMPORTANT NOTICE ★
🎉 Congratulations! 🎉

Neon Effect​

log.neon(text, color?)​

Create a glowing neon sign effect:

// Default neon (cyan glow)
log.neon('OPEN 24/7');

// Custom neon colors
log.neon('HOT DEALS', 'red');
log.neon('COOL STUFF', 'blue');
log.neon('GO GREEN', 'green');
log.neon('VIP AREA', 'magenta');
Neon Effects
OPEN 24/7
HOT DEALS
COOL STUFF
GO GREEN
VIP AREA
🎮 Try Neon

Neon Sign Style​

// Create a full neon sign box
log.neon('╔══════════════════════════╗', 'cyan');
log.neon('║   WELCOME TO THE CLUB    ║', 'cyan');
log.neon('╚══════════════════════════╝', 'cyan');
Neon Sign Box
╔══════════════════════════╗
║ WELCOME TO THE CLUB ║
╚══════════════════════════╝

Practical Examples​

Application Header​

function printAppHeader() {
  log.gradient('┌──────────────────────────────────┐', ['#667eea', '#764ba2']);
  log.gradient('│                                  │', ['#667eea', '#764ba2']);
  log.gradient('│      🚀 MY AWESOME APP 🚀        │', ['#667eea', '#764ba2']);
  log.gradient('│           v1.0.0                 │', ['#667eea', '#764ba2']);
  log.gradient('│                                  │', ['#667eea', '#764ba2']);
  log.gradient('└──────────────────────────────────┘', ['#667eea', '#764ba2']);
}
App Header
┌──────────────────────────────────┐
│ │
│ 🚀 MY AWESOME APP 🚀 │
│ v1.0.0 │
│ │
└──────────────────────────────────┘
🎮 Try App Header

Section Dividers​

function sectionHeader(title) {
  const line = '═'.repeat(50);
  log.gradient(line, ['#00d2ff', '#3a7bd5']);
  log.rainbow(`  ✦ ${title.toUpperCase()} ✦  `);
  log.gradient(line, ['#00d2ff', '#3a7bd5']);
}

sectionHeader('Configuration');
sectionHeader('Dependencies');
Section Headers
══════════════════════════════════════════════════
✦ CONFIGURATION ✦
══════════════════════════════════════════════════

Success & Error Banners​

function successBanner(message) {
  const width = message.length + 6;
  const border = '─'.repeat(width);
  
  log.gradient(`┌${border}┐`, ['#11998e', '#38ef7d']);
  log.gradient(`│  ✓ ${message}  │`, ['#11998e', '#38ef7d']);
  log.gradient(`└${border}┘`, ['#11998e', '#38ef7d']);
}

function errorBanner(message) {
  const width = message.length + 6;
  const border = '─'.repeat(width);
  
  log.gradient(`┌${border}┐`, ['#eb3349', '#f45c43']);
  log.gradient(`│  ✗ ${message}  │`, ['#eb3349', '#f45c43']);
  log.gradient(`└${border}┘`, ['#eb3349', '#f45c43']);
}

successBanner('Build completed successfully!');
errorBanner('Deployment failed');
Success Banner
┌────────────────────────────────────┐
│ ✓ Build completed successfully! │
└────────────────────────────────────┘
Error Banner
┌────────────────────────┐
│ ✗ Deployment failed │
└────────────────────────┘
🎮 Try Banners

Next: Background & Highlight →