CSS Generators 🛠️

Interactive tools to generate perfect CSS code with real-time preview and copy-paste functionality.

Why Use CSS Generators?

CSS generators help you create complex CSS properties visually, saving time and ensuring cross-browser compatibility. Generate perfect code without memorizing syntax.

🎨
Visual Design
⚡
Real-time Preview
📋
Copy-Paste Ready
🔧
No Memorization

Gradient Generator

Features:

  • Linear, radial, and conic gradient support
  • Color pickers with real-time preview
  • Angle control and preset gradients
  • Copy-paste ready CSS code
  • Random gradient generation

Interactive Gradient Generator

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Gradient Generator - Interactive Tool</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .generator-container {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      margin-bottom: 3rem;
    }
    
    .controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }
    
    .control-group {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 10px;
    }
    
    .control-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .color-picker {
      width: 100%;
      height: 50px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    
    .range-slider {
      width: 100%;
      margin: 1rem 0;
    }
    
    .preview-area {
      height: 300px;
      border-radius: 12px;
      margin: 2rem 0;
      border: 3px dashed #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      transition: all 0.3s ease;
    }
    
    .code-output {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 8px;
      font-family: 'Fira Code', monospace;
      margin: 1rem 0;
      overflow-x: auto;
    }
    
    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    
    .btn-primary {
      background: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background: #2980b9;
    }
    
    .btn-success {
      background: #27ae60;
      color: white;
    }
    
    .btn-success:hover {
      background: #219a52;
    }
    
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .preset {
      height: 80px;
      border-radius: 8px;
      cursor: pointer;
      border: 3px solid transparent;
      transition: all 0.3s ease;
    }
    
    .preset:hover {
      transform: scale(1.05);
      border-color: #3498db;
    }
    
    .preset.active {
      border-color: #e74c3c;
      transform: scale(1.05);
    }
    
    .gradient-types {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }
    
    .gradient-type {
      padding: 0.75rem 1.5rem;
      background: #e2e8f0;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
    }
    
    .gradient-type.active {
      background: #3498db;
      color: white;
    }
    
    @media (max-width: 768px) {
      .controls {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🎨 CSS Gradient Generator</h1>
      <p>Create beautiful gradients with real-time preview</p>
    </div>
    
    <div class="generator-container">
      <div class="controls">
        <div class="control-group">
          <label class="control-label">Start Color</label>
          <input type="color" class="color-picker" id="color1" value="#667eea">
          
          <label class="control-label">End Color</label>
          <input type="color" class="color-picker" id="color2" value="#764ba2">
        </div>
        
        <div class="control-group">
          <label class="control-label">Gradient Angle</label>
          <input type="range" class="range-slider" id="angle" min="0" max="360" value="135">
          <div id="angle-value">135°</div>
          
          <label class="control-label">Gradient Type</label>
          <div class="gradient-types">
            <button class="gradient-type active" data-type="linear">Linear</button>
            <button class="gradient-type" data-type="radial">Radial</button>
            <button class="gradient-type" data-type="conic">Conic</button>
          </div>
        </div>
      </div>
      
      <div class="preview-area" id="gradient-preview">
        Your Gradient Preview
      </div>
      
      <div class="code-output" id="css-code">
        background: linear-gradient(135deg, #667eea, #764ba2);
      </div>
      
      <button class="btn btn-primary" onclick="copyCSS()">Copy CSS Code</button>
      <button class="btn btn-success" onclick="generateRandom()">Generate Random</button>
      
      <h3>Popular Presets</h3>
      <div class="preset-grid">
        <div class="preset" style="background: linear-gradient(135deg, #667eea, #764ba2);" data-colors="#667eea,#764ba2"></div>
        <div class="preset" style="background: linear-gradient(135deg, #f093fb, #f5576c);" data-colors="#f093fb,#f5576c"></div>
        <div class="preset" style="background: linear-gradient(135deg, #4facfe, #00f2fe);" data-colors="#4facfe,#00f2fe"></div>
        <div class="preset" style="background: linear-gradient(135deg, #43e97b, #38f9d7);" data-colors="#43e97b,#38f9d7"></div>
        <div class="preset" style="background: linear-gradient(135deg, #fa709a, #fee140);" data-colors="#fa709a,#fee140"></div>
        <div class="preset" style="background: linear-gradient(135deg, #30cfd0, #330867);" data-colors="#30cfd0,#330867"></div>
      </div>
    </div>
  </div>

  <script>
    const color1 = document.getElementById('color1');
    const color2 = document.getElementById('color2');
    const angle = document.getElementById('angle');
    const angleValue = document.getElementById('angle-value');
    const preview = document.getElementById('gradient-preview');
    const cssOutput = document.getElementById('css-code');
    const gradientTypes = document.querySelectorAll('.gradient-type');
    const presets = document.querySelectorAll('.preset');
    
    let currentType = 'linear';
    
    function updateGradient() {
      const gradient = generateGradient();
      preview.style.background = gradient;
      cssOutput.textContent = `background: ${gradient};`;
    }
    
    function generateGradient() {
      const angleVal = angle.value + 'deg';
      angleValue.textContent = angle.value + '°';
      
      switch(currentType) {
        case 'linear':
          return `linear-gradient(${angleVal}, ${color1.value}, ${color2.value})`;
        case 'radial':
          return `radial-gradient(circle, ${color1.value}, ${color2.value})`;
        case 'conic':
          return `conic-gradient(from ${angleVal}, ${color1.value}, ${color2.value})`;
      }
    }
    
    function copyCSS() {
      navigator.clipboard.writeText(cssOutput.textContent).then(() => {
        alert('CSS copied to clipboard!');
      });
    }
    
    function generateRandom() {
      const randomColor1 = '#' + Math.floor(Math.random()*16777215).toString(16);
      const randomColor2 = '#' + Math.floor(Math.random()*16777215).toString(16);
      const randomAngle = Math.floor(Math.random() * 360);
      
      color1.value = randomColor1;
      color2.value = randomColor2;
      angle.value = randomAngle;
      
      updateGradient();
    }
    
    // Event Listeners
    color1.addEventListener('input', updateGradient);
    color2.addEventListener('input', updateGradient);
    angle.addEventListener('input', updateGradient);
    
    gradientTypes.forEach(button => {
      button.addEventListener('click', () => {
        gradientTypes.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        currentType = button.dataset.type;
        updateGradient();
      });
    });
    
    presets.forEach(preset => {
      preset.addEventListener('click', () => {
        const colors = preset.dataset.colors.split(',');
        color1.value = colors[0];
        color2.value = colors[1];
        updateGradient();
      });
    });
    
    // Initialize
    updateGradient();
  </script>
</body>
</html>

Shadow & Border Radius Generator

Box Shadow Generator

Create perfect shadows with controls for offset, blur, spread, and color.

box-shadow: 10px 10px 20px rgba(0,0,0,0.1);

Border Radius Generator

Generate border radius values for all corners with individual controls.

border-radius: 8px 4px 12px 4px;

Combined Shadow & Radius Generator

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Shadow & Border Radius Generator</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .generator-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .generator-panel {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .control-group {
      margin-bottom: 2rem;
    }
    
    .control-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .range-slider {
      width: 100%;
      margin: 0.5rem 0;
    }
    
    .value-display {
      text-align: center;
      font-weight: 600;
      color: #3498db;
      margin-bottom: 1rem;
    }
    
    .preview-box {
      width: 200px;
      height: 200px;
      background: #3498db;
      margin: 2rem auto;
      border-radius: 8px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    .code-output {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 8px;
      font-family: 'Fira Code', monospace;
      margin: 1rem 0;
      overflow-x: auto;
    }
    
    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    
    .btn-primary {
      background: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background: #2980b9;
    }
    
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .preset {
      height: 60px;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 600;
      color: white;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    .preset:hover {
      transform: scale(1.05);
    }
    
    .color-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    
    .color-picker {
      width: 100%;
      height: 50px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    
    @media (max-width: 968px) {
      .generator-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🎭 Box Shadow & Border Radius</h1>
      <p>Generate perfect shadows and rounded corners</p>
    </div>
    
    <div class="generator-grid">
      <!-- Box Shadow Generator -->
      <div class="generator-panel">
        <h2>Box Shadow Generator</h2>
        
        <div class="control-group">
          <label class="control-label">Horizontal Offset</label>
          <input type="range" class="range-slider" id="h-offset" min="-50" max="50" value="10">
          <div class="value-display" id="h-value">10px</div>
          
          <label class="control-label">Vertical Offset</label>
          <input type="range" class="range-slider" id="v-offset" min="-50" max="50" value="10">
          <div class="value-display" id="v-value">10px</div>
          
          <label class="control-label">Blur Radius</label>
          <input type="range" class="range-slider" id="blur" min="0" max="100" value="20">
          <div class="value-display" id="blur-value">20px</div>
          
          <label class="control-label">Spread Radius</label>
          <input type="range" class="range-slider" id="spread" min="0" max="50" value="0">
          <div class="value-display" id="spread-value">0px</div>
          
          <label class="control-label">Shadow Color</label>
          <input type="color" class="color-picker" id="shadow-color" value="#000000">
          
          <label class="control-label">Shadow Opacity</label>
          <input type="range" class="range-slider" id="opacity" min="0" max="100" value="20">
          <div class="value-display" id="opacity-value">20%</div>
        </div>
        
        <div class="preview-box" id="shadow-preview">
          Shadow Preview
        </div>
        
        <div class="code-output" id="shadow-code">
          box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);
        </div>
        
        <button class="btn btn-primary" onclick="copyShadowCSS()">Copy CSS</button>
        
        <h3>Shadow Presets</h3>
        <div class="preset-grid">
          <div class="preset" style="box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: #3498db;" data-preset="0,2,4,0,0,0,0,0.1">Soft</div>
          <div class="preset" style="box-shadow: 0 4px 8px rgba(0,0,0,0.12); background: #e74c3c;" data-preset="0,4,8,0,0,0,0,0.12">Medium</div>
          <div class="preset" style="box-shadow: 0 8px 16px rgba(0,0,0,0.15); background: #2ecc71;" data-preset="0,8,16,0,0,0,0,0.15">Large</div>
          <div class="preset" style="box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); background: #9b59b6;" data-preset="0,10,20,0,0,0,0,0.19|0,6,6,0,0,0,0,0.23">Layered</div>
        </div>
      </div>
      
      <!-- Border Radius Generator -->
      <div class="generator-panel">
        <h2>Border Radius Generator</h2>
        
        <div class="control-group">
          <label class="control-label">Top Left</label>
          <input type="range" class="range-slider" id="tl-radius" min="0" max="100" value="8">
          <div class="value-display" id="tl-value">8px</div>
          
          <label class="control-label">Top Right</label>
          <input type="range" class="range-slider" id="tr-radius" min="0" max="100" value="8">
          <div class="value-display" id="tr-value">8px</div>
          
          <label class="control-label">Bottom Right</label>
          <input type="range" class="range-slider" id="br-radius" min="0" max="100" value="8">
          <div class="value-display" id="br-value">8px</div>
          
          <label class="control-label">Bottom Left</label>
          <input type="range" class="range-slider" id="bl-radius" min="0" max="100" value="8">
          <div class="value-display" id="bl-value">8px</div>
          
          <label class="control-label">All Corners</label>
          <input type="range" class="range-slider" id="all-radius" min="0" max="100" value="8">
          <div class="value-display" id="all-value">8px</div>
        </div>
        
        <div class="preview-box" id="radius-preview">
          Radius Preview
        </div>
        
        <div class="code-output" id="radius-code">
          border-radius: 8px;
        </div>
        
        <button class="btn btn-primary" onclick="copyRadiusCSS()">Copy CSS</button>
        
        <h3>Radius Presets</h3>
        <div class="preset-grid">
          <div class="preset" style="border-radius: 4px; background: #3498db;" data-radius="4">Small</div>
          <div class="preset" style="border-radius: 8px; background: #e74c3c;" data-radius="8">Medium</div>
          <div class="preset" style="border-radius: 16px; background: #2ecc71;" data-radius="16">Large</div>
          <div class="preset" style="border-radius: 50%; background: #9b59b6;" data-radius="50">Circle</div>
          <div class="preset" style="border-radius: 8px 0 8px 0; background: #f39c12;" data-radius="8,0,8,0">Mixed</div>
          <div class="preset" style="border-radius: 20px 0 0 20px; background: #1abc9c;" data-radius="20,0,0,20">Pill</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Box Shadow Elements
    const hOffset = document.getElementById('h-offset');
    const vOffset = document.getElementById('v-offset');
    const blur = document.getElementById('blur');
    const spread = document.getElementById('spread');
    const shadowColor = document.getElementById('shadow-color');
    const opacity = document.getElementById('opacity');
    
    const hValue = document.getElementById('h-value');
    const vValue = document.getElementById('v-value');
    const blurValue = document.getElementById('blur-value');
    const spreadValue = document.getElementById('spread-value');
    const opacityValue = document.getElementById('opacity-value');
    
    const shadowPreview = document.getElementById('shadow-preview');
    const shadowCode = document.getElementById('shadow-code');
    
    // Border Radius Elements
    const tlRadius = document.getElementById('tl-radius');
    const trRadius = document.getElementById('tr-radius');
    const brRadius = document.getElementById('br-radius');
    const blRadius = document.getElementById('bl-radius');
    const allRadius = document.getElementById('all-radius');
    
    const tlValue = document.getElementById('tl-value');
    const trValue = document.getElementById('tr-value');
    const brValue = document.getElementById('br-value');
    const blValue = document.getElementById('bl-value');
    const allValue = document.getElementById('all-value');
    
    const radiusPreview = document.getElementById('radius-preview');
    const radiusCode = document.getElementById('radius-code');
    
    // Box Shadow Functions
    function updateShadow() {
      const h = hOffset.value + 'px';
      const v = vOffset.value + 'px';
      const b = blur.value + 'px';
      const s = spread.value + 'px';
      const color = hexToRgba(shadowColor.value, opacity.value / 100);
      
      hValue.textContent = h;
      vValue.textContent = v;
      blurValue.textContent = b;
      spreadValue.textContent = s;
      opacityValue.textContent = opacity.value + '%';
      
      const shadow = `${h} ${v} ${b} ${s} ${color}`;
      shadowPreview.style.boxShadow = shadow;
      shadowCode.textContent = `box-shadow: ${shadow};`;
    }
    
    function hexToRgba(hex, opacity) {
      hex = hex.replace('#', '');
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
    }
    
    function copyShadowCSS() {
      navigator.clipboard.writeText(shadowCode.textContent).then(() => {
        alert('Box Shadow CSS copied to clipboard!');
      });
    }
    
    // Border Radius Functions
    function updateRadius() {
      const tl = tlRadius.value + 'px';
      const tr = trRadius.value + 'px';
      const br = brRadius.value + 'px';
      const bl = blRadius.value + 'px';
      
      tlValue.textContent = tl;
      trValue.textContent = tr;
      brValue.textContent = br;
      blValue.textContent = bl;
      allValue.textContent = allRadius.value + 'px';
      
      const radius = `${tl} ${tr} ${br} ${bl}`;
      radiusPreview.style.borderRadius = radius;
      radiusCode.textContent = `border-radius: ${radius};`;
    }
    
    function updateAllRadius() {
      const value = allRadius.value;
      tlRadius.value = value;
      trRadius.value = value;
      brRadius.value = value;
      blRadius.value = value;
      updateRadius();
    }
    
    function copyRadiusCSS() {
      navigator.clipboard.writeText(radiusCode.textContent).then(() => {
        alert('Border Radius CSS copied to clipboard!');
      });
    }
    
    // Event Listeners
    hOffset.addEventListener('input', updateShadow);
    vOffset.addEventListener('input', updateShadow);
    blur.addEventListener('input', updateShadow);
    spread.addEventListener('input', updateShadow);
    shadowColor.addEventListener('input', updateShadow);
    opacity.addEventListener('input', updateShadow);
    
    tlRadius.addEventListener('input', updateRadius);
    trRadius.addEventListener('input', updateRadius);
    brRadius.addEventListener('input', updateRadius);
    blRadius.addEventListener('input', updateRadius);
    allRadius.addEventListener('input', updateAllRadius);
    
    // Shadow Presets
    document.querySelectorAll('[data-preset]').forEach(preset => {
      preset.addEventListener('click', () => {
        const values = preset.dataset.preset.split('|');
        if (values.length === 1) {
          const [h, v, blur, spread, r, g, b, a] = values[0].split(',');
          hOffset.value = h;
          vOffset.value = v;
          blur.value = blur;
          spread.value = spread;
          opacity.value = a * 100;
          updateShadow();
        }
      });
    });
    
    // Radius Presets
    document.querySelectorAll('[data-radius]').forEach(preset => {
      preset.addEventListener('click', () => {
        const values = preset.dataset.radius.split(',');
        if (values.length === 1) {
          allRadius.value = values[0];
          updateAllRadius();
        } else {
          tlRadius.value = values[0];
          trRadius.value = values[1];
          brRadius.value = values[2];
          blRadius.value = values[3];
          updateRadius();
        }
      });
    });
    
    // Initialize
    updateShadow();
    updateRadius();
  </script>
</body>
</html>

Layout Generators

Flexbox & CSS Grid Generators

Create complex layouts visually with Flexbox and CSS Grid generators. Perfect for responsive design and modern layout patterns.

// Flexbox: Perfect for 1D layouts
display: flex;
justify-content: center;
align-items: center;
// CSS Grid: Perfect for 2D layouts
display: grid;
grid-template-columns: 1fr 1fr 1fr;

Interactive Layout Generators

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox & CSS Grid Generators</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    
    .generator-tabs {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }
    
    .tab {
      padding: 1rem 2rem;
      background: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .tab.active {
      background: #3498db;
      color: white;
    }
    
    .generator-panel {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      margin-bottom: 3rem;
    }
    
    .controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }
    
    .control-group {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 10px;
    }
    
    .control-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #2c3e50;
    }
    
    select, input {
      width: 100%;
      padding: 0.75rem;
      border: 2px solid #e2e8f0;
      border-radius: 6px;
      font-size: 1rem;
    }
    
    .preview-container {
      border: 3px dashed #e2e8f0;
      border-radius: 12px;
      padding: 2rem;
      margin: 2rem 0;
      min-height: 400px;
      background: #f8fafc;
    }
    
    .flex-preview {
      display: flex;
      gap: 1rem;
      height: 300px;
      padding: 1rem;
      border: 2px solid #3498db;
      border-radius: 8px;
    }
    
    .grid-preview {
      display: grid;
      gap: 1rem;
      height: 300px;
      padding: 1rem;
      border: 2px solid #e74c3c;
      border-radius: 8px;
    }
    
    .preview-item {
      background: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      border-radius: 6px;
      min-height: 60px;
    }
    
    .grid-preview .preview-item {
      background: #e74c3c;
    }
    
    .code-output {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 8px;
      font-family: 'Fira Code', monospace;
      margin: 1rem 0;
      overflow-x: auto;
    }
    
    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    
    .btn-primary {
      background: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background: #2980b9;
    }
    
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .preset {
      height: 80px;
      border-radius: 8px;
      cursor: pointer;
      border: 3px solid transparent;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: white;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    .preset:hover {
      transform: scale(1.05);
    }
    
    .item-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 1rem 0;
    }
    
    @media (max-width: 768px) {
      .controls-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>📐 Layout Generators</h1>
      <p>Flexbox and CSS Grid code generators</p>
    </div>
    
    <div class="generator-tabs">
      <button class="tab active" data-tab="flexbox">Flexbox Generator</button>
      <button class="tab" data-tab="grid">CSS Grid Generator</button>
    </div>
    
    <!-- Flexbox Generator -->
    <div class="generator-panel" id="flexbox-panel">
      <h2>Flexbox Layout Generator</h2>
      
      <div class="controls-grid">
        <div class="control-group">
          <label class="control-label">Flex Direction</label>
          <select id="flex-direction">
            <option value="row">Row</option>
            <option value="row-reverse">Row Reverse</option>
            <option value="column">Column</option>
            <option value="column-reverse">Column Reverse</option>
          </select>
        </div>
        
        <div class="control-group">
          <label class="control-label">Justify Content</label>
          <select id="justify-content">
            <option value="flex-start">Flex Start</option>
            <option value="flex-end">Flex End</option>
            <option value="center">Center</option>
            <option value="space-between">Space Between</option>
            <option value="space-around">Space Around</option>
            <option value="space-evenly">Space Evenly</option>
          </select>
        </div>
        
        <div class="control-group">
          <label class="control-label">Align Items</label>
          <select id="align-items">
            <option value="stretch">Stretch</option>
            <option value="flex-start">Flex Start</option>
            <option value="flex-end">Flex End</option>
            <option value="center">Center</option>
            <option value="baseline">Baseline</option>
          </select>
        </div>
        
        <div class="control-group">
          <label class="control-label">Flex Wrap</label>
          <select id="flex-wrap">
            <option value="nowrap">No Wrap</option>
            <option value="wrap">Wrap</option>
            <option value="wrap-reverse">Wrap Reverse</option>
          </select>
        </div>
      </div>
      
      <div class="item-controls">
        <div class="control-group">
          <label class="control-label">Number of Items</label>
          <input type="number" id="item-count" min="1" max="12" value="4">
        </div>
        
        <div class="control-group">
          <label class="control-label">Gap Size</label>
          <input type="range" id="flex-gap" min="0" max="50" value="10">
          <div id="gap-value">10px</div>
        </div>
      </div>
      
      <div class="preview-container">
        <div class="flex-preview" id="flex-preview">
          <div class="preview-item">1</div>
          <div class="preview-item">2</div>
          <div class="preview-item">3</div>
          <div class="preview-item">4</div>
        </div>
      </div>
      
      <div class="code-output" id="flex-code">
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 10px;
      </div>
      
      <button class="btn btn-primary" onclick="copyFlexCSS()">Copy Flexbox CSS</button>
      
      <h3>Flexbox Presets</h3>
      <div class="preset-grid">
        <div class="preset" style="background: #3498db;" data-preset="row,center,center,nowrap">Center</div>
        <div class="preset" style="background: #e74c3c;" data-preset="row,space-between,center,nowrap">Space Between</div>
        <div class="preset" style="background: #2ecc71;" data-preset="column,center,center,nowrap">Column</div>
        <div class="preset" style="background: #9b59b6;" data-preset="row,flex-start,flex-start,wrap">Wrap</div>
      </div>
    </div>
    
    <!-- CSS Grid Generator -->
    <div class="generator-panel" id="grid-panel" style="display: none;">
      <h2>CSS Grid Layout Generator</h2>
      
      <div class="controls-grid">
        <div class="control-group">
          <label class="control-label">Grid Template Columns</label>
          <input type="text" id="grid-columns" value="1fr 1fr 1fr" placeholder="e.g., 1fr 1fr 1fr">
        </div>
        
        <div class="control-group">
          <label class="control-label">Grid Template Rows</label>
          <input type="text" id="grid-rows" value="1fr 1fr" placeholder="e.g., 1fr 1fr">
        </div>
        
        <div class="control-group">
          <label class="control-label">Justify Items</label>
          <select id="justify-items">
            <option value="stretch">Stretch</option>
            <option value="start">Start</option>
            <option value="end">End</option>
            <option value="center">Center</option>
          </select>
        </div>
        
        <div class="control-group">
          <label class="control-label">Align Items</label>
          <select id="align-items-grid">
            <option value="stretch">Stretch</option>
            <option value="start">Start</option>
            <option value="end">End</option>
            <option value="center">Center</option>
          </select>
        </div>
      </div>
      
      <div class="item-controls">
        <div class="control-group">
          <label class="control-label">Gap Size</label>
          <input type="range" id="grid-gap" min="0" max="50" value="10">
          <div id="grid-gap-value">10px</div>
        </div>
      </div>
      
      <div class="preview-container">
        <div class="grid-preview" id="grid-preview">
          <div class="preview-item">1</div>
          <div class="preview-item">2</div>
          <div class="preview-item">3</div>
          <div class="preview-item">4</div>
          <div class="preview-item">5</div>
          <div class="preview-item">6</div>
        </div>
      </div>
      
      <div class="code-output" id="grid-code">
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        justify-items: stretch;
        align-items: stretch;
      </div>
      
      <button class="btn btn-primary" onclick="copyGridCSS()">Copy Grid CSS</button>
      
      <h3>Grid Presets</h3>
      <div class="preset-grid">
        <div class="preset" style="background: #3498db;" data-preset="1fr 1fr 1fr,1fr 1fr">3x2 Grid</div>
        <div class="preset" style="background: #e74c3c;" data-preset="1fr 2fr 1fr,1fr 1fr 1fr">Asymmetric</div>
        <div class="preset" style="background: #2ecc71;" data-preset="repeat(3, 100px),repeat(2, 100px)">Fixed Size</div>
        <div class="preset" style="background: #9b59b6;" data-preset="1fr,1fr 1fr 1fr">Sidebar</div>
      </div>
    </div>
  </div>

  <script>
    // Tab Switching
    const tabs = document.querySelectorAll('.tab');
    const flexboxPanel = document.getElementById('flexbox-panel');
    const gridPanel = document.getElementById('grid-panel');
    
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        if (tab.dataset.tab === 'flexbox') {
          flexboxPanel.style.display = 'block';
          gridPanel.style.display = 'none';
        } else {
          flexboxPanel.style.display = 'none';
          gridPanel.style.display = 'block';
        }
      });
    });
    
    // Flexbox Generator
    const flexDirection = document.getElementById('flex-direction');
    const justifyContent = document.getElementById('justify-content');
    const alignItems = document.getElementById('align-items');
    const flexWrap = document.getElementById('flex-wrap');
    const itemCount = document.getElementById('item-count');
    const flexGap = document.getElementById('flex-gap');
    const gapValue = document.getElementById('gap-value');
    const flexPreview = document.getElementById('flex-preview');
    const flexCode = document.getElementById('flex-code');
    
    function updateFlexbox() {
      const gap = flexGap.value + 'px';
      gapValue.textContent = gap;
      
      // Update preview styles
      flexPreview.style.flexDirection = flexDirection.value;
      flexPreview.style.justifyContent = justifyContent.value;
      flexPreview.style.alignItems = alignItems.value;
      flexPreview.style.flexWrap = flexWrap.value;
      flexPreview.style.gap = gap;
      
      // Update items count
      const currentItems = flexPreview.children.length;
      const targetCount = parseInt(itemCount.value);
      
      if (targetCount > currentItems) {
        for (let i = currentItems; i < targetCount; i++) {
          const item = document.createElement('div');
          item.className = 'preview-item';
          item.textContent = i + 1;
          flexPreview.appendChild(item);
        }
      } else if (targetCount < currentItems) {
        while (flexPreview.children.length > targetCount) {
          flexPreview.removeChild(flexPreview.lastChild);
        }
      }
      
      // Update code output
      flexCode.textContent = `display: flex;
flex-direction: ${flexDirection.value};
justify-content: ${justifyContent.value};
align-items: ${alignItems.value};
flex-wrap: ${flexWrap.value};
gap: ${gap};`;
    }
    
    function copyFlexCSS() {
      navigator.clipboard.writeText(flexCode.textContent).then(() => {
        alert('Flexbox CSS copied to clipboard!');
      });
    }
    
    // Grid Generator
    const gridColumns = document.getElementById('grid-columns');
    const gridRows = document.getElementById('grid-rows');
    const justifyItems = document.getElementById('justify-items');
    const alignItemsGrid = document.getElementById('align-items-grid');
    const gridGap = document.getElementById('grid-gap');
    const gridGapValue = document.getElementById('grid-gap-value');
    const gridPreview = document.getElementById('grid-preview');
    const gridCode = document.getElementById('grid-code');
    
    function updateGrid() {
      const gap = gridGap.value + 'px';
      gridGapValue.textContent = gap;
      
      // Update preview styles
      gridPreview.style.gridTemplateColumns = gridColumns.value;
      gridPreview.style.gridTemplateRows = gridRows.value;
      gridPreview.style.justifyItems = justifyItems.value;
      gridPreview.style.alignItems = alignItemsGrid.value;
      gridPreview.style.gap = gap;
      
      // Update code output
      gridCode.textContent = `display: grid;
grid-template-columns: ${gridColumns.value};
grid-template-rows: ${gridRows.value};
gap: ${gap};
justify-items: ${justifyItems.value};
align-items: ${alignItemsGrid.value};`;
    }
    
    function copyGridCSS() {
      navigator.clipboard.writeText(gridCode.textContent).then(() => {
        alert('Grid CSS copied to clipboard!');
      });
    }
    
    // Event Listeners
    flexDirection.addEventListener('change', updateFlexbox);
    justifyContent.addEventListener('change', updateFlexbox);
    alignItems.addEventListener('change', updateFlexbox);
    flexWrap.addEventListener('change', updateFlexbox);
    itemCount.addEventListener('input', updateFlexbox);
    flexGap.addEventListener('input', updateFlexbox);
    
    gridColumns.addEventListener('input', updateGrid);
    gridRows.addEventListener('input', updateGrid);
    justifyItems.addEventListener('change', updateGrid);
    alignItemsGrid.addEventListener('change', updateGrid);
    gridGap.addEventListener('input', updateGrid);
    
    // Presets
    document.querySelectorAll('[data-preset]').forEach(preset => {
      preset.addEventListener('click', () => {
        const values = preset.dataset.preset.split(',');
        
        if (preset.closest('#flexbox-panel')) {
          // Flexbox preset
          const [direction, justify, align, wrap] = values;
          flexDirection.value = direction;
          justifyContent.value = justify;
          alignItems.value = align;
          flexWrap.value = wrap;
          updateFlexbox();
        } else {
          // Grid preset
          const [columns, rows] = values;
          gridColumns.value = columns;
          gridRows.value = rows;
          updateGrid();
        }
      });
    });
    
    // Initialize
    updateFlexbox();
    updateGrid();
  </script>
</body>
</html>

More CSS Generators

🎯 Button Generator

  • Multiple button styles
  • Size and color controls
  • Hover effects
  • Icon integration
  • CSS and HTML output

📊 Loader/Spinner Generator

  1. Loading animations
  2. Customizable speed
  3. Multiple spinner types
  4. Size and color options
  5. Copy-paste ready

🎨 Text Shadow Generator

  • Text shadow effects
  • Multiple shadow layers
  • Color and blur controls
  • Real-time preview
  • Cross-browser code

💡 Pro Tips for Using CSS Generators

Workflow Optimization:

  • Use generators for rapid prototyping
  • Experiment with values visually
  • Save common presets for reuse
  • Combine multiple generators for complex designs

Best Practices:

  • Test generated code in multiple browsers
  • Optimize for performance
  • Use CSS variables for maintainability
  • Consider mobile responsiveness

Ready to Generate Perfect CSS? 🛠️

Use our interactive CSS generators to create beautiful designs faster. Get copy-paste ready code with real-time preview and no memorization required.

< PreviousCongratulations! 🎉 >