CSS Underline Generator

Create beautiful, customizable underlines for your website with our free CSS Underline Generator. Instantly preview and copy CSS for solid, dotted, dashed, wavy, zigzag, and gradient underlines. Adjust thickness, color, position, and pattern to match your design needs.

Features

• Live Preview: Instantly see how your underline will look as you adjust settings. The preview updates in real time, so you can experiment with different styles and find the perfect underline for your text.
• Color Customization: Choose any underline color using a color picker. Enable gradients to blend two colors together, and adjust the gradient direction for unique effects.
• Dimensions Control: Fine-tune the underline’s thickness, vertical position (top or bottom), and padding. This allows you to match the underline perfectly to your font and layout.
• Pattern Selection: Select from multiple underline patterns including solid, dotted, dashed, wavy, and zigzag. Each pattern gives your text a distinct visual style.
• Edge Style: Add creative flair to your underline with skewed edges. Choose from no edge, skew left, skew right, or skew both for dynamic underline shapes.
• Layer Position: Decide whether the underline appears behind or in front of your text for different visual effects.
• SVG Decoration (Coming Soon): Soon, you’ll be able to add custom SVG patterns to your underlines for even more creative possibilities.
• Copy CSS Instantly: With one click, copy the generated CSS code and use it in your own projects. The code is ready to paste into your stylesheet.

How to Use

1. Customize your underline using the controls below
2. Preview the effect in real time
3. Copy the generated CSS and apply it to your website

Perfect for web designers, developers, and anyone looking to enhance text decoration with modern CSS effects.