SVG & CSS Generator

SVG Controls

Shape Type

Circle

Rectangle

Polygon

Star

Ellipse

Path

Radius

Width

Height

Border Radius

Number of Sides

Size

Points

Outer Radius

Inner Radius

X Radius

Y Radius

Fill Color

Stroke Color

Stroke Width

Rotation

Preview

SVG Code

<svg width="300" height="300" viewBox="0 0 300 300">
                <circle cx="150" cy="150" r="80" fill="#6366f1" stroke="#4f46e5" stroke-width="2"/>
                </svg>

Box Shadow Controls

Horizontal Offset

Vertical Offset

Blur

Spread

Color

Opacity

Inset

Apply inset shadow

Preview

CSS Code

.box-shadow {
                box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
                }

Text Shadow Controls

Text Content

Font Size

Font Weight

Text Color

Horizontal Offset

Vertical Offset

Blur

Shadow Color

Shadow Opacity

Preview

Shadow Text

CSS Code

.text-shadow {
                color: #1f2937;
                font-size: 48px;
                font-weight: 700;
                text-shadow: 2px 2px 4px rgba(99, 102, 241, 0.5);
                }

Gradient Controls

Gradient Type

Angle

Color Stops

Preview

CSS Code

.gradient {
                background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
                }

CSS Filter Controls

Blur

Brightness

Contrast

Grayscale

Hue Rotate

deg

Invert

Opacity

Saturate

Sepia

Preview

Filter Preview

CSS Code

.filtered {
                filter: none;
                }

Animation Controls

Animation Type

Fade

Slide In

Bounce

Pulse

Shake

Rotate

Scale

Flip

Duration

Timing Function

Delay

Iteration Count

Infinite

Direction

Fill Mode

Preview

Animate Me

CSS Code

/* Keyframes */
                @keyframes fade {
                from { opacity: 0; }
                to { opacity: 1; }
                }

                /* Animation */
                .animated {
                animation: fade 1s ease 0s 1 normal forwards;
                }

Border Radius Controls

Link All Corners

All Corners

Box Size

Background Color

Presets

Preview

CSS Code

.rounded-box {
                border-radius: 20px;
                }

Flexbox Controls

Flex Direction

Justify Content

Align Items

Flex Wrap

Gap

Number of Items

Preview

CSS Code

.flex-container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: stretch;
                flex-wrap: nowrap;
                gap: 10px;
                }

CSS Grid Controls

Columns

Rows

Column Gap

Row Gap

Justify Items

Align Items

Column Size

Preview

CSS Code

.grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 1fr);
                column-gap: 10px;
                row-gap: 10px;
                justify-items: stretch;
                align-items: stretch;
                }