<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Box shadow CSS generator</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.10/babel.min.js"></script>

<style>

body {

font-family: Arial, sans-serif;

line-height: 1.6;

color: #333;

max-width: 600px;

margin: 0 auto;

padding: 20px;

}

.preview-box {

width: 200px;

height: 200px;

margin: 20px auto;

background-color: white;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid #ccc;

}

.control-group {

margin-bottom: 15px;

}

label {

display: block;

margin-bottom: 5px;

}

input[type="range"], input[type="color"] {

width: 100%;

}

.css-output {

background-color: #f4f4f4;

padding: 10px;

border-radius: 4px;

font-family: monospace;

white-space: pre-wrap;

}

button {

background-color: #4CAF50;

border: none;

color: white;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 4px;

}

</style>

<div id="root"></div>

<p><a href="https://simonwillison.net/2024/Jul/8/box-shadow-css-generator/">How I built this with Claude 3.5 Sonnet</a></p>

<script type="text/babel">

const BoxShadowTool = () => {

const [horizontalOffset, setHorizontalOffset] = React.useState(0);

const [verticalOffset, setVerticalOffset] = React.useState(4);

const [blurRadius, setBlurRadius] = React.useState(8);

const [spreadRadius, setSpreadRadius] = React.useState(0);

const [color, setColor] = React.useState('#000000');

const [opacity, setOpacity] = React.useState(20);

const boxShadow = `${horizontalOffset}px ${verticalOffset}px ${blurRadius}px ${spreadRadius}px ${color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;

const cssCode = `box-shadow: ${boxShadow};`;

const copyToClipboard = () => {

navigator.clipboard.writeText(cssCode);

alert('CSS copied to clipboard!');

};

return (

<div>

<h1>Box shadow CSS generator</h1>

<div className="preview-box" style={{ boxShadow }}>

Preview

</div>

<div className="control-group">

<label>Horizontal Offset: {horizontalOffset}px</label>

<input

type="range"

min="-50"

max="50"

value={horizontalOffset}

onChange={(e) => setHorizontalOffset(Number(e.target.value))}

/>

</div>

<div className="control-group">

<label>Vertical Offset: {verticalOffset}px</label>

<input

type="range"

min="-50"

max="50"

value={verticalOffset}

onChange={(e) => setVerticalOffset(Number(e.target.value))}

/>

</div>

<div className="control-group">

<label>Blur Radius: {blurRadius}px</label>

<input

type="range"

min="0"

max="50"

value={blurRadius}

onChange={(e) => setBlurRadius(Number(e.target.value))}

/>

</div>

<div className="control-group">

<label>Spread Radius: {spreadRadius}px</label>

<input

type="range"

min="-50"

max="50"

value={spreadRadius}

onChange={(e) => setSpreadRadius(Number(e.target.value))}

/>

</div>

<div className="control-group">

<label>Color</label>

<input

type="color"

value={color}

onChange={(e) => setColor(e.target.value)}

/>

</div>

<div className="control-group">

<label>Opacity: {opacity}%</label>

<input

type="range"

min="0"

max="100"

value={opacity}

onChange={(e) => setOpacity(Number(e.target.value))}

/>

</div>

<div className="control-group">

<label>CSS Code:</label>

<div className="css-output">{cssCode}</div>

<button onClick={copyToClipboard}>Copy to Clipboard</button>

</div>

</div>

);

};

ReactDOM.render(<BoxShadowTool />, document.getElementById('root'));

</script>