CSS Resources
Everything you need to design, generate and reference CSS in one place — 37 free visual generators that output copy-ready code, plus fast, practical cheat sheets for selectors, units, functions, at-rules, pseudo-classes, Flexbox and Grid. No sign-up, no paywall.
CSS Generators
Visual, no-code generators — adjust the controls, preview live, and copy production-ready CSS.
Test CSS :nth-child formulas (odd, even, 2n+1, 3n, -n+3) visually — matching items highlight live so you can …
CSS Accordion GeneratorCreate a pure-CSS accordion (no JavaScript) with the native details element — style the header, icon, border,…
CSS Animated Text GeneratorCreate animated text with pure CSS — typewriter, wave, gradient-slide, or fade-pulse effects in your text, co…
CSS Animation & Keyframes GeneratorCreate CSS keyframe animations visually — fade, slide, zoom, bounce, spin, pulse, and shake, with duration, t…
CSS Border-Radius GeneratorRound element corners visually and copy the CSS — control each corner, make circles and pill shapes, or gener…
CSS Box-Shadow GeneratorDesign CSS box-shadows visually with live preview — control offset, blur, spread, opacity, color, and inset, …
CSS Button GeneratorDesign CSS buttons visually — colors, gradients, padding, radius, shadow, and hover effects with a live previ…
CSS Checkbox & Radio GeneratorStyle custom checkboxes and radio buttons with pure CSS — colors, size, and check/dot marks — with a live pre…
CSS Clip-Path GeneratorCreate CSS clip-path shapes visually — triangles, hexagons, stars, arrows, circles and more — with a live pre…
CSS Color Variable GeneratorTurn a color palette into CSS custom properties — named :root variables, or a full 50–900 shade scale from on…
CSS Filter GeneratorExperiment with CSS filters visually — blur, brightness, contrast, saturate, grayscale, sepia, and hue-rotate…
CSS Flexbox GeneratorBuild flexbox layouts visually — set direction, justify, align, wrap, and gap with a live preview, then copy …
CSS Glitch Text GeneratorCreate an animated glitch text effect with pure CSS — RGB color-split, flicker, and distortion in your colors…
CSS Gradient Border GeneratorCreate gradient borders that work with rounded corners — set colors, angle, width, and radius with a live pre…
CSS Gradient GeneratorCreate CSS gradients visually and copy the code in one click — linear, radial, and conic gradients with unlim…
CSS Gradient Text GeneratorCreate gradient text with CSS visually — pick colors and angle, preview live, and copy the background-clip co…
CSS Grid GeneratorCreate CSS Grid layouts visually — set columns, rows, gaps, and responsive sizing with a live preview, then c…
CSS Loader & Spinner GeneratorCreate pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable …
CSS Menu GeneratorCreate a styled navigation menu with CSS — horizontal or vertical, custom colors, hover, spacing, and radius …
CSS Pattern GeneratorCreate seamless CSS background patterns — stripes, dots, checkerboard, grids and more — with two colors and a…
CSS Range Slider GeneratorStyle HTML range sliders with cross-browser CSS — track, fill, and thumb colors, sizes, and shadow — with a d…
CSS Ribbon GeneratorCreate corner ribbons for cards — a diagonal "New" / "Sale" banner in any corner with custom text and colors,…
CSS Scrollbar GeneratorStyle custom scrollbars with CSS — width, track/thumb colors, and radius, with a live scrollable preview and …
CSS Skeleton Loader GeneratorGenerate CSS skeleton loading screens — card, profile, or text layouts with shimmer or pulse animation, custo…
CSS Specificity CalculatorCalculate any CSS selector's specificity — ID/class/element breakdown with per-part explanation and a compare…
CSS Text Highlighter GeneratorCreate marker-style text highlight effects with CSS — flat, underline, marker, or half-height styles in any c…
CSS Text Input GeneratorStyle text input fields with CSS — border, focus color, background, radius, padding, and a focus glow ring — …
CSS Text-Shadow GeneratorAdd shadows and glow effects to text visually — adjust offset, blur, opacity, and color with a live preview a…
CSS Toast Notification GeneratorDesign toast notifications — success/error/info/warning, position, and colors — with a live preview and a tin…
CSS Toggle Switch GeneratorBuild an iOS-style toggle switch with pure CSS — size, on/off, and knob colors, with copy-ready HTML + CSS. A…
CSS Tooltip GeneratorCreate pure-CSS tooltips — pick position, colors, radius, and arrow, hover a live preview, then copy the code…
CSS Transform Generator (2D & 3D)Build CSS transforms visually — combine translate, scale, rotate, skew, and 3D rotation with a live preview, …
CSS Triangle GeneratorGenerate a pure-CSS triangle in any direction — set size and color, preview it live, and copy the code. Perfe…
CSS clamp() Calculator (Fluid Typography)Generate fluid, responsive font sizes and spacing with CSS clamp() — set min/max size and viewport range and …
Cubic-Bezier Easing GeneratorDesign custom CSS easing curves visually — drag the curve, preview the timing on a moving element, and copy t…
Glassmorphism CSS GeneratorCreate the frosted-glass (glassmorphism) effect visually — adjust blur, transparency, tint, and border over a…
Neumorphism CSS GeneratorCreate soft-UI neumorphism effects visually — adjust color, distance, blur, and shape (flat, concave, convex)…
CSS Selectors
Selectors decide which elements a rule targets. Combine them to reach exactly the elements you want.
| Selector | Matches | Example |
|---|---|---|
* | Every element (universal) | * { margin: 0; } |
.class | Elements with that class | .btn { … } |
#id | The element with that id | #hero { … } |
A, B | Either A or B (group) | h1, h2 { … } |
A B | B inside A (descendant) | nav a { … } |
A > B | B as a direct child of A | ul > li { … } |
A + B | B immediately after A | h2 + p { … } |
A ~ B | Any B after A (siblings) | h2 ~ p { … } |
[attr] | Has that attribute | [disabled] { … } |
[attr="x"] | Attribute equals a value | [type="email"] |
[attr^="x"] | Attribute starts with | [href^="https"] |
[attr$="x"] | Attribute ends with | [src$=".svg"] |
[attr*="x"] | Attribute contains | [class*="col-"] |
/* Style links inside the main nav only */
nav > ul > li a {
color: #6d5ef6;
font-weight: 600;
}
/* Every input except checkboxes */
input:not([type="checkbox"]) {
border: 1px solid #cbd5e1;
}Want to compare which rule wins? Use the CSS Specificity Calculator and the :nth-child Tester.
CSS Units
Absolute units are fixed; relative units scale with context — the key to responsive layouts.
| Unit | Relative to | Best for |
|---|---|---|
px | Nothing (absolute pixels) | Borders, fine detail |
rem | Root font size | Font sizes, spacing (recommended) |
em | Element's own font size | Padding that scales with text |
% | Parent element | Fluid widths & heights |
vw / vh | Viewport width / height | Full-screen sections, hero text |
vmin / vmax | Smaller / larger viewport axis | Elements that must always fit |
fr | Free space in a grid | CSS Grid track sizing |
ch | Width of the “0” glyph | Readable line lengths |
rem for type and spacing, % or fr for layout, and clamp() for fluid sizes that grow with the screen. Reserve px for hairline borders.Convert between them with the CSS Unit Converter or build fluid sizes with the clamp() Calculator.
CSS Functions
Functions compute values dynamically — for math, color, layout and responsive sizing.
| Function | What it does | Example |
|---|---|---|
calc() | Mixes units in math | width: calc(100% - 2rem) |
clamp() | Min, preferred, max value | clamp(1rem, 2vw, 1.5rem) |
min() / max() | Pick smallest / largest | min(90%, 60rem) |
var() | Reads a custom property | color: var(--accent) |
rgb() / hsl() | Define a color | hsl(248 90% 66%) |
linear-gradient() | Gradient image | linear-gradient(90deg,#f00,#00f) |
url() | Reference an asset | url("bg.png") |
translate() / scale() | Transform an element | transform: scale(1.1) |
:root {
--space: 1rem;
--accent: #6d5ef6;
}
.card {
/* fluid type: never below 1rem, never above 1.5rem */
font-size: clamp(1rem, 2vw, 1.5rem);
padding: calc(var(--space) * 2);
max-width: min(100%, 60rem);
}CSS At-Rules
At-rules start with @ and give the browser instructions — from responsive breakpoints to animations and feature tests.
| At-rule | Purpose |
|---|---|
@media | Apply styles at certain screen sizes or capabilities |
@keyframes | Define the steps of an animation |
@font-face | Load and name a custom font |
@supports | Apply styles only if a feature is supported |
@container | Style based on a parent container's size |
@import | Pull in another stylesheet |
@layer | Group rules into cascade layers for control |
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@supports (display: grid) {
.layout { display: grid; }
}Build keyframes visually with the CSS Animation Generator.
Pseudo-classes & Pseudo-elements
Pseudo-classes (:) target elements in a state; pseudo-elements (::) style a part of an element.
| Selector | Type | Targets |
|---|---|---|
:hover | Pseudo-class | Element the pointer is over |
:focus | Pseudo-class | Focused element (keyboard/click) |
:nth-child(n) | Pseudo-class | Element by position among siblings |
:first-child / :last-child | Pseudo-class | First or last sibling |
:not(x) | Pseudo-class | Everything except x |
:checked | Pseudo-class | Checked checkbox / radio |
::before / ::after | Pseudo-element | Generated content in the element |
::placeholder | Pseudo-element | Placeholder text of an input |
::first-line | Pseudo-element | First line of a block of text |
::selection | Pseudo-element | Text the user has highlighted |
/* Add an icon before every external link */
a[target="_blank"]::after {
content: " ↗";
color: #6d5ef6;
}
/* Zebra-stripe table rows */
tr:nth-child(even) {
background: #f8fafc;
}Flexbox Quick Reference
Flexbox lays items out in one dimension — a row or a column — and is perfect for toolbars, cards and centering.
| Property | On | Common values |
|---|---|---|
display | Container | flex, inline-flex |
flex-direction | Container | row, column |
justify-content | Container | center, space-between |
align-items | Container | center, stretch |
flex-wrap | Container | wrap, nowrap |
gap | Container | 1rem, 8px 16px |
flex | Item | 1, 0 0 auto |
/* Perfectly center anything */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* Responsive card row */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}Prototype layouts fast with the Flexbox Generator.
CSS Grid Quick Reference
Grid lays out items in two dimensions — rows and columns — ideal for whole-page and gallery layouts.
| Property | Purpose | Example |
|---|---|---|
grid-template-columns | Define column tracks | 1fr 1fr 1fr |
grid-template-rows | Define row tracks | auto 1fr auto |
gap | Space between tracks | 16px |
repeat() | Repeat a track pattern | repeat(3, 1fr) |
minmax() | Track size range | minmax(200px, 1fr) |
place-items | Align items in both axes | center |
/* Auto-fitting responsive grid — no media queries needed */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}Design grids visually with the CSS Grid Generator.
Media Queries & Breakpoints
Media queries apply styles conditionally — by width, colour scheme, or user preferences like reduced motion.
/* Common mobile-first breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
}
/* Automatic dark mode */
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: #e2e8f0; }
}Frequently Asked Questions
Quick answers about these CSS resources and how to use them.
What is this CSS resources page?
It is a single hub that brings together every free CSS generator on SEOlust alongside handy quick-reference cheat sheets for selectors, units, functions, at-rules, pseudo-classes, Flexbox and Grid. Use the generators to produce copy-ready code, and the references to look up syntax fast.
Are these CSS tools free to use?
Yes. Every generator and reference here is completely free, runs in your browser, and requires no account or sign-up.
Do the CSS generators work without JavaScript frameworks?
Yes. Each generator outputs plain, standards-based CSS (and minimal HTML where needed) that you can paste into any project — no framework, build step, or library required.
What is the difference between a pseudo-class and a pseudo-element?
A pseudo-class targets an element in a particular state, such as :hover or :nth-child(), and uses a single colon. A pseudo-element styles a specific part of an element, such as ::before or ::first-line, and uses a double colon.
Which CSS units should I use for responsive design?
Use rem for font sizes and spacing so everything scales with the user’s base font size, percentages or fr units for fluid layout widths, and viewport units (vw, vh) or clamp() for fluid typography. Reserve px for fine details like borders.
How do I center an element in CSS?
The simplest modern way is Flexbox on the parent: display:flex; justify-content:center; align-items:center. With Grid you can use display:grid; place-items:center. Both center a child horizontally and vertically.
Can I use these references for learning CSS?
Absolutely. The cheat sheets are written to be beginner-friendly with working code examples you can copy, while the generators let you experiment visually and see the exact CSS each change produces.