🎨 CSS
✅ 100% Free
⚡ Live Preview
CSS Generator
Visually design CSS effects — box shadows, text shadows, and more — with live preview and instant code output. Drag sliders, pick colours, copy the CSS. Done.
🗂 Shadow Layers
⚙️ Layer Settings
Shadow Color
Opacity
40%
Horizontal Offset
0px
Vertical Offset
8px
Blur Radius
24px
Spread Radius
0px
Inset (inner shadow)
🟦 Preview Box
Width
160px
Height
100px
Border Radius
16px
Box Color
⚡ Presets
👁 Live Preview
Background:
📋 Generated CSS
🗂 Shadow Layers
⚙️ Layer Settings
Shadow Color
Opacity
50%
Horizontal Offset
2px
Vertical Offset
2px
Blur Radius
4px
✍️ Text Settings
Font Size
52px
Font Weight
800
Text Color
⚡ Presets
👁 Live Preview
Background:
DevToolbox
📋 Generated CSS
⚙️ Corner Radii
Uniform (all corners equal)
Top-Left20px
Top-Right20px
Bottom-Right20px
Bottom-Left20px
🟦 Preview Box
Width180px
Height120px
Box Color
Fill color
⚡ Presets
👁 Live Preview
📋 Generated CSS
⚙️ Type & Angle
Angle (linear/conic)135°
🎨 Color Stops
⚡ Presets
👁 Live Preview
📋 Generated CSS
🔲 Pattern Type
⚙️ Settings
Size20px
Line / Dot Width2px
Opacity25%
Pattern Color
Background Color
Canvas bg
👁 Live Preview
📋 Generated CSS
⚙️ Glass Settings
Backdrop Blur12px
Background Opacity15%
Border Opacity20%
Border Radius16px
Saturation180%
Glass Tint Color
rgba tint
⚡ Presets
👁 Live Preview
Glassmorphism Card
Beautiful frosted glass effect for modern UIs
📋 Generated CSS
⚙️ Neumorphism Settings
Base Color
Distance10px
Blur20px
Intensity15%
Border Radius20px
Width160px
Height100px
Inset (pressed in)
⚡ Presets
👁 Live Preview
📋 Generated CSS
⚙️ Filter Controls
Brightness100%
Contrast100%
Saturation100%
Hue Rotate0°
Blur0px
Grayscale0%
Sepia0%
Invert0%
Opacity100%
⚡ Presets
👁 Live Preview
📋 Generated CSS
👁️ Opacity Settings
Opacity80%
Element Color
Border Radius16px
📊 Quick Values
100% — Fully visibleopacity: 1
75% — Subtleopacity: .75
50% — Halfopacity: .5
25% — Faintopacity: .25
0% — Invisibleopacity: 0
👁 Live Preview
Preview
📋 Generated CSS
📐 Container Properties
flex-direction
flex-wrap
justify-content
align-items
align-content
gap12px
📦 Preview Items
Number of items5
👁 Live Preview
📋 Generated CSS
🔳 Grid Settings
Columns3
Rows2
Column Gap16px
Row Gap16px
grid-template-columns
justify-items
align-items
👁 Live Preview
📋 Generated CSS
📍 Position Type
top0px
rightauto
bottomauto
left0px
z-index1
ℹ️ About Position Values
static — default, no offset
relative — offset from self
absolute — offset from parent
fixed — offset from viewport
sticky — sticks on scroll
👁 Live Preview
📋 Generated CSS
🔄 Transform Functions
translateX0px
translateY0px
rotate0°
scaleX1
scaleY1
skewX0°
skewY0°
transform-origin
👁 Live Preview
Element
📋 Generated CSS
📚 Z-Index Value
z-index10
📖 Common Scale — click to apply
-1 — Behind everything
0 — Default stacking
10 — Slightly elevated
100 — Dropdowns / popovers
1000 — Sticky headers
9999 — Modals / overlays
👁 Stacking Preview
z-index: 1
z-index: 2
z-index: 10
📋 Generated CSS
🎬 Animation Settings
Animation Name
Duration1.0s
Timing Function
Delay0s
Iteration Count
Direction
Fill Mode
⚡ Preset Animations
👁 Live Preview
Animate
📋 Generated CSS
🖱️ Hover Effect
Transition Duration0.25s
Timing Function
🎨 Colors
Base Color
Normal state
Hover Color
Hover state
👁 Hover over the element
Hover Me
📋 Generated CSS
🎯 Animation Type
Duration0.6s
Button Color
Border Radius12px
👁 Click / Hover the button
📋 Generated CSS
⏳ Spinner Type
Size48px
Border Width4px
Speed0.8s
Primary Color
👁 Live Preview
📋 Generated CSS
✨ Animation Type
Duration0.5s
Delay0s
Timing Function
Distance (slide/zoom)30px
Fill Mode
👁 Live Preview
📋 Generated CSS
🔘 Button Style
Primary Color
Border Radius10px
Padding Y12px
Padding X24px
Font Size15px
Border Width2px
Box Shadow
Hover Transition
👁 Live Preview — hover to see effect
📋 Generated CSS
🃏 Card Settings
Background Color
Card background
Border Radius16px
Padding24px
Shadow Blur24px
Shadow Opacity10%
Border Width1px
Border Color
Border color
Hover lift effect
👁 Live Preview — hover the card
🚀
Card Title
Sample card with your custom CSS applied live.
📋 Generated CSS
🏷️ Badge Settings
Color
Border Radius100px
Font Size12px
Padding Y4px
Padding X12px
⚡ Quick Colors
👁 Live Preview
📋 Generated CSS
💬 Tooltip Settings
Position
Background
Tooltip bg
Border Radius8px
Padding Y7px
Padding X12px
Font Size13px
Arrow Size6px
👁 Hover over button
Tooltip text
📋 Generated CSS
🗔 Modal Settings
Modal Background
Modal bg
Border Radius20px
Padding32px
Max Width480px
Shadow Blur40px
Overlay Opacity50%
Entry Animation
Blur overlay
👁 Live Preview
📋 Generated CSS
What Is the CSS Generator?
The DevToolbox CSS Generator is a collection of visual tools that let you design CSS effects without writing a single line of code by hand. Drag sliders, pick colours, and toggle options — the generator produces clean, production-ready CSS that you can copy directly into your project.
Currently the generator includes a Box Shadow Generator and a Text Shadow Generator, both supporting multiple shadow layers so you can create complex, stacked effects just like the pros do.
Box Shadow vs Text Shadow
- box-shadow applies to the box model of any HTML element. It supports horizontal offset, vertical offset, blur, spread, colour, opacity, and the
insetkeyword for inner glows. - text-shadow applies only to text content. It supports horizontal offset, vertical offset, blur, and colour — but has no spread or inset options. Multiple shadows are stacked to create neon, 3D, and emboss effects.
- Both properties accept multiple comma-separated values, allowing you to layer several shadows on the same element.
Frequently Asked Questions
Click "Add Layer" to add a second shadow layer. Each layer has independent settings. The generator combines them into a single
box-shadow property with comma-separated values — e.g. box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08);. This technique is used by Google Material Design and Apple to create realistic, multi-depth shadows.The
inset keyword flips the shadow so it appears inside the element rather than outside. This is used for pressed-button effects, inner glow effects on inputs, and neumorphic design patterns where elements appear to be pushed into the surface.Yes — and you should. The Opacity slider in this generator converts your chosen colour to an
rgba() value automatically, giving you smooth semi-transparent shadows that look much better than solid-colour ones. You can also type any valid CSS colour directly into the hex field, including rgba(), hsla(), or named colours.In the Text Shadow Generator, add 3–4 layers with the same bright colour (e.g. cyan
#00FFFF), zero offsets, and progressively larger blur radii (e.g. 4px, 10px, 20px, 40px). Set the text colour to match. This creates the stacked glow that simulates neon light. Use a dark background for the full effect.Both
box-shadow and text-shadow have 100% global browser support across all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed for any currently supported browser.