Style Lab

See Your Style
Come to Life.

Explore fonts, colors, gradients, and more. No code needed. Just pick what looks right.

Font Pairing Presets
Font Family (select a font)
Preview Text (type here)
Size 32px
Weight
Line Height 1.3
Letter Spacing 0em
Preview
CSS Snippet
font-family: 'Playfair Display', serif;
Font Family (select a font)
Preview Text (type here)
Size 22px
Weight
Line Height 1.4
Letter Spacing 0em
Preview
CSS Snippet
font-family: 'Montserrat', sans-serif;
Font Family (select a font)
Preview Text (type here)
Size 16px
Weight
Line Height 1.6
Letter Spacing 0em
Preview
CSS Snippet
font-family: 'Lato', sans-serif;
Combined Preview - All Three Fonts Together
H1Header Font
Designing for the Modern Web
H2Subheader Font
How typography shapes the user experience
PBody Font
Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity. Typography is the craft of endowing human language with a durable visual form.

Click any color swatch to open the color picker, or drag the R / G / B sliders to mix a color. Copy HEX, RGB, or HSL values directly from each card.

Pick a base color below. Select a harmony type to instantly generate colors that work well together — great for building brand palettes or choosing accent colors.

Base Color
R184
G134
B11
Generated Palette

Choose Linear (flows in a direction) or Radial (radiates from a center point). Pick a direction, adjust each color stop's color and position, then copy the CSS background value.

Custom Angle 90°
Color Stops
CSS Output
background: linear-gradient(90deg, ...);

Set your text color (left) and background color (right). The live preview shows exactly how they look together. The contrast ratio must meet 4.5:1 for AA (normal text) and 7:1 for AAA.

Text Color
R30
G30
B30
Background Color
R255
G255
B255
Aa - The quick brown fox jumps over the lazy dog.
Ratio
--
AA Normal
Fail
4.5:1 needed
AA Large
Fail
3:1 needed
AAA Normal
Fail
7:1 needed
AAA Large
Fail
4.5:1 needed

Drag the sliders to round each corner of the preview box. Set all four to the same value for uniform rounding, or mix values for asymmetric shapes.

Top Left 10px
Top Right 10px
Bottom Right10px
Bottom Left 10px
CSS Output
border-radius: 10px;

H Offset moves the shadow left (−) or right (+). V Offset moves it up (−) or down (+). Blur softens the edge. Spread grows or shrinks the shadow. Toggle Inset for an inner shadow effect.

H Offset4px
V Offset6px
Blur 14px
Spread 0px
Shadow Color
R0
G0
B0
Opacity20%
CSS Output
box-shadow: 4px 6px 14px 0px rgba(0,0,0,0.20);

A type scale gives your headings and body text a consistent size rhythm. Set your base size (16px = browser default), choose a ratio (Major Third is a safe default), then copy the CSS variables into your project.

Scale Ratio
Steps Below Base
Steps below 2
Steps Above Base
Steps above 6
StepPreviewpxrem
CSS Custom Properties Output
:root { ... }
Padding (px)
Top 16px
Right 16px
Bottom16px
Left 16px
Margin (px)
Top 16px
Right 16px
Bottom16px
Left 16px
Margin
Padding
Content
Content
Padding CSS
padding: 16px;
Margin CSS
margin: 16px;
H Offset2px
V Offset2px
Blur 4px
Shadow Color
R0
G0
B0
Opacity40%
The quick brown fox
CSS Output
text-shadow: 2px 2px 4px rgba(0,0,0,0.40);
Translate X0px
Translate Y0px
Rotate 0deg
Scale X 1.0
Scale Y 1.0
Skew X 0deg
Skew Y 0deg
Box
CSS Output
transform: none;
Brightness 100%
Contrast 100%
Saturate 100%
Hue Rotate 0deg
Blur 0px
Opacity 100%
Grayscale 0%
Sepia 0%
Invert 0%
Filter Preview
CSS Output
filter: none;
Property
Duration0.30s
Easing
Delay0.00s
Hover me
Hover or tap the box to preview.
Previews: opacity & transform.
CSS Output
transition: all 0.30s ease 0s;

Want More Tools?

Head back to The Lab for templates, chatbot widgets, contact forms, and more.

Back to The Lab