CSS Generator
Box shadow, clip-path, cubic-bezier easing, and glassmorphism with live preview
- Files never leave your device
- Runs in your browser
- Free, no sign-up, no watermark
16px
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]How to use CSS Generator
Generate CSS visually with a live preview: box shadow, clip path, cubic bezier easing, glassmorphism, blob border radius, and text shadow. Each generator gives plain CSS and a Tailwind arbitrary-value class, ready to copy.
- 1
Pick a generator: Box shadow, Clip path, Cubic bezier, Glassmorphism, Blob radius, or Text shadow.
- 2
Start from a preset, or adjust the sliders and colors.
- 3
Drag directly on the preview where offered: clip-path points, the two bezier handles, or the blob handles.
- 4
Copy the CSS or the Tailwind class from the output below.
Frequently asked questions
Can I stack several shadows?
Yes. In Box shadow, click Add layer to combine layers, each with its own offset, blur, spread, color, opacity, and inset.
How do I add or remove points on a clip path?
Double-click the shape edge to add a point; select a point and press Delete to remove it. Circle, Ellipse, and Inset shapes use sliders instead.
Why can't I see the glass effect?
backdrop-filter only blurs what is behind the element, so it needs a colorful or busy background. The output includes the -webkit- prefix for Safari.
What do bezier values outside 0–1 do?
Y values above 1 or below 0 make the motion overshoot, which gives a bounce or anticipation effect. Press Play to compare it with linear motion.
Does the Tailwind output need a plugin?
No. It uses Tailwind's arbitrary-value syntax, such as rounded-[…] or [clip-path:…], which works in standard Tailwind.