@jjlmoya/utils-developer 1.18.0 → 1.20.0

package/src/tool/cssBoxShadowGenerator/entry.ts

@@ -0,0 +1,29 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+import type { CssBoxShadowGeneratorUI } from './ui';
+
+export type CssBoxShadowGeneratorLocaleContent = ToolLocaleContent<CssBoxShadowGeneratorUI>;
+
+export const cssBoxShadowGenerator: DeveloperToolEntry<CssBoxShadowGeneratorUI> = {
+  id: 'css-box-shadow-generator',
+  icons: {
+    bg: 'mdi:cube-outline',
+    fg: 'mdi:blur',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

package/src/tool/cssBoxShadowGenerator/i18n/de.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-boxschatten-generator';
+const title = 'CSS Box Shadow Generator';
+const description = 'Gestalte geschichtete CSS-Schatten visuell mit Live-Vorschau, Schiebereglern, Farbwählern und Presets. Kopiere sauberes natives CSS sofort.';
+
+const howTo = [
+  { name: 'Preset wählen oder von Grund auf starten', text: 'Wähle aus den Presets Card, Float, Inset, Glow oder Layered, oder passe den Standardschatten mit den Reglern an.' },
+  { name: 'Schattenebenen hinzufügen und stapeln', text: 'Klicke + für weitere Ebenen (bis zu 5). Wähle jede Ebene aus, um Offset, Blur, Spread, Farbe und Deckkraft zu bearbeiten.' },
+  { name: 'Inset und Hintergrund umschalten', text: 'Aktiviere die Inset-Checkbox für innere Schatten. Ändere die Hintergrundfarbe der Vorschau.' },
+  { name: 'CSS kopieren', text: 'Wenn die Vorschau deinem Design entspricht, kopiere das generierte CSS und füge es in dein Stylesheet ein.' },
+];
+
+const faq = [
+  { question: 'Kann ich mehrere Schatten auf ein Element anwenden?', answer: 'Ja. CSS erlaubt kommagetrennte box-shadow-Werte. Dieses Tool lässt dich bis zu 5 Ebenen stapeln, jede mit unabhängigen Steuerelementen.' },
+  { question: 'Was bewirkt ein negativer Spread-Wert?', answer: 'Ein negativer Spread verkleinert den Schatten nach innen vor dem Weichzeichnen. Nützlich für subtile schwebende Effekte.' },
+  { question: 'Wofür ist die Inset-Option?', answer: 'Inset-Schatten werden innerhalb des Elementrands gerendert und erzeugen einen vertieften Look. Ideal für Formulareingaben und gedrückte Karten.' },
+  { question: 'Hat das generierte CSS Framework-Abhängigkeiten?', answer: 'Nein. Das Ergebnis ist reines natives CSS. Verwende es in jedem Projekt mit Standard-CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Weichzeichner',
+  spreadLabel: 'Ausbreitung',
+  opacityLabel: 'Deckkraft',
+  insetLabel: 'Innen',
+  addLayer: 'Ebene hinzu',
+  removeLayer: 'Ebene entfernen',
+  resetAll: 'Zurücksetzen',
+  codeTitle: 'Generiertes CSS',
+  copyCode: 'CSS kopieren',
+  copied: 'Kopiert!',
+  previewLabel: 'Vorschau',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Ebenen',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Ebene',
+  bgColorLabel: 'Hintergrund',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS Box-Shadow Generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow Referenzen',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Gestalte CSS-Schatten visuell statt Werte zu raten', level: 2 },
+    { type: 'paragraph', html: '<strong>box-shadow</strong> von Hand anzupassen ist mühsam. Offset X, Offset Y, Blur, Spread, Farbe, Deckkraft und Inset interagieren subtil. Dieser Generator lässt dich mehrere Schatten stapeln, live ansehen und produktionsreifes CSS kopieren.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Schattenebenen pro Element', icon: 'mdi:layers' }, { value: 'Live', label: 'Vorschau bei jeder Änderung', icon: 'mdi:eye' }, { value: '5', label: 'Schnellstart-Presets', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Mehrere Schatten für realistische Tiefe stapeln', level: 3 },
+    { type: 'paragraph', html: 'Echte Schatten sind selten ein einheitlicher Blur. Einen engen Schatten nah am Element mit einem weicheren, breiteren zu stapeln erzeugt natürliche Tiefe. Nutze <strong>+</strong> zum Hinzufügen.' },
+    { type: 'table', headers: ['Steuerung', 'CSS-Wert', 'Effekt'], rows: [['Offset X', 'Erste Länge', 'Horizontale Verschiebung.'], ['Offset Y', 'Zweite Länge', 'Vertikale Verschiebung.'], ['Weichzeichner', 'Dritte Länge', 'Blur-Radius. Größer = weicher.'], ['Ausbreitung', 'Vierte Länge', 'Vergrößert oder verkleinert den Schatten.'], ['Farbe & Deckkraft', 'rgba()', 'Schattenfarbe mit unabhängiger Deckkraft.'], ['Innen', 'inset', 'Rendert den Schatten innerhalb des Elements.']] },
+    { type: 'summary', title: 'Empfohlener Workflow', items: ['Starte mit einem Preset.', 'Füge Ebenen für realistische Tiefe hinzu.', 'Nutze negativen Spread für schwebende Karten.', 'Kopiere das CSS und füge es ein.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/en.ts

@@ -0,0 +1,71 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-box-shadow-generator';
+const title = 'CSS Box Shadow Generator';
+const description = 'Design layered CSS box shadows visually with live preview, sliders, color pickers and presets. Copy clean native CSS instantly.';
+
+const howTo = [
+  { name: 'Pick a preset or start from scratch', text: 'Choose from card, float, inset, glow, or layered presets, or adjust the default shadow with the sliders.' },
+  { name: 'Add and layer shadows', text: 'Click + to add more shadow layers (up to 5). Select each layer to edit its offset, blur, spread, color and opacity independently.' },
+  { name: 'Toggle inset and background', text: 'Enable the inset checkbox for inner shadows. Change the preview background color to match your design.' },
+  { name: 'Copy the CSS', text: 'When the preview matches your design, copy the generated box-shadow CSS and paste it into your stylesheet.' },
+];
+
+const faq = [
+  { question: 'Can I use multiple shadows on one element?', answer: 'Yes. CSS supports comma-separated box-shadow values. This tool lets you stack up to 5 layers, each with independent controls. Select a layer tab to edit it.' },
+  { question: 'What does a negative spread value do?', answer: 'A negative spread shrinks the shadow inward before blurring, making it appear smaller than the element. This is useful for subtle floating effects where the shadow sits close to the edges.' },
+  { question: 'Why use the inset option?', answer: 'Inset shadows render inside the element border, creating a pressed or recessed look. They are ideal for form inputs, sunken cards, and depth illusions on flat surfaces.' },
+  { question: 'Is the generated CSS framework-independent?', answer: 'Yes. The output is pure native CSS box-shadow syntax. Use it in any project that supports standard CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Blur',
+  spreadLabel: 'Spread',
+  opacityLabel: 'Opacity',
+  insetLabel: 'Color & Inset',
+  addLayer: 'Add layer',
+  removeLayer: 'Remove layer',
+  resetAll: 'Reset',
+  codeTitle: 'Generated CSS',
+  copyCode: 'Copy CSS',
+  copied: 'Copied!',
+  previewLabel: 'Layers',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Layered',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Layer',
+  bgColorLabel: 'BG Color',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS Box Shadow Generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box Shadow References',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Design box shadows visually instead of guessing values', level: 2 },
+    { type: 'paragraph', html: 'Tweaking <strong>box-shadow</strong> by hand is tedious. Offset X, offset Y, blur radius, spread radius, color, opacity and inset all interact in subtle ways. This visual generator lets you stack multiple shadows, preview them live, and copy production-ready CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Shadow layers per element', icon: 'mdi:layers' }, { value: 'Live', label: 'Preview updates on every slider move', icon: 'mdi:eye' }, { value: '5', label: 'Quick-start presets', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Layer multiple shadows for realistic depth', level: 3 },
+    { type: 'paragraph', html: 'Real-world shadows are rarely a single uniform blur. Layering a tight shadow close to the element with a softer, wider shadow farther away creates natural depth. Use the <strong>+</strong> button to add layers and the layer tabs to switch between them.' },
+    { type: 'title', text: 'Understanding each control', level: 3 },
+    { type: 'table', headers: ['Control', 'CSS value', 'Effect'], rows: [['Offset X', 'First length', 'Horizontal displacement. Positive moves shadow right.'], ['Offset Y', 'Second length', 'Vertical displacement. Positive moves shadow down.'], ['Blur', 'Third length', 'Blur radius. Larger creates softer, wider shadows.'], ['Spread', 'Fourth length', 'Expands or shrinks the shadow. Negative shrinks.'], ['Color & Opacity', 'rgba()', 'Shadow color with independent opacity control.'], ['Inset', 'inset keyword', 'Renders the shadow inside the element border.']] },
+    { type: 'tip', title: 'Use a subtle background grid', html: 'The preview area shows a dotted grid so you can see how shadows extend beyond the element. Use negative spread values for shadows that sit tighter than the element itself.' },
+    { type: 'summary', title: 'Best practice workflow', items: ['Start with a preset that matches your design direction.', 'Add layers to build realistic depth (tight shadow + soft shadow + ambient).', 'Use a negative spread on the soft shadow for a floating card effect.', 'Copy the generated CSS and paste it into your stylesheet.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/es.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generador-sombras-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Diseña sombras CSS por capas visualmente con previsualización en vivo, sliders, selectores de color y presets. Copia CSS nativo limpio al instante.';
+
+const howTo = [
+  { name: 'Elige un preset o empieza desde cero', text: 'Selecciona entre los presets Card, Float, Inset, Glow o Layered, o ajusta la sombra por defecto con los sliders.' },
+  { name: 'Añade y combina capas de sombra', text: 'Pulsa + para añadir más capas (hasta 5). Selecciona cada capa para editar su offset, blur, spread, color y opacidad.' },
+  { name: 'Alterna inset y color de fondo', text: 'Activa el checkbox inset para sombras interiores. Cambia el color de fondo de la previsualización.' },
+  { name: 'Copia el CSS', text: 'Cuando la previsualización coincida con tu diseño, copia el CSS generado y pégalo en tu stylesheet.' },
+];
+
+const faq = [
+  { question: '¿Puedo usar múltiples sombras en un elemento?', answer: 'Sí. CSS permite valores box-shadow separados por comas. Esta herramienta te deja apilar hasta 5 capas, cada una con controles independientes.' },
+  { question: '¿Qué hace un valor de spread negativo?', answer: 'Un spread negativo encoge la sombra hacia dentro antes de difuminar, haciendo que parezca más pequeña que el elemento. Ideal para efectos flotantes sutiles.' },
+  { question: '¿Para qué sirve la opción inset?', answer: 'Las sombras inset se renderizan dentro del borde del elemento, creando un efecto hundido. Son ideales para inputs de formulario y tarjetas presionadas.' },
+  { question: '¿El CSS generado tiene dependencias de framework?', answer: 'No. El resultado es CSS nativo puro. Úsalo en cualquier proyecto que soporte CSS estándar.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Desenfoque',
+  spreadLabel: 'Expansión',
+  opacityLabel: 'Opacidad',
+  insetLabel: 'Interior',
+  addLayer: 'Añadir capa',
+  removeLayer: 'Quitar capa',
+  resetAll: 'Restablecer',
+  codeTitle: 'CSS Generado',
+  copyCode: 'Copiar CSS',
+  copied: '¡Copiado!',
+  previewLabel: 'Previsualización',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Capas',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Capa',
+  bgColorLabel: 'Fondo',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ del Generador de Sombras CSS',
+  faq,
+  bibliographyTitle: 'Referencias de Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Diseña sombras CSS visualmente en vez de adivinar valores', level: 2 },
+    { type: 'paragraph', html: 'Ajustar <strong>box-shadow</strong> a mano es tedioso. Offset X, offset Y, blur, spread, color, opacidad e inset interactúan de formas sutiles. Este generador visual te permite apilar múltiples sombras, previsualizarlas en vivo y copiar CSS listo para producción.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Capas de sombra por elemento', icon: 'mdi:layers' }, { value: 'En vivo', label: 'Previsualización con cada cambio', icon: 'mdi:eye' }, { value: '5', label: 'Presets rápidos', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Apila múltiples sombras para profundidad realista', level: 3 },
+    { type: 'paragraph', html: 'Las sombras del mundo real rara vez son un blur uniforme. Apilar una sombra ajustada cerca del elemento con otra más suave y amplia crea profundidad natural. Usa el botón <strong>+</strong> para añadir capas y las pestañas para cambiar entre ellas.' },
+    { type: 'table', headers: ['Control', 'Valor CSS', 'Efecto'], rows: [['Offset X', 'Primera longitud', 'Desplazamiento horizontal. Positivo mueve la sombra a la derecha.'], ['Offset Y', 'Segunda longitud', 'Desplazamiento vertical. Positivo mueve la sombra hacia abajo.'], ['Desenfoque', 'Tercera longitud', 'Radio de blur. Más grande crea sombras más suaves.'], ['Expansión', 'Cuarta longitud', 'Expande o encoge la sombra. Negativo encoge.'], ['Color y Opacidad', 'rgba()', 'Color de sombra con control de opacidad independiente.'], ['Interior', 'inset', 'Renderiza la sombra dentro del borde del elemento.']] },
+    { type: 'summary', title: 'Flujo de trabajo recomendado', items: ['Empieza con un preset que coincida con tu dirección de diseño.', 'Añade capas para construir profundidad realista.', 'Usa spread negativo en la sombra suave para un efecto de tarjeta flotante.', 'Copia el CSS generado y pégalo en tu stylesheet.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/fr.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generateur-ombres-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Concevez des ombres CSS en couches visuellement avec aperçu en direct, curseurs, sélecteurs de couleur et presets. Copiez du CSS natif propre instantanément.';
+
+const howTo = [
+  { name: 'Choisissez un preset ou partez de zéro', text: 'Sélectionnez parmi les presets Card, Float, Inset, Glow ou Layered, ou ajustez l\'ombre par défaut avec les curseurs.' },
+  { name: 'Ajoutez et superposez des couches', text: 'Cliquez + pour ajouter des couches (jusqu\'à 5). Sélectionnez chaque couche pour modifier son offset, blur, spread, couleur et opacité.' },
+  { name: 'Activez inset et changez l\'arrière-plan', text: 'Cochez inset pour les ombres intérieures. Modifiez la couleur de fond de l\'aperçu.' },
+  { name: 'Copiez le CSS', text: 'Quand l\'aperçu correspond à votre design, copiez le CSS généré et collez-le dans votre feuille de style.' },
+];
+
+const faq = [
+  { question: 'Puis-je utiliser plusieurs ombres sur un élément ?', answer: 'Oui. CSS permet des valeurs box-shadow séparées par des virgules. Cet outil vous permet d\'empiler jusqu\'à 5 couches avec des contrôles indépendants.' },
+  { question: 'Que fait une valeur de spread négative ?', answer: 'Un spread négatif rétrécit l\'ombre vers l\'intérieur avant le flou. Utile pour des effets flottants subtils.' },
+  { question: 'À quoi sert l\'option inset ?', answer: 'Les ombres inset sont rendues à l\'intérieur de la bordure, créant un effet enfoncé. Idéal pour les champs de formulaire et les cartes pressées.' },
+  { question: 'Le CSS généré a-t-il des dépendances de framework ?', answer: 'Non. Le résultat est du CSS natif pur. Utilisez-le dans tout projet avec du CSS standard.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Flou',
+  spreadLabel: 'Expansion',
+  opacityLabel: 'Opacité',
+  insetLabel: 'Intérieur',
+  addLayer: 'Ajouter couche',
+  removeLayer: 'Retirer couche',
+  resetAll: 'Réinitialiser',
+  codeTitle: 'CSS Généré',
+  copyCode: 'Copier CSS',
+  copied: 'Copié !',
+  previewLabel: 'Aperçu',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Couches',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Couche',
+  bgColorLabel: 'Fond',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ du Générateur d\'Ombres CSS',
+  faq,
+  bibliographyTitle: 'Références Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Concevez des ombres CSS visuellement au lieu de deviner les valeurs', level: 2 },
+    { type: 'paragraph', html: 'Ajuster <strong>box-shadow</strong> à la main est fastidieux. Ce générateur visuel vous permet d\'empiler plusieurs ombres, de les prévisualiser en direct et de copier du CSS prêt pour la production.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Couches d\'ombre par élément', icon: 'mdi:layers' }, { value: 'Direct', label: 'Aperçu à chaque modification', icon: 'mdi:eye' }, { value: '5', label: 'Presets rapides', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Superposez plusieurs ombres pour une profondeur réaliste', level: 3 },
+    { type: 'paragraph', html: 'Les ombres réelles sont rarement un flou uniforme. Superposer une ombre serrée près de l\'élément avec une ombre plus douce et large crée une profondeur naturelle. Utilisez <strong>+</strong> pour ajouter des couches.' },
+    { type: 'table', headers: ['Contrôle', 'Valeur CSS', 'Effet'], rows: [['Offset X', '1re longueur', 'Déplacement horizontal.'], ['Offset Y', '2e longueur', 'Déplacement vertical.'], ['Flou', '3e longueur', 'Rayon de flou.'], ['Expansion', '4e longueur', 'Agrandit ou réduit l\'ombre.'], ['Couleur & Opacité', 'rgba()', 'Couleur avec opacité indépendante.'], ['Intérieur', 'inset', 'Ombre à l\'intérieur de l\'élément.']] },
+    { type: 'summary', title: 'Workflow recommandé', items: ['Commencez par un preset.', 'Ajoutez des couches pour une profondeur réaliste.', 'Utilisez un spread négatif pour un effet de carte flottante.', 'Copiez le CSS généré et collez-le.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/id.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generator-bayangan-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Desain bayangan CSS berlapis secara visual dengan pratinjau langsung, slider, pemilih warna, dan preset. Salin CSS native bersih secara instan.';
+
+const howTo = [
+  { name: 'Pilih preset atau mulai dari awal', text: 'Pilih dari preset Card, Float, Inset, Glow, atau Layered, atau sesuaikan bayangan default dengan slider.' },
+  { name: 'Tambahkan dan tumpuk lapisan', text: 'Klik + untuk menambah lapisan (hingga 5). Pilih setiap lapisan untuk mengedit offset, blur, spread, warna, dan opasitas.' },
+  { name: 'Aktifkan inset dan ubah latar', text: 'Centang inset untuk bayangan dalam. Ubah warna latar pratinjau.' },
+  { name: 'Salin CSS', text: 'Saat pratinjau sesuai dengan desain Anda, salin CSS yang dihasilkan dan tempel ke stylesheet Anda.' },
+];
+
+const faq = [
+  { question: 'Bisakah saya menggunakan beberapa bayangan pada satu elemen?', answer: 'Ya. CSS mengizinkan nilai box-shadow yang dipisahkan koma. Alat ini memungkinkan Anda menumpuk hingga 5 lapisan dengan kontrol independen.' },
+  { question: 'Apa yang dilakukan nilai spread negatif?', answer: 'Spread negatif mengecilkan bayangan ke dalam sebelum diburamkan. Berguna untuk efek mengambang yang halus.' },
+  { question: 'Untuk apa opsi inset?', answer: 'Bayangan inset dirender di dalam batas elemen, menciptakan tampilan cekung. Ideal untuk input formulir dan kartu yang ditekan.' },
+  { question: 'Apakah CSS yang dihasilkan memiliki ketergantungan framework?', answer: 'Tidak. Hasilnya adalah CSS native murni. Gunakan di proyek apa pun dengan CSS standar.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Blur',
+  spreadLabel: 'Sebaran',
+  opacityLabel: 'Opasitas',
+  insetLabel: 'Dalam',
+  addLayer: 'Tambah lapisan',
+  removeLayer: 'Hapus lapisan',
+  resetAll: 'Reset',
+  codeTitle: 'CSS Dihasilkan',
+  copyCode: 'Salin CSS',
+  copied: 'Tersalin!',
+  previewLabel: 'Pratinjau',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Lapisan',
+  presetsLabel: 'Preset',
+  layerPrefix: 'Lapisan',
+  bgColorLabel: 'Latar',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ Generator Bayangan CSS',
+  faq,
+  bibliographyTitle: 'Referensi Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Desain bayangan CSS secara visual daripada menebak nilai', level: 2 },
+    { type: 'paragraph', html: 'Menyesuaikan <strong>box-shadow</strong> secara manual itu membosankan. Generator visual ini memungkinkan Anda menumpuk beberapa bayangan, melihatnya langsung, dan menyalin CSS siap produksi.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Lapisan bayangan per elemen', icon: 'mdi:layers' }, { value: 'Live', label: 'Pratinjau setiap perubahan', icon: 'mdi:eye' }, { value: '5', label: 'Preset cepat', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Tumpuk beberapa bayangan untuk kedalaman realistis', level: 3 },
+    { type: 'paragraph', html: 'Bayangan nyata jarang berupa blur seragam. Menumpuk bayangan ketat dekat elemen dengan yang lebih lembut dan lebar menciptakan kedalaman alami. Gunakan <strong>+</strong> untuk menambah lapisan.' },
+    { type: 'table', headers: ['Kontrol', 'Nilai CSS', 'Efek'], rows: [['Offset X', 'Panjang ke-1', 'Pergeseran horizontal.'], ['Offset Y', 'Panjang ke-2', 'Pergeseran vertikal.'], ['Blur', 'Panjang ke-3', 'Radius blur.'], ['Sebaran', 'Panjang ke-4', 'Memperbesar atau mengecilkan bayangan.'], ['Warna & Opasitas', 'rgba()', 'Warna bayangan dengan opasitas independen.'], ['Dalam', 'inset', 'Bayangan di dalam batas elemen.']] },
+    { type: 'summary', title: 'Alur kerja yang direkomendasikan', items: ['Mulai dengan preset.', 'Tambahkan lapisan untuk kedalaman realistis.', 'Gunakan spread negatif untuk efek kartu mengambang.', 'Salin CSS yang dihasilkan dan tempel.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/it.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generatore-ombre-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Progetta ombre CSS a strati visivamente con anteprima in tempo reale, slider, selettori di colore e preset. Copia CSS nativo pulito all\'istante.';
+
+const howTo = [
+  { name: 'Scegli un preset o parti da zero', text: 'Seleziona tra i preset Card, Float, Inset, Glow o Layered, o regola l\'ombra predefinita con gli slider.' },
+  { name: 'Aggiungi e sovrapponi strati', text: 'Clicca + per aggiungere strati (fino a 5). Seleziona ogni strato per modificarne offset, blur, spread, colore e opacità.' },
+  { name: 'Attiva inset e cambia lo sfondo', text: 'Spunta inset per ombre interne. Cambia il colore di sfondo dell\'anteprima.' },
+  { name: 'Copia il CSS', text: 'Quando l\'anteprima corrisponde al tuo design, copia il CSS generato e incollalo nel tuo foglio di stile.' },
+];
+
+const faq = [
+  { question: 'Posso usare più ombre su un elemento?', answer: 'Sì. CSS permette valori box-shadow separati da virgole. Questo strumento ti permette di impilare fino a 5 strati con controlli indipendenti.' },
+  { question: 'Cosa fa un valore spread negativo?', answer: 'Uno spread negativo restringe l\'ombra verso l\'interno prima della sfocatura. Utile per effetti fluttuanti sottili.' },
+  { question: 'A cosa serve l\'opzione inset?', answer: 'Le ombre inset vengono renderizzate all\'interno del bordo, creando un effetto incassato. Ideale per input e card premute.' },
+  { question: 'Il CSS generato ha dipendenze da framework?', answer: 'No. Il risultato è CSS nativo puro. Usalo in qualsiasi progetto con CSS standard.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Sfocatura',
+  spreadLabel: 'Espansione',
+  opacityLabel: 'Opacità',
+  insetLabel: 'Interno',
+  addLayer: 'Aggiungi strato',
+  removeLayer: 'Rimuovi strato',
+  resetAll: 'Ripristina',
+  codeTitle: 'CSS Generato',
+  copyCode: 'Copia CSS',
+  copied: 'Copiato!',
+  previewLabel: 'Anteprima',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Strati',
+  presetsLabel: 'Preset',
+  layerPrefix: 'Strato',
+  bgColorLabel: 'Sfondo',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ Generatore di Ombre CSS',
+  faq,
+  bibliographyTitle: 'Riferimenti Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Progetta ombre CSS visivamente invece di indovinare i valori', level: 2 },
+    { type: 'paragraph', html: 'Regolare <strong>box-shadow</strong> a mano è noioso. Questo generatore ti permette di impilare più ombre, vederle in diretta e copiare CSS pronto per la produzione.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Strati ombra per elemento', icon: 'mdi:layers' }, { value: 'Live', label: 'Anteprima ad ogni modifica', icon: 'mdi:eye' }, { value: '5', label: 'Preset rapidi', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Sovrapponi più ombre per profondità realistica', level: 3 },
+    { type: 'paragraph', html: 'Le ombre reali non sono mai un blur uniforme. Sovrapporre un\'ombra stretta vicino all\'elemento con una più morbida e ampia crea profondità naturale. Usa <strong>+</strong> per aggiungere strati.' },
+    { type: 'table', headers: ['Controllo', 'Valore CSS', 'Effetto'], rows: [['Offset X', '1a lunghezza', 'Spostamento orizzontale.'], ['Offset Y', '2a lunghezza', 'Spostamento verticale.'], ['Sfocatura', '3a lunghezza', 'Raggio di blur.'], ['Espansione', '4a lunghezza', 'Allarga o restringe l\'ombra.'], ['Colore & Opacità', 'rgba()', 'Colore ombra con opacità indipendente.'], ['Interno', 'inset', 'Ombra dentro il bordo dell\'elemento.']] },
+    { type: 'summary', title: 'Workflow consigliato', items: ['Inizia con un preset.', 'Aggiungi strati per profondità realistica.', 'Usa spread negativo per effetto card fluttuante.', 'Copia il CSS e incollalo.'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/ja.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-box-shadow-generator';
+const title = 'CSS Box Shadow Generator';
+const description = 'レイヤー状のCSSシャドウをライブプレビュー、スライダー、カラーピッカー、プリセットで視覚的にデザイン。クリーンなネイティブCSSを即座にコピー。';
+
+const howTo = [
+  { name: 'プリセットを選ぶかゼロから始める', text: 'Card、Float、Inset、Glow、Layeredのプリセットから選ぶか、スライダーでデフォルトの影を調整します。' },
+  { name: 'レイヤーを追加して重ねる', text: '+をクリックしてレイヤーを追加（最大5つ）。各レイヤーを選択してオフセット、ぼかし、スプレッド、色、不透明度を編集します。' },
+  { name: 'インセットと背景を切り替え', text: '内側の影にはinsetをチェック。プレビューの背景色を変更します。' },
+  { name: 'CSSをコピー', text: 'プレビューがデザインと一致したら、生成されたCSSをコピーしてスタイルシートに貼り付けます。' },
+];
+
+const faq = [
+  { question: '1つの要素に複数の影を使えますか？', answer: 'はい。CSSはカンマ区切りのbox-shadow値をサポートしています。このツールでは独立したコントロールで最大5つのレイヤーを重ねられます。' },
+  { question: '負のスプレッド値は何をしますか？', answer: '負のスプレッドはぼかしの前に影を内側に縮めます。微妙な浮遊効果に便利です。' },
+  { question: 'insetオプションの用途は？', answer: 'inset影は要素の境界の内側に描画され、くぼんだ外観を作ります。フォーム入力や押し込まれたカードに最適です。' },
+  { question: '生成されたCSSにフレームワーク依存はありますか？', answer: 'いいえ。結果は純粋なネイティブCSSです。標準CSSを使用するあらゆるプロジェクトで使用できます。' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'オフセットX',
+  offsetYLabel: 'オフセットY',
+  blurLabel: 'ぼかし',
+  spreadLabel: 'スプレッド',
+  opacityLabel: '不透明度',
+  insetLabel: '内側',
+  addLayer: 'レイヤー追加',
+  removeLayer: 'レイヤー削除',
+  resetAll: 'リセット',
+  codeTitle: '生成されたCSS',
+  copyCode: 'CSSをコピー',
+  copied: 'コピーしました！',
+  previewLabel: 'プレビュー',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'レイヤー',
+  presetsLabel: 'プリセット',
+  layerPrefix: 'レイヤー',
+  bgColorLabel: '背景',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSSボックスシャドウジェネレーター FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow リファレンス',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: '値を推測せずにCSSシャドウを視覚的にデザイン', level: 2 },
+    { type: 'paragraph', html: '<strong>box-shadow</strong>を手動で調整するのは面倒です。このビジュアルジェネレーターを使えば、複数の影を重ねてライブで確認し、本番対応のCSSをコピーできます。' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: '要素あたりの影レイヤー', icon: 'mdi:layers' }, { value: 'ライブ', label: '変更ごとにプレビュー更新', icon: 'mdi:eye' }, { value: '5', label: 'クイックプリセット', icon: 'mdi:star' }] },
+    { type: 'title', text: '複数の影を重ねてリアルな奥行きを', level: 3 },
+    { type: 'paragraph', html: '実際の影は均一なぼかしではありません。要素の近くにタイトな影を、より柔らかく広い影と重ねることで自然な奥行きが生まれます。<strong>+</strong>でレイヤーを追加できます。' },
+    { type: 'table', headers: ['コントロール', 'CSS値', '効果'], rows: [['オフセットX', '1番目の長さ', '水平方向の変位。'], ['オフセットY', '2番目の長さ', '垂直方向の変位。'], ['ぼかし', '3番目の長さ', 'ぼかしの半径。'], ['スプレッド', '4番目の長さ', '影を拡大または縮小。'], ['色と不透明度', 'rgba()', '独立した不透明度の影の色。'], ['内側', 'inset', '要素の境界内に影を描画。']] },
+    { type: 'summary', title: '推奨ワークフロー', items: ['プリセットから始める。', 'レイヤーを追加してリアルな奥行きを。', '浮遊カード効果には負のスプレッドを使用。', '生成されたCSSをコピーして貼り付け。'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/i18n/ko.ts

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-box-shadow-generator';
+const title = 'CSS Box Shadow Generator';
+const description = '실시간 미리보기, 슬라이더, 색상 선택기, 프리셋으로 레이어형 CSS 그림자를 시각적으로 디자인하세요. 깨끗한 네이티브 CSS를 즉시 복사하세요.';
+
+const howTo = [
+  { name: '프리셋을 선택하거나 처음부터 시작', text: 'Card, Float, Inset, Glow, Layered 프리셋 중에서 선택하거나 슬라이더로 기본 그림자를 조정하세요.' },
+  { name: '레이어 추가 및 쌓기', text: '+를 클릭하여 레이어를 추가하세요(최대 5개). 각 레이어를 선택하여 오프셋, 블러, 스프레드, 색상, 불투명도를 편집하세요.' },
+  { name: 'Inset 및 배경 전환', text: '내부 그림자를 위해 inset을 체크하세요. 미리보기 배경색을 변경하세요.' },
+  { name: 'CSS 복사', text: '미리보기가 디자인과 일치하면 생성된 CSS를 복사하여 스타일시트에 붙여넣으세요.' },
+];
+
+const faq = [
+  { question: '하나의 요소에 여러 그림자를 사용할 수 있나요?', answer: '예. CSS는 쉼표로 구분된 box-shadow 값을 지원합니다. 이 도구를 사용하면 독립적인 컨트롤로 최대 5개의 레이어를 쌓을 수 있습니다.' },
+  { question: '음수 스프레드 값은 무엇을 하나요?', answer: '음수 스프레드는 블러 전에 그림자를 안쪽으로 축소합니다. 미묘한 떠 있는 효과에 유용합니다.' },
+  { question: 'inset 옵션의 용도는 무엇인가요?', answer: 'inset 그림자는 요소 경계 내부에 렌더링되어 움푹 들어간 모양을 만듭니다. 폼 입력 및 눌린 카드에 이상적입니다.' },
+  { question: '생성된 CSS에 프레임워크 종속성이 있나요?', answer: '아니요. 결과는 순수 네이티브 CSS입니다. 표준 CSS를 사용하는 모든 프로젝트에서 사용하세요.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: '오프셋 X',
+  offsetYLabel: '오프셋 Y',
+  blurLabel: '블러',
+  spreadLabel: '스프레드',
+  opacityLabel: '불투명도',
+  insetLabel: '내부',
+  addLayer: '레이어 추가',
+  removeLayer: '레이어 제거',
+  resetAll: '초기화',
+  codeTitle: '생성된 CSS',
+  copyCode: 'CSS 복사',
+  copied: '복사됨!',
+  previewLabel: '미리보기',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: '레이어',
+  presetsLabel: '프리셋',
+  layerPrefix: '레이어',
+  bgColorLabel: '배경',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS 박스 섀도우 생성기 FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow 참조',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: '값을 추측하지 않고 CSS 그림자를 시각적으로 디자인하세요', level: 2 },
+    { type: 'paragraph', html: '<strong>box-shadow</strong>를 수동으로 조정하는 것은 지루합니다. 이 시각적 생성기를 사용하면 여러 그림자를 쌓고 실시간으로 확인하며 프로덕션 준비된 CSS를 복사할 수 있습니다.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: '요소당 그림자 레이어', icon: 'mdi:layers' }, { value: '실시간', label: '변경 시 미리보기 업데이트', icon: 'mdi:eye' }, { value: '5', label: '빠른 프리셋', icon: 'mdi:star' }] },
+    { type: 'title', text: '현실적인 깊이를 위해 여러 그림자 쌓기', level: 3 },
+    { type: 'paragraph', html: '실제 그림자는 균일한 블러가 아닙니다. 요소 가까이에 타이트한 그림자를 더 부드럽고 넓은 그림자와 쌓으면 자연스러운 깊이가 만들어집니다. <strong>+</strong>로 레이어를 추가하세요.' },
+    { type: 'table', headers: ['컨트롤', 'CSS 값', '효과'], rows: [['오프셋 X', '첫 번째 길이', '수평 변위.'], ['오프셋 Y', '두 번째 길이', '수직 변위.'], ['블러', '세 번째 길이', '블러 반경.'], ['스프레드', '네 번째 길이', '그림자 확대 또는 축소.'], ['색상 및 불투명도', 'rgba()', '독립적인 불투명도의 그림자 색상.'], ['내부', 'inset', '요소 경계 내부에 그림자.']] },
+    { type: 'summary', title: '권장 워크플로우', items: ['프리셋으로 시작하세요.', '현실적인 깊이를 위해 레이어를 추가하세요.', '떠 있는 카드 효과에 음수 스프레드를 사용하세요.', '생성된 CSS를 복사하여 붙여넣으세요.'] },
+  ],
+};