CSS Utilities for Developers

A curated collection of modern CSS generators. Pick a tool below and craft beautiful styles in seconds.

Box Shadow

Generate layered drop shadows with full color and opacity control. Supports image preview.

Gradient

Create linear and radial gradients with precise direction and color blending.

Border Radius

Fine-tune each corner independently. From sharp edges to smooth organic shapes.

Text Shadow

Add depth to typography with customizable blur, offset, and color shadows.

Glassmorphism

Design frosted glass UI elements with blur, saturation, and border controls.

Transform

Rotate, scale, skew, and translate elements with real-time 2D transformation preview.

Filter

Apply blur, brightness, contrast, grayscale, hue-rotate, saturate, and sepia effects.

Box Shadow

Shadow Generator

Preview Mode

Box Color

Shadow Properties

Horizontal Offset10px

Vertical Offset10px

Blur Radius15px

Spread Radius0px

Opacity50%

Shadow Color

CSS

box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.5);

Gradient Generator

Color Blend

Color 1

Color 2

Gradient Direction

Gradient Type

CSS

background: linear-gradient(to right, #ec4899, #8b5cf6);

Border Radius

Shape Editor

Top Left0px

Top Right0px

Bottom Right0px

Bottom Left0px

Box Color

CSS

border-radius: 0px 0px 0px 0px;

Text Shadow

Typography Effects

Preview Text

Text Color

Horizontal Offset2px

Vertical Offset2px

Blur Radius4px

Shadow Color

Hello World

CSS

text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);

Glassmorphism

Frosted Glass UI

Blur Strength16px

Opacity25%

Saturation180%

Background Color Tint

Border Opacity18%

Border Radius16px

Glass Card

CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);

CSS Transform

2D Transformations

Rotate (deg)0°

Scale1.0

Skew X (deg)0°

Skew Y (deg)0°

Translate X (px)0px

Translate Y (px)0px

Box Color

Transform

CSS

transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate(0px, 0px);

CSS Filter

Visual Effects

Blur (px)0px

Brightness (%)100%

Contrast (%)100%

Grayscale (%)0%

Hue Rotate (deg)0°

Saturate (%)100%

Sepia (%)0%

CSS

filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) saturate(100%) sepia(0%);